React Grid Multi-Column Headers Overview
The Ignite UI for React Multi-Column Headers feature in React Grid allows you to group columns by placing them under a common multi-header. Each multi-column headers group in the IgrGrid
could be a representation of combinations between other groups or columns. This feature is particularly useful when dealing with large datasets where scrolling horizontally might be cumbersome.
React Grid Multi-Column Headers Example
The declaration of multi-column headers is achieved by wrapping a set of columns into an IgrColumnGroup
component with IgrHeader
title information passed.
<IgrGrid allowFiltering="true">
<IgrColumnGroup header="Contact Information">
<IgrColumn sortable="true" resizable="true" field="Phone"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="Fax"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="PostalCode"></IgrColumn>
</IgrColumnGroup>
</IgrGrid>
For achieving n-th
level of nested headers, the declaration above should be followed. So by nesting IgrColumnGroup
leads to the desired result.
<IgrGrid height="600px" allowFiltering="true">
<IgrColumnGroup header="General Information">
<IgrColumn movable="true" sortable="true" resizable="true" field="CompanyName"></IgrColumn>
<IgrColumnGroup movable="true" header="Person Details">
<IgrColumn movable="true" pinned="false" sortable="true" resizable="true" field="ContactName"></IgrColumn>
<IgrColumn movable="true" sortable="true" resizable="true" field="ContactTitle"></IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
</IgrGrid>
Every IgrColumnGroup
supports moving, pinning and hiding.
[!Note] When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the samegroup
.
Whencolumns/column-groups
are not wrapped by currentgroup
which means they are top levelcolumns
, moving is allowed between whole visible columns.
<IgrGrid height="600px" allowFiltering="true">
<IgrColumnGroup movable="true" pinned="true" header="General Information">
<IgrColumn movable="true" sortable="true" resizable="true" field="CompanyName"></IgrColumn>
</IgrColumnGroup>
<IgrColumn sortable="true" resizable="true" field="Phone"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="Fax"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="PostalCode"></IgrColumn>
</IgrGrid>
Multi-Column Header Template
<IgrColumnGroup header="Contact Information" headerTemplate={groupHeaderTemplate}></IgrColumnGroup>
function groupHeaderTemplate(e: { dataContext: IgrColumnTemplateContext }) {
const column = e.dataContext.column as IgrColumnGroup;
return (
<div>
<span style={{ float: "left" }}>{column.header.toUpperCase()}</span>
</div>
);
}
[!Note] If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!
function columnHeaderTemplate(e: { dataContext: IgrColumnTemplateContext }) {
const column = e.dataContext.column as IgrColumnGroup;
return (
<span onClick={onClick}>
<IgrIcon data-draggable="false"></IgrIcon>
</span>
);
}
The following sample demonstrates how to implement collapsible column groups using header templates.
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:
<IgrGrid className="grid"></IgrGrid>
Then set the related CSS properties to this class:
.grid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
Demo
API References
Additional Resources
- Grid Overview
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Resizing
- Selection
- Group by
Our community is active and always welcoming to new ideas.