Angular Grid Multi-column Headers Overview
IgxGrid
supports multi-column headers
which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid.
Angular Grid Multi-column Headers Overview Example
The declaration of Multi-column header
could be achieved by wrapping a set of columns into igx-column-group
component with header
title passed.
<igx-grid [data]="data" [allowFiltering]="true">
<igx-column-group header="Contact Information">
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-column-group>
</igx-grid>
For achieving n-th
level of nested headers, the declaration above should be followed. So by nesting igx-column-group
leads to the desired result.
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
<igx-column-group header="Person Details">
<igx-column [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
<igx-column sortable="true" resizable="true" field="ContactTitle"></igx-column>
</igx-column-group>
</igx-column-group>
</igx-grid>
Every igx-column-group
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.
Please note that when using Pinning with Multi-Column Headers, the entire Group gets pinned.
Moving between columns
and column groups
is allowed only when they are at the same level in the hierarchy and both are in the same group
.
When columns/column-groups
are not wrapped by current group
which means they are top level columns
, moving is allowed between whole visible columns.
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group [pinned]="true" header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
</igx-column-group>
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-grid>
Multi-column Header Template
Each of the column groups of the grid can be templated separately. The column group expects ng-template
tag decorated with the igxHeader
directive.
The ng-template
is provided with the column group object as a context.
...
<igx-column-group header="General Information">
<ng-template igxHeader let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
</igx-column-group>
...
If you want to re-use a single template for several column groups, you could set the headerTemplate
property of the column group like this:
<ng-template #columnGroupHeaderTemplate let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
...
Note
If a column header is retemplated and the grid moving is enabled, you have to set the draggable attribute of corresponding column to false on the templated elements, so that you can handle any of the events that are applied!
<ng-template igxHeader>
<igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
The following sample demonstrates how to implement collapsible column groups using header templates.
Styling
To get started with styling the sorting behavior, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the grid-theme
and accepts the $header-background
, $header-text-color
, $header-border-width
, $header-border-style
and $header-border-color
parameters.
$custom-theme: grid-theme(
$header-background: #e0f3ff,
$header-text-color: #e41c77,
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: rgba(0, 0, 0, 0.08)
);
The last step is to include the component mixins:
@include grid($custom-theme);
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
:
:host {
::ng-deep {
@include grid($custom-theme);
}
}
Defining a color palette
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette
and igx-color
functions.
igx-palette
generates a color palette based on the primary and secondary colors that are passed:
$light-blue-color: #e0f3ff;
$deep-pink-color: #e41c77;
$custom-palette: palette($primary: $light-blue-color, $deep-pink-color);
And then with igx-color
we can easily retrieve color from the palette.
$custom-theme: grid-theme(
$header-background: color($custom-palette, "primary", 500),
$header-text-color: color($custom-palette, "secondary", 500),
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: color($custom-palette, "grays", 200)
);
Note
The igx-color
and igx-palette
are powerful functions for generating and retrieving colors. Please refer to Palettes
topic for detailed guidance on how to use them.
Using Schemas
Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component, in this case - _light-grid
:
// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
(
header-background: (igx-color:('primary', 500)),
header-text-color: (igx-color:('secondary', 500)),
header-border-width: 1px,
header-border-style: solid,
header-border-color: (igx-color:('grays', 200))
)
);
In order to apply our custom schema we have to extend one of the globals (light
or dark
), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
Extending the global light-schema
$my-custom-schema: extend($light-schema,
(
igx-grid: $custom-grid-schema
)
);
// Defining our custom theme with the custom schema
$custom-theme: grid-theme(
$palette: $custom-palette,
$schema: $my-custom-schema
);
Don't forget to include the themes in the same way as it was demonstrated above.
Demo
Note
The sample will not be affected by the selected global theme from Change Theme
.
Known Issues and Limitations
Using Grid with multi-column headers on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application.
import 'core-js/es7/array';
API References
Additional Resources
- Grid overview
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Resizing
- Selection
- Group by