Skip to content
+

Data Grid - Row spanning 🧪

Span cells across several rows.

By default, each cell in a Data Grid takes up the height of one row. The row spanning feature makes it possible for a cell to fill multiple rows in a single column.

To enable, pass the rowSpanning prop to the Data Grid. The Data Grid will automatically merge consecutive cells with repeating values in the same column, as shown in the demo below—switch off the toggle button to see the actual rows:

Customizing row-spanning cells

You can customize how row spanning works using two props:

  • colDef.rowSpanValueGetter: Controls which values are used for row spanning
  • colDef.valueGetter: Controls both the row spanning logic and the cell value

This lets you prevent unwanted row spanning when there are repeating values that shouldn't be merged.

In the following example, rowSpanValueGetter is used to avoid merging age cells that don't belong to the same person.

Usage with column spanning

Row spanning can be used in conjunction with column spanning to create cells that span multiple rows and columns simultaneously, as shown in the demo below:

Demo

The demo below recreates the calendar from the column spanning documentation using the row spanning feature:

API