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
The interface for the colSpan callback is as follows:
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 the columns.
The dataset has meta-data inside it, the
data.sectionattribute. This meta-data, provided by the application, is used in the grid configuration in order to set the column spans and the background colors.
Column Spanning Constraints
Column Spanning breaks out of the row / cell calculations that a lot of features in the grid is based on. If using Column Spanning, be aware of the following:
- Range Selection will not work correctly when spanning cells. This is because it is not possible to cover all scenarios, a range is no longer a perfect rectangle.