Column Spanning

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 set 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.

// col span is 2 for rows with russia, but 1 for everything else colDef = { headerName: "Country", field: "country", colSpan: function(params) { return params.data.country==='Russia' ? 2 : 1; } ... };

The interface for the colSpan callback is as follows:

// function you implement on the column definition function colSpan(params: ColSpanParams) => number; interface ColSpanParams { node: any, // row node in question data: RowNode, // data for the row colDef: ColDef, // the col def for the column column: Column, // the column object in question api: GridApi, // the grid's API columnApi: ColumnApi, // the grids column API context: any // the provided context }

Column Spanning Simple Example

Below shows a simple example using column spanning. The example doesn't make much sense, it just arbitrarily sets column span on some cells for demonstrations purposes, however we though it easier to show column spanning with the familiar olympic winners data before going a bit deeper into it's usages. The following can be noted:

  • The country column is configured to span 2 columns when 'Russia' and 3 columns when 'United States'. All other times it's normal (1 column).
  • To help demonstrate the spanned column, the county column is shaded using CSS styling. This style can be seen a the top of the HTML page.
  • Resizing any columns that are spanned over will also resize the spanned cells. For example, resizing the column immediately to the right of 'Country' will resize all cells spanning over the resized column.
  • The first two columns are pinned. If you drag the country column into the pinned area, you will notice that the spanning is constrained within the pinned section. E.g. if you place country as the last pinned column, no spanning will occur, as the spanning can only happen over cells in the same region, and country now has no further columns inside the pinned region.

Column Spanning Complex Example

Column spanning will typically be used for creating reports with ag-Grid. Below is something that would be more typical of the column spanning feature. The following can be noted from the example:

  • The data is formatted in a certain way, it is not intended for the user to sort this data or reorder teh columns.
  • The dataset has meta-data inside it, the data.section attribute. This meta-data, provided by the application, is used in the grid configuration in order to set the column spans and the backgrond colors.