Column Groups
Columns and be grouped by using headerOptions
In the ColumnOptions interface, the below properties are needed to group columns.
- children
- headerOptions
Below is the list of properties available in the HeaderOptions interface.
export interface HeaderOptions {
columnGroupText?: string;
columnGroupTooltip?: string;
columnGroupLabelFunction?: (column: ColumnOptions) => string;
columnGroupRenderer?: (props: RendererProps) => unknown;
headerRenderer?: (props: RendererProps) => unknown;
headerTooltip?: string;
headerLabelFunction?: (column: ColumnOptions) => string;
}
The documentation for the above properties can be found here
Grouping Headers
For grids that have grouping enabled, the headerOptions can be used to customize the group header as well.
The grouping mechanism works by defining a children property in the column definition. The children property is an array of ColumnOptions. The children property can be nested to create a hierarchy of columns. The below example shows a grid with 4 columns, where the last column is a group header with 4 children columns.
In the above example, the group header is customized using the columnGroupText property.
Custom renderers for group headers
The group header can also be customized using the columnGroupRenderer property. The columnGroupRenderer property can be used to render a custom component in the group header.
The above example shows a custom component being rendered in the group header.
Customizing the group header text
Finally, the columnGroupLabelFunction property can be used to customize the group header text in scenarios where the group header text needs to be customized based on the column definition.
Customizing the header style
Finally, just like all other cells, header cells can be customized using cellStyleFunction and rowStyleFunction. The below example shows a grid with a custom header style.
Dynamically generating column groups
Column Groups can be dynamically generated as well! The below example shows a grid with dynamically generated column groups.
Below is the definition of the createFiscalYearColumnGroup function. You can use this function to dynamically generate column groups for a fiscal year, or customize it to generate column groups for any other type of data.
export const createFiscalYearColumnGroup = (years: number[], options?: Partial<ColumnOptions>, dataFieldPrefix?: string, callback?: (c: ColumnOptions) => ColumnOptions, createQuarters?: boolean, createMonths?: boolean) => {
const colDefaults = options || [];
const prefix = dataFieldPrefix || "";
const yearColumns = years.map((year) => {
const yearColumn = {
...createColumn(`${prefix}${year}`, "currency", `${year}`),
children: [],
...colDefaults,
};
if (createQuarters !== false) {
const quarterColumns = [null, null, null, null]
.map((_, i) => {
const quarterNum = i + 1;
return {
...createColumn(`${prefix}${year}_Q${quarterNum}`, "currency", `Q${quarterNum} ${year}`),
children: [],
...colDefaults,
};
});
yearColumn.children = quarterColumns;
if (createMonths !== false) {
let monthIndex = 0;
quarterColumns.forEach((quarterColumn, quarterNum) => {
const monthColumns = [null, null, null]
.map((_, i) => {
const month = shortMonthNames[monthIndex++];
return {
...createColumn(`${prefix}${year}_${month}`, "currency", `${month} ${year}`),
...colDefaults,
};
});
quarterColumn.children = monthColumns;
});
}
}
return yearColumn;
});
return yearColumns;
};
Please note that the above function is not part of the ReactDataGrid API. It is provided as an example of how you can dynamically generate column groups. The key is to ensure that each column has a unique identifier. If you are dynamically generating column groups, you will need to ensure that the unique identifier is unique for each column. If you do not provide a unique identifier, the grid will not render correctly.