Angular Hierarchical Grid Column Hiding
The Ignite UI for Angular Hierarchical Grid provides an IgxColumnActionsComponent
with an IgxColumnHidingDirective
which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Hierarchical Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.
Angular Hierarchical Grid Column Hiding Example
Hierarchical Grid Setup
Let's start by creating our Hierarchical Grid and binding it to our data. We will also enable both filtering and sorting for the columns.
<igx-hierarchical-grid class="hgrid" [data]="localdata"
[height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>
<igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column field="Photo">
<ng-template igxCell let-cell="cell">
<div class="cell__inner_2">
<img [src]="cell.value" class="photo" />
</div>
</ng-template>
</igx-column>
<igx-column field="Debut" [sortable]="true" [hidden]="true"></igx-column>
<igx-column field="Grammy Nominations" [sortable]="true" [hidden]="true"></igx-column>
<igx-column field="Grammy Awards" [sortable]="true"></igx-column>
<igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
<igx-column field="Album" [sortable]="true"></igx-column>
<igx-column field="Launch Date" [sortable]="true"></igx-column>
<igx-column field="Billboard Review" [sortable]="true"></igx-column>
<igx-column field="US Billboard 200" [sortable]="true"></igx-column>
<igx-row-island [key]="'Songs'" [autoGenerate]="false">
<igx-column field="No."></igx-column>
<igx-column field="Title"></igx-column>
<igx-column field="Released"></igx-column>
<igx-column field="Genre"></igx-column>
</igx-row-island>
</igx-row-island>
<igx-row-island [key]="'Tours'" [autoGenerate]="false">
<igx-column field="Tour"></igx-column>
<igx-column field="Started on"></igx-column>
<igx-column field="Location"></igx-column>
<igx-column field="Headliner"></igx-column>
</igx-row-island>
</igx-hierarchical-grid>
Toolbar's Column Hiding UI
The built-in Column Hiding UI is placed inside an IgxDropDownComponent
in the Hierarchical Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.
For this purpose all we have to do is set both the IgxGridToolbarActionsComponent
and the IgxGridToolbarHidingComponent
inside of the Hierarchical Grid. We will also add a title to our toolbar by using the IgxGridToolbarTitleComponent
and a custom style for our Hierarchical Grid's wrapper.
<!--columnHiding.component.html-->
<div class="hgrid-sample">
<igx-hierarchical-grid class="hgrid" [data]="localdata">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
...
</igx-hierarchical-grid>
</div>
/* columnHiding.component.css */
.photo {
vertical-align: middle;
max-height: 62px;
}
.cell__inner_2 {
margin: 1px
}
The Hierarchical Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI.
By using the igx-grid-toolbar-hiding
title
property, we will set the title that is displayed inside the dropdown button in the toolbar.
<div class="hgrid-sample">
<igx-hierarchical-grid class="hgrid" [data]="localdata">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
</igx-hierarchical-grid>
</div>
By using the columnsAreaMaxHeight
property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.
// columnHiding.component.ts
public ngAfterViewInit() {
this.hidingActionRef.columnsAreaMaxHeight = "200px";
}
In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's columnsAreaMaxHeight
property. This way we can use it according to our application's requirements.
You can see the result of the code from above at the beginning of this article in the Angular Column Hiding Example section.
Styling
To get started with styling the column actions component, 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';
By using the simplest approach, we create a new theme that extends the column-actions-theme
and accepts the $title-color
and the $background-color
parameters.
$custom-column-actions-theme: column-actions-theme(
$background-color: steelblue,
$title-color: gold
);
As seen, the column-actions-theme
only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme:
$custom-button: button-theme($flat-text-color: gold, $disabled-color: black);
In this example we only changed the text-color of the flat buttons and the button disabled color, but the button-theme
provides way more parameters to control the button style.
The last step is to include the component mixins, each with its respective theme:
@include column-actions($custom-column-actions-theme);
.igx-column-actions {
@include button($custom-button);
}
Note
We scope the igx-button mixin within .igx-column-actions
, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too.
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
:
:host {
::ng-deep {
@include column-actions($custom-column-actions-theme);
.igx-column-actions {
@include button($custom-button);
}
}
}
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:
$yellow-color: gold;
$blue-color: steelblue;
$custom-palette: palette($primary: $blue-color, $secondary: $yellow-color);
And then with igx-color
we can easily retrieve color from the palette.
$custom-column-actions-theme: column-actions-theme(
$palette: $custom-palette,
$title-color: color($custom-palette, "secondary", 400),
$background-color: color($custom-palette, "primary", 200)
);
$custom-button: button-theme(
$palette: $custom-palette,
$flat-text-color: color($custom-palette, "secondary", 400),
$disabled-color: black
);
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.
// Extending the dark column actions schema
$custom-column-actions-schema: extend($_dark-column-actions,
(
title-color:(
color: ("secondary", 400)
),
background-color:(
color: ("primary", 200)
)
)
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
(
flat-text-color:(
color:("secondary", 500)
),
disabled-color:(
color:("primary", 700)
)
)
);
In order to apply our custom schemas 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 dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-column-actions: $custom-column-actions-schema,
igx-button: $custom-button-schema
));
// Defining column-actions-theme with the global dark schema
$custom-column-actions-theme: column-actions-theme(
$palette: $custom-palette,
$schema: $custom-dark-schema
);
// Defining button-theme with the global dark schema
$custom-button: button-theme(
$palette: $custom-palette,
$schema: $custom-dark-schema
);
Don't forget to include the themes in the same way as it was demonstrated above.
Demo
API References
In this article we learned how to use the built-in column hiding UI in the Hierarchical Grid's toolbar.
The column hiding UI has a few more APIs to explore, which are listed below.
Additional components and/or directives with relative APIs that were used:
IgxHierarchicalGridComponent
properties:
IgxColumnComponent
properties:
IgxGridToolbarComponent
properties:
IgxGridToolbarComponent
components:
IgxGridToolbarComponent
methods:
IgxHierarchicalGridComponent
events:
Styles:
Additional Resources
- Hierarchical Grid overview
- Virtualization and Performance
- Filtering
- Paging
- Sorting
- Summaries
- Column Pinning
- Column Resizing
- Selection