Data grid - Column spanning

Span cells across several columns.

By default, each cell takes up the width of one column. You can modify this behavior with column spanning. It allows cells to span multiple columns. This is very close to the "column spanning" in an HTML <table>.

To change the number of columns a cell should span, use the colSpan property available in GridColDef:

interface GridColDef {
  /**
   * Number of columns a cell should span.
   * @default 1
   */
  colSpan?: number | ((params: GridCellParams<V, R, F>) => number | undefined);
  …
}

Number signature

The number signature sets all cells in the column to span a given number of columns.

interface GridColDef {
  colSpan?: number;
}

<DataGrid
  columns={[
    { field: 'username', colSpan: 2, hideable: false },
    {
      field: 'organization',
      sortable: false,
      filterable: false,
      hideable: false,
    },
    { field: 'age', hideable: false },
  ]}
  rows={rows}
  {...other}
/>
<DataGrid
  columns={[
    { field: 'username', colSpan: 2, hideable: false },
    {
      field: 'organization',
      sortable: false,
      filterable: false,
      hideable: false,
    },
    { field: 'age', hideable: false },
  ]}
  rows={rows}
  {...other}
/>

Press Enter to start editing

Function signature

The function signature allows spanning only specific cells in the column. The function receives GridCellParams as argument.

interface GridColDef {
  colSpan?: (params: GridCellParams<V, R, F>) => number | undefined;
}

Function signature can also be useful to derive colSpan value from row data:

Data grid - Column spanning

Number signature

Function signature

API