Hiding Repeating Cell Values in KendoReact Data Grid

Updated on Dec 19, 2025

Environment

Product Version	9.0.0
Product	Progress® KendoReact Grid

Description

In a React Data Grid, I have rows where certain cell values repeat in consecutive rows (e.g., Product and UnitSize). I want to hide these repeating values in the subsequent rows to make the grid cleaner and easier to read. How can I achieve this without altering the data source?

This KB article also answers the following questions:

• How to implement custom cell rendering in React Data Grid?
• How to conditionally display cell content based on the previous row's data?
• How to enhance data readability by hiding duplicate cell values?

Solution

To hide repeating cell values in a React Data Grid, you can utilize a custom cell rendering template. This approach involves rendering the cell content conditionally, based on whether the current cell value differs from the corresponding value in the previous row.

jsx

const CustomCell = (props) => {
    const currentIndex = props.dataIndex;

    const shouldRenderProduct =
        currentIndex != 0
            ? sampleProducts[currentIndex - 1].Product == sampleProducts[currentIndex].Product
                ? false
                : true
            : true;

    return (
        <td {...props.tdProps} colSpan={1}>
            {shouldRenderProduct ? props.children : null}
        </td>
    );
};

You can test this approach here:

Change Theme

Theme

Loading ...

See Also

• Custom Data Cell in Grid
• Grid Component Overview
• React Data Grid - Cell Rendering Example