React Data Grid

Column Spanning

react logo

By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns. This feature is similar to 'cell merging' in Excel or 'column spanning' in HTML tables.

Configuring Column Spanning

Column spanning is configured at the column definition level. To have a cell span more than one column, return how many columns to span in the callback colDef.colSpan.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'country',
        // col span is 2 for rows with Russia, but 1 for everything else
        colSpan: params => params.data.country === 'Russia' ? 2 : 1,
    }
]);

<AgGridReact columnDefs={columnDefs} />

The interface for the colSpan callback is as follows: