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.
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:
Below shows an example using column spanning. The example doesn't make much sense, it just arbitrarily sets column span on some cells for demonstration purposes, however we thought it easier to show column spanning with the familiar Olympic winners data before going a bit deeper into its usages. The following can be noted:
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:
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 background colours.Column Spanning breaks out of the row / cell calculations that a lot of features in the grid are based on. If using Column Spanning, be aware of the following: