{/* Do not edit this file. It is automatically generated by API Documenter. */}


## CellRenderer

Base model for cell renderers

**Signature:**

```typescript
export interface CellRenderer
```

## Remarks

It is a device for displaying the values of data cells on a grid.

All properties of CellRenderer can be called/set only in classes that inherit them. Please refer to the list below.

Previous versions of the cell renderer basically render using style information generated from the column, but from 2.0 onwards, it is applied as a CSS style class.

Specify the type and properties of the renderer for each [column](/refs/Interface/ValueColumn#renderer){/* */}.

There are properties that can be specified for each cell renderer, and if not specified in DataColumn, [TextCellRenderer](/refs/Interface/TextCellRenderer) is set as default.

Also, when it is in object form, the `type` property can be specified in the form of a string in [column.renderer](/refs/Interface/ValueColumn#renderer).

\[List\]

[TextCellRenderer](/refs/Interface/TextCellRenderer){/* */}: Default text renderer

[BarCellRenderer](/refs/Interface/BarCellRenderer){/* */}: Bar renderer

[ImageCellRenderer](/refs/Interface/ImageCellRenderer){/* */}: Image renderer

[IconCellRenderer](/refs/Interface/IconCellRenderer){/* */}: Icon renderer

[CheckCellRenderer](/refs/Interface/CheckCellRenderer){/* */}: Check cell renderer

[ButtonCellRenderer](/refs/Interface/ButtonCellRenderer){/* */}: Button renderer

[ShapeCellRenderer](/refs/Interface/ShapeCellRenderer){/* */}: Shape renderer

[LinkCellRenderer](/refs/Interface/LinkCellRenderer){/* */}: Link cell renderer

[SignalBarCellRenderer](/refs/Interface/SignalBarCellRenderer){/* */}: Signal bar renderer

[Code39CellRenderer](/refs/Interface/Code39CellRenderer){/* */}: Barcode renderer

[Code128CellRenderer](/refs/Interface/Code128CellRenderer){/* */}: Barcode renderer

[SeriesTextCellRenderer](/refs/Interface/SeriesTextCellRenderer){/* */}: Series text renderer

[SparkLineRenderer](/refs/Interface/SparkLineRenderer){/* */}: Series spark line renderer

[SparkColumnRenderer](/refs/Interface/SparkColumnRenderer){/* */}: Series column renderer

[SparkWinLossRenderer](/refs/Interface/SparkWinLossRenderer){/* */}: Series Win Loss Renderer

[TemplateCellRenderer](/refs/Interface/TemplateCellRenderer){/* */}: Template renderer

## Example


```js
//string type
column.renderer = "text"

// object type
column.renderer = { type: "text", showTooltip: true}
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [ariaLabelCallback](/refs/Interface/CellRenderer#arialabelcallback) | [GetAriaLabelCallback](/refs/realgrid#getarialabelcallback) | Callback used when setting aria-label directly |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [clickOnlyFocusedCell](/refs/Interface/CellRenderer#clickonlyfocusedcell) | boolean | If `true`{/* */}, the click event occurs only when the cell is focused or a cell where the focus can be moved. |
| [showTooltip](/refs/Interface/CellRenderer#showtooltip) | boolean | Tooltip visibility |
| [tooltipEllipsisOnly](/refs/Interface/CellRenderer#tooltipellipsisonly) | boolean | Whether to display tooltips only in cells in ellipsis state |
| [type](/refs/Interface/CellRenderer#type) | string | Types of renderers |

## Events Desc

### ariaLabelCallback

Callback used when setting aria-label directly

`Type` - [GetAriaLabelCallback](/refs/realgrid#getarialabelcallback)

**Remarks:**

Sets the string to be used when the screen reader reads cell information.

It follows the format of [GetAriaLabelCallback](/refs/realgrid#getarialabelcallback).

\[Property List\]

`grid` - GridBase control

`model` - a cell in the grid

**Example:**


```js
const f = function(grid, model) {
 var s = model.value;
 var date = grid.getValue(model.item.index, "date")
 s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " new" : "";
 return s;
}

column.renderer = {
 type: 'text',
 ariaLabelCallback: f
}
```

<hr/>

## Properties Desc

### clickOnlyFocusedCell

If `true`{/* */}, the click event occurs only when the cell is focused or a cell where the focus can be moved.

`Type` - boolean

**Remarks:**

[GridBase.onCurrentChanging](/refs/Class/GridBase#oncurrentchanging) Used to prevent basic operations such as check and link from being executed when false is returned in the event.

<hr/>

### showTooltip

Whether to display tooltips

`Type` - boolean

<hr/>

### tooltipEllipsisOnly

Whether to display tooltips only in cells in ellipsis state

`Type` - boolean

<hr/>

### type

Types of renderers

`Type` - string

**Remarks:**

[TextCellRenderer](/refs/Interface/TextCellRenderer){/* */}: `'text'`

[BarCellRenderer](/refs/Interface/BarCellRenderer){/* */}: `'bar'`

[ImageCellRenderer](/refs/Interface/ImageCellRenderer){/* */}: `'image'`

[IconCellRenderer](/refs/Interface/IconCellRenderer){/* */}: `'icon'`

[CheckCellRenderer](/refs/Interface/CheckCellRenderer){/* */}: `'check'`

[ButtonCellRenderer](/refs/Interface/ButtonCellRenderer){/* */}: `'button'`

[ShapeCellRenderer](/refs/Interface/ShapeCellRenderer){/* */}: `'shape'`

[LinkCellRenderer](/refs/Interface/LinkCellRenderer){/* */}: `'link'`

[SignalBarCellRenderer](/refs/Interface/SignalBarCellRenderer){/* */}: `'signalbar'`

[Code39CellRenderer](/refs/Interface/Code39CellRenderer){/* */}: `'code39'`

[Code128CellRenderer](/refs/Interface/Code128CellRenderer){/* */}: `'code128'`

[SeriesTextCellRenderer](/refs/Interface/SeriesTextCellRenderer){/* */}: `'series'`

[SparkLineRenderer](/refs/Interface/SparkLineRenderer){/* */}: `'sparkline'`

[SparkColumnRenderer](/refs/Interface/SparkColumnRenderer){/* */}: `'sparkcolumn'`

[SparkWinLossRenderer](/refs/Interface/SparkWinLossRenderer){/* */}: `'sparkswinloss'`

[TemplateCellRenderer](/refs/Interface/TemplateCellRenderer){/* */}: `'template'`

<hr/>