Skip to main content

Cell component props

Cell components are used to render each individual cells of a column:

const MyCellComponent = ({ rowData, setRowData }) => {
  // Render a cell reflecting the value of `rowData` and update it using `setRowData`
}

const columns = [{ title: 'A', component: MyCellComponent }]

Data​

rowData​

Type: any

The row object from which tha value of the cell should be extracted. Make sure to use keyColumn if you do not need the entire row object.

setRowData​

Type: (rowData) => void

This function should be called to update the row with its new value.

Extra information​

rowIndex​

Type: number

Index of the row.

columnIndex​

Type: number

Index of the column.

columnData​

Type: any

The column's data. More details

Cell state​

Try editing a cell to see the difference between active and focus:

A
1
2
3
4
rows

active​

Type: boolean

True when the cell is active / highlighted.

It is recommended to hide any placeholder while a cell is not active to avoid having an entire empty column with the same text repeating.

focus​

Type: boolean

True when the cell is focused / being edited.

It is recommended to apply style pointerEvents: none to your components while they are not in focus to prevent any unwanted interactions or cursor.

disabled​

Type: boolean

True when the cell is disabled |

Control functions​

stopEditing​

Type: ({ nextRow = true }) => void

This function can be called to exit edit mode programmatically. This is mainly used when disableKeys is true but it can have other use-cases.

Optionally you can pass the nextRow parameter to false so the active / highlighted cell stays on the current cell instead of going to the next row.

insertRowBelow​

Type: () => void

This function can be called to insert a row below the current one.

duplicateRow​

Type: () => void

This function can be called to duplicate the current row.

deleteRow​

Type: () => void

This function can be called to delete the current row.

getContextMenuItems​

Type: () => ContextMenuItem[]

This function can be called to get the list of available context menu items (insert row, duplicate selected rows...).