Web Components Hierarchical Grid Column Hiding

    The Ignite UI for Web Components has a built-in column hiding UI, which can be used through the Web Components Hierarchical Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The Web Components Hierarchical Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and to eliminate the need for tabbing through redundant fields.

    Web Components Hierarchical Grid Column Hiding Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Hierarchical Grid Setup

    Let's start by creating our IgcHierarchicalGridComponent and binding it to our data. We will also enable both filtering and sorting for the columns.

    <igc-hierarchical-grid auto-generate="false" primary-key="ID" allow-filtering="true" name="hierarchicalGrid1" id="hierarchicalGrid1">
    <igc-column field="Artist" header="Artist" data-type="string" sortable="true"></igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"></igc-column>
    <igc-column field="Debut" header="Debut" data-type="number" hidden="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" sortable="true"> </igc-column>
</igc-hierarchical-grid>
html
    Ignite UI for Web Components | CTA Banner

    Toolbar's Column Hiding UI

    The built-in Column Hiding UI is placed inside an DropDown in the IgcHierarchicalGridComponent'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 IgcGridToolbarActions and the IgcGridToolbarHiding inside of the IgcHierarchicalGridComponent. We will also add a title to our toolbar by using the IgcGridToolbarTitle and a custom style for our Hierarchical Grid's wrapper.

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>
html

    The IgcHierarchicalGridComponent provides us with some useful properties when it comes to using the toolbar's column hiding UI.

    By using the title property, we will set the title that is displayed inside the dropdown button in the toolbar.

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>
html

    You can see the result of the code from above at the beginning of this article in the Web Components Column Hiding Example section.

    Disable hiding of a column

    We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to true.

    <igc-hierarchical-grid>
    <igc-column field="Artist" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyAwards" data-type="String" sortable="true" disable-hiding="true"></igc-column>

    <igc-row-island>
        <igc-column field="Album" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    </igc-row-island>
</igc-hierarchical-grid>
html

    Styling

    The grid could be further customized by setting some of the available CSS variables. In order to achieve that, we will use a class that we will first assign to the grid:

    <igc-hierarchical-grid class="hierarchical-grid"></igc-hierarchical-grid>
html

    Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions, so the rest of the grid is unaffected:

    #hierarchicalGrid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}
css

    Demo

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API References

    In this article we learned how to use the built-in column hiding UI in the IgcHierarchicalGridComponent's toolbar. The column hiding UI has a few more APIs to explore, which are listed below.

    • ColumnActionsComponent

    Additional components with relative APIs that were used:

    IgcColumnComponent properties:

    IgcGridToolbar properties:

    • showProgress

    IgcGridToolbar methods:

    IgcHierarchicalGridComponent events:

    • ColumnVisibilityChanged

    Additional Resources

    Our community is active and always welcoming to new ideas.