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
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"allow-filtering="true"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-hidingtitle="Column Hiding"></igc-grid-toolbar-hiding></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="Artist"header="Artist"data-type="string"sortable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"hidden="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"hidden="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
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.
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:
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:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"id="hierarchicalGrid"name="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"allow-filtering="true"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-hidingtitle="Column Hiding"></igc-grid-toolbar-hiding></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="Artist"header="Artist"data-type="string"sortable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"></igc-column><igc-columnfield="Title"header="Title"data-type="string"></igc-column><igc-columnfield="Released"header="Released"data-type="date"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"></igc-column><igc-columnfield="Location"header="Location"data-type="string"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
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: