Column Spanning
By default, each cell will take up the width of one column. You can change this behavior to allow cells to span multiple
columns. This feature is similar to ‘cell merging’ in Excel or ‘column spanning’ in HTML tables.
Note about column spanning
Range selection (An AG Grid Enterprise feature) will not work correctly when spanning cells. This is because it is not
possible to cover all scenarios, as a range is no longer a perfect rectangle.
Configuring Column Spanning
Configure column spanning on column definitions. To have a cell span more than one column, return how many columns to
span in the colSpan property.
columnDefs = [
{
'field': 'country',
# col span is 2 for rows with Russia, but 1 for everything else
'colSpan': {"function": "params.data.country === 'Russia' ? 2 : 1"},
}
]
Below is a basic example of using column spanning. It arbitrarily sets column span on some cells to demonstrate column
spanning features.
In this example:
- The Country column is configured to span 2 columns when ‘Russia’ and 4 columns when ‘United States’. All other
times it is normal (1 column). - 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. For example, 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.
View the CSS classes used for this example
View the CSS classes used for this example
These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.
.spanned-col {
background-color: #119dff;
}
View JavaScript functions used for this example
View JavaScript functions used for this example
These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.colSpanningSimple = function (params) {
const country = params.data.country;
if (country === 'Russia') {
// have all Russia cells in column country of width of 2 columns
return 2;
} else if (country === 'United States') {
// have all United States cells in column country of width of 4 columns
return 4;
} else {
// all other rows should be just normal
return 1;
}
}
Column Spanning Complex Example
Column spanning is typically used for creating reports with AG Grid. Below is something that would be more typical of
the column spanning feature.
In this 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.
View the CSS classes used for this example
View the CSS classes used for this example
These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.
.header-cell {
background-color: #119dff;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.quarters-cell {
background-color: #66c2a5;
font-weight: bold;
}
View JavaScript functions used for this example
View JavaScript functions used for this example
These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
function isHeaderRow(params) {
return params.data.section === 'big-title';
}
function isQuarterRow(params) {
return params.data.section === 'quarters';
}
dagfuncs.janColSpan = function (params) {
if (isHeaderRow(params)) {
return 6;
} else if (isQuarterRow(params)) {
return 3;
} else {
return 1;
}
}
dagfuncs.aprColSpan = function (params) {
if (isQuarterRow(params)) {
return 3;
} else {
return 1;
}
}