React Data GridCell Components

react logo

Custom HTML / DOM inside Cells is achieved using Cell Components. Create Custom Cell Components to have any HTML markup in a cell. The grid comes with some Provided Cell Components for common grid tasks.

React Cell Renderers thumbnail

The example below shows adding images, hyperlinks, and buttons to a cell using Custom Cell Components.

Provided Components

The grid comes with some Cell Components out of the box. These Provided Cell Components cover common some common complex cell rendering requirements.

Custom Components

The Component is provided props containing, amongst other things, the value to be rendered.

// this comp gets inserted into the Cell
const CustomButtonComp = props => {
    return <>{props.value}</>;
};

The provided props (interface CustomCellRendererProps) are: