JavaScript Data Grid

Column Spanning

javascript 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 gridOptions = {
    columnDefs: [
        {
            field: 'country',
            // col span is 2 for rows with Russia, but 1 for everything else
            colSpan: params => params.data.country === 'Russia' ? 2 : 1,
        }
    ],

    // other grid options ...
}

The interface for the colSpan callback is as follows: