Cells

The KendoReact Data Grid provides options for customizing its cell content by allowing you to define different types of cells.

Cell Types

Grid Cells

The GridCell component represents a React component or a functional component that accepts GridCellProps and returns a <td /> element. The Grid initializes its grid cells from the data for each of its rows and columns. You can replace a grid cell with a custom cell by using the cell property of the Grid column.

Filter Cells

The FilterCell component represents a React component or a functional component that accepts FilterCellProps. The Grid renders a single filter cell for each column inside the filter row. By default, the filter cell takes its value from the value of the filter property. You can replace a filter cell with a custom cell by using the filterCell property of the Grid column.

Header Cells

The HeaderCell component represents a React component or a functional component that accepts HeaderCellProps. The Grid renders a single header cell for the header of each column. By default, the header cell displays the data field or the title property together with the sorting indicators. You can replace a header cell with a custom cell by using the headerCell property of the Grid column.

Cell Customization

The following example demonstrates how to set a custom cell in the Grid and pass additional props to it.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import sampleProducts from './products.json';

class CustomCell extends React.Component {
    render() {
        const value = this.props.dataItem[this.props.field];
        return (
            <td style={{ color: value ? this.props.myProp[0].color : this.props.myProp[1].color }}> {
                (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
            </td>
        );
    }
}

class App extends React.Component {
    state = {
        data: sampleProducts
    }
    customData = [
        { color: 'green' },
        { color: 'red' }
    ];
    MyCustomCell = (props) => <CustomCell {...props} myProp={this.customData} />
    render() {

        return (
            <Grid data={this.state.data}   >
                <GridColumn field="ProductID" title="Id" width="50px" editable={false} />
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="FirstOrderedOn" editor="date" format="{0:d}" />
                <GridColumn field="UnitsInStock" title="Units" editor="numeric" />
                <GridColumn
                    field="Discontinued"
                    cell={this.MyCustomCell}
                />
            </Grid>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Cell Tooltip

The Grid enables you to render tooltips for its cells. For more information, refer to the article on implementing the KendoReact Tooltip in the Grid.

 /