Cells

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

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.

You can set a footer cell by using the footerCell property of the Grid column. The footerCell property accepts a React component or a functional component that receives FooterCellProps. The Grid renders a single footer cell under each column that has its footerCell property set. That cell will appear at the bottom of the column and will be always visible regardless of the vertical scrolling of the Grid.

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

const UnitPriceCell = (props) => {
    const min = products.reduce((acc, current) => Math.min(acc, current[props.field]), Number.MAX_VALUE);
    const max = products.reduce((acc, current) => Math.max(acc, current[props.field]), 0);
    return (
        <td colSpan={props.colSpan} style={props.style}>
            min: {min}, max: {max}
        </td>
    );
}

const UnitsInStockCell = (props) => {
    const total = products.reduce((acc, current) => acc + current[props.field], 0);
    return (
        <td colSpan={props.colSpan} style={props.style}>
            total: {total}
        </td>
    );
}

class App extends React.PureComponent {
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={products}
            >
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="UnitPrice" title="Unit Price" footerCell={UnitPriceCell} />
                <Column field="UnitsInStock" title="Units In Stock" footerCell={UnitsInStockCell} />
                <Column field="Category.CategoryName" title="Category Name" />
            </Grid>
        );
    }
}

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

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.

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')
);
 /