Web Components Grid Column Hiding

The Ignite UI for Web Components has a built-in column hiding UI, which can be used through the Web Components 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 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 Grid Column Hiding Example

EXAMPLE

DATA

TS

HTML

CSS

export class CustomersDataItem {
    public constructor(init: Partial<CustomersDataItem>) {
        Object.assign(this, init);
    }

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem(
                {
                    ID: `ALFKI`,
                    Company: `Alfreds Futterkiste`,
                    ContactName: `Maria Anders`,
                    ContactTitle: `Sales Representative`,
                    Address: `Obere Str. 57`,
                    City: `Berlin`,
                    Region: `East`,
                    PostalCode: 12209,
                    Country: `Germany`,
                    Phone: `030-0074321`,
                    Fax: `030-0076545`
                }),
                new CustomersDataItem(
                {
                    ID: `ANATR`,
                    Company: `Ana Trujillo Emparedados y helados`,
                    ContactName: `Ana Trujillo`,
                    ContactTitle: `Owner`,
                    Address: `Avda. de la Constitución 2222`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5021,
                    Country: `Mexico`,
                    Phone: `(5) 555-4729`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `ANTON`,
                    Company: `Antonio Moreno Taquería`,
                    ContactName: `Antonio Moreno`,
                    ContactTitle: `Owner`,
                    Address: `Mataderos 2312`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5023,
                    Country: `Mexico`,
                    Phone: `(5) 555-3932`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `AROUT`,
                    Company: `Around the Horn`,
                    ContactName: `Thomas Hardy`,
                    ContactTitle: `Sales Representative`,
                    Address: `120 Hanover Sq.`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 22000,
                    Country: `UK`,
                    Phone: `(171) 555-7788`,
                    Fax: `(171) 555-6750`
                }),
                new CustomersDataItem(
                {
                    ID: `BERGS`,
                    Company: `Berglunds snabbköp`,
                    ContactName: `Christina Berglund`,
                    ContactTitle: `Order Administrator`,
                    Address: `Berguvsvägen 8`,
                    City: `Luleå`,
                    Region: `South`,
                    PostalCode: 17000,
                    Country: `Sweden`,
                    Phone: `0921-12 34 65`,
                    Fax: `0921-12 34 67`
                }),
                new CustomersDataItem(
                {
                    ID: `BLAUS`,
                    Company: `Blauer See Delikatessen`,
                    ContactName: `Hanna Moos`,
                    ContactTitle: `Sales Representative`,
                    Address: `Forsterstr. 57`,
                    City: `Mannheim`,
                    Region: `East`,
                    PostalCode: 68306,
                    Country: `Germany`,
                    Phone: `0621-08460`,
                    Fax: `0621-08924`
                }),
                new CustomersDataItem(
                {
                    ID: `BLONP`,
                    Company: `Blondesddsl père et fils`,
                    ContactName: `Frédérique Citeaux`,
                    ContactTitle: `Marketing Manager`,
                    Address: `24, place Kléber`,
                    City: `Strasbourg`,
                    Region: `East`,
                    PostalCode: 67000,
                    Country: `France`,
                    Phone: `88.60.15.31`,
                    Fax: `88.60.15.32`
                }),
                new CustomersDataItem(
                {
                    ID: `BOLID`,
                    Company: `Bólido Comidas preparadas`,
                    ContactName: `Martín Sommer`,
                    ContactTitle: `Owner`,
                    Address: `C/ Araquil, 67`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28023,
                    Country: `Spain`,
                    Phone: `(91) 555 22 82`,
                    Fax: `(91) 555 91 99`
                }),
                new CustomersDataItem(
                {
                    ID: `BONAP`,
                    Company: `Bon app'`,
                    ContactName: `Laurence Lebihan`,
                    ContactTitle: `Owner`,
                    Address: `12, rue des Bouchers`,
                    City: `Marseille`,
                    Region: `West`,
                    PostalCode: 13008,
                    Country: `France`,
                    Phone: `91.24.45.40`,
                    Fax: `91.24.45.41`
                }),
                new CustomersDataItem(
                {
                    ID: `BOTTM`,
                    Company: `Bottom-Dollar Markets`,
                    ContactName: `Elizabeth Lincoln`,
                    ContactTitle: `Accounting Manager`,
                    Address: `23 Tsawassen Blvd.`,
                    City: `Tsawassen`,
                    Region: `BC`,
                    PostalCode: 28000,
                    Country: `Canada`,
                    Phone: `(604) 555-4729`,
                    Fax: `(604) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `BSBEV`,
                    Company: `B's Beverages`,
                    ContactName: `Victoria Ashworth`,
                    ContactTitle: `Sales Representative`,
                    Address: `Fauntleroy Circus`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 10000,
                    Country: `UK`,
                    Phone: `(171) 555-1212`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CACTU`,
                    Company: `Cactus Comidas para llevar`,
                    ContactName: `Patricio Simpson`,
                    ContactTitle: `Sales Agent`,
                    Address: `Cerrito 333`,
                    City: `Buenos Aires`,
                    Region: `East`,
                    PostalCode: 1010,
                    Country: `Argentina`,
                    Phone: `(1) 135-5555`,
                    Fax: `(1) 135-4892`
                }),
                new CustomersDataItem(
                {
                    ID: `CENTC`,
                    Company: `Centro comercial Moctezuma`,
                    ContactName: `Francisco Chang`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Sierras de Granada 9993`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5022,
                    Country: `Mexico`,
                    Phone: `(5) 555-3392`,
                    Fax: `(5) 555-7293`
                }),
                new CustomersDataItem(
                {
                    ID: `CHOPS`,
                    Company: `Chop-suey Chinese`,
                    ContactName: `Yang Wang`,
                    ContactTitle: `Owner`,
                    Address: `Hauptstr. 29`,
                    City: `Bern`,
                    Region: `East`,
                    PostalCode: 3012,
                    Country: `Switzerland`,
                    Phone: `0452-076545`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `COMMI`,
                    Company: `Comércio Mineiro`,
                    ContactName: `Pedro Afonso`,
                    ContactTitle: `Sales Associate`,
                    Address: `Av. dos Lusíadas, 23`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 34000,
                    Country: `Brazil`,
                    Phone: `(11) 555-7647`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CONSH`,
                    Company: `Consolidated Holdings`,
                    ContactName: `Elizabeth Brown`,
                    ContactTitle: `Sales Representative`,
                    Address: `Berkeley Gardens 12 Brewery`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 27000,
                    Country: `UK`,
                    Phone: `(171) 555-2282`,
                    Fax: `(171) 555-9199`
                }),
                new CustomersDataItem(
                {
                    ID: `DRACD`,
                    Company: `Drachenblut Delikatessen`,
                    ContactName: `Sven Ottlieb`,
                    ContactTitle: `Order Administrator`,
                    Address: `Walserweg 21`,
                    City: `Aachen`,
                    Region: `South`,
                    PostalCode: 52066,
                    Country: `Germany`,
                    Phone: `0241-039123`,
                    Fax: `0241-059428`
                }),
                new CustomersDataItem(
                {
                    ID: `DUMON`,
                    Company: `Du monde entier`,
                    ContactName: `Janine Labrune`,
                    ContactTitle: `Owner`,
                    Address: `67, rue des Cinquante Otages`,
                    City: `Nantes`,
                    Region: `East`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.67.88.88`,
                    Fax: `40.67.89.89`
                }),
                new CustomersDataItem(
                {
                    ID: `EASTC`,
                    Company: `Eastern Connection`,
                    ContactName: `Ann Devon`,
                    ContactTitle: `Sales Agent`,
                    Address: `35 King George`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 41000,
                    Country: `UK`,
                    Phone: `(171) 555-0297`,
                    Fax: `(171) 555-3373`
                }),
                new CustomersDataItem(
                {
                    ID: `ERNSH`,
                    Company: `Ernst Handel`,
                    ContactName: `Roland Mendel`,
                    ContactTitle: `Sales Manager`,
                    Address: `Kirchgasse 6`,
                    City: `Graz`,
                    Region: `South`,
                    PostalCode: 8010,
                    Country: `Austria`,
                    Phone: `7675-3425`,
                    Fax: `7675-3426`
                }),
                new CustomersDataItem(
                {
                    ID: `FAMIA`,
                    Company: `Familia Arquibaldo`,
                    ContactName: `Aria Cruz`,
                    ContactTitle: `Marketing Assistant`,
                    Address: `Rua Orós, 92`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 27000,
                    Country: `Brazil`,
                    Phone: `(11) 555-9857`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `FISSA`,
                    Company: `FISSA Fabrica Inter. Salchichas S.A.`,
                    ContactName: `Diego Roel`,
                    ContactTitle: `Accounting Manager`,
                    Address: `C/ Moralzarzal, 86`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28034,
                    Country: `Spain`,
                    Phone: `(91) 555 94 44`,
                    Fax: `(91) 555 55 93`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLIG`,
                    Company: `Folies gourmandes`,
                    ContactName: `Martine Rancé`,
                    ContactTitle: `Assistant Sales Agent`,
                    Address: `184, chaussée de Tournai`,
                    City: `Lille`,
                    Region: `South`,
                    PostalCode: 59000,
                    Country: `France`,
                    Phone: `20.16.10.16`,
                    Fax: `20.16.10.17`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLKO`,
                    Company: `Folk och fä HB`,
                    ContactName: `Maria Larsson`,
                    ContactTitle: `Owner`,
                    Address: `Åkergatan 24`,
                    City: `Bräcke`,
                    Region: `East`,
                    PostalCode: 36000,
                    Country: `Sweden`,
                    Phone: `0695-34 67 21`,
                    Fax: `0695 33-4455`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANK`,
                    Company: `Frankenversand`,
                    ContactName: `Peter Franken`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Berliner Platz 43`,
                    City: `München`,
                    Region: `East`,
                    PostalCode: 80805,
                    Country: `Germany`,
                    Phone: `089-0877310`,
                    Fax: `089-0877451`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANR`,
                    Company: `France restauration`,
                    ContactName: `Carine Schmitt`,
                    ContactTitle: `Marketing Manager`,
                    Address: `54, rue Royale`,
                    City: `Nantes`,
                    Region: `South`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.32.21.21`,
                    Fax: `40.32.21.20`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANS`,
                    Company: `Franchi S.p.A.`,
                    ContactName: `Paolo Accorti`,
                    ContactTitle: `Sales Representative`,
                    Address: `Via Monte Bianco 34`,
                    City: `Torino`,
                    Region: `East`,
                    PostalCode: 10100,
                    Country: `Italy`,
                    Phone: `011-4988260`,
                    Fax: `011-4988261`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private iD: IgcColumnComponent
    private contactName: IgcColumnComponent
    private contactTitle: IgcColumnComponent
    private city: IgcColumnComponent
    private company: IgcColumnComponent
    private fax: IgcColumnComponent
    private address: IgcColumnComponent
    private postalCode: IgcColumnComponent
    private country: IgcColumnComponent
    private phone: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var iD = this.iD = document.getElementById('ID') as IgcColumnComponent;
        var contactName = this.contactName = document.getElementById('ContactName') as IgcColumnComponent;
        var contactTitle = this.contactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;
        var city = this.city = document.getElementById('City') as IgcColumnComponent;
        var company = this.company = document.getElementById('Company') as IgcColumnComponent;
        var fax = this.fax = document.getElementById('Fax') as IgcColumnComponent;
        var address = this.address = document.getElementById('Address') as IgcColumnComponent;
        var postalCode = this.postalCode = document.getElementById('PostalCode') as IgcColumnComponent;
        var country = this.country = document.getElementById('Country') as IgcColumnComponent;
        var phone = this.phone = document.getElementById('Phone') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.customersData;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        column-width="200px"
        allow-filtering="true"
        column-selection="single">
            <igc-grid-toolbar
            >
                <igc-grid-toolbar-title
                >
                </igc-grid-toolbar-title>
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-hiding
                    >
                    </igc-grid-toolbar-hiding>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            name="ID"
            id="ID"
            field="ID"
            header="ID"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="ContactName"
            id="ContactName"
            field="ContactName"
            header="Name"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="ContactTitle"
            id="ContactTitle"
            field="ContactTitle"
            header="Title"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="City"
            id="City"
            field="City"
            header="City"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Company"
            id="Company"
            field="Company"
            header="Company"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Fax"
            id="Fax"
            field="Fax"
            header="Fax"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Address"
            id="Address"
            field="Address"
            header="Address"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="PostalCode"
            id="PostalCode"
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Country"
            id="Country"
            field="Country"
            header="Country"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Phone"
            id="Phone"
            field="Phone"
            header="Phone"
            data-type="string"
            sortable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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.

Grid Setup

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

<igc-grid id="grid" auto-generate="false" width="100%" height="560px" allow-filtering="true">
    <igc-column field="ID" data-type="String" sortable="true" hidden="true"></igc-column>
    <igc-column field="ContactName" data-type="String" sortable="true" hidden="true"></igc-column>
    <igc-column field="ContactTitle" data-type="String" sortable="true"></igc-column>
    <igc-column field="City" data-type="String" sortable="true"></igc-column>
    <igc-column field="CompanyName" data-type="String" sortable="true"></igc-column>
    <igc-column field="Fax" data-type="String" sortable="true"></igc-column>
    <igc-column field="Address" data-type="String" sortable="true"></igc-column>
    <igc-column field="PostalCode" data-type="String" sortable="true"></igc-column>
    <igc-column field="Country" data-type="String" sortable="true"></igc-column>
    <igc-column field="Phone" data-type="String" sortable="true"></igc-column>
</igc-grid>
html

Toolbar's Column Hiding UI

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

<igc-grid>
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-grid>
html

The IgcGridComponent 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-grid id="grid">
    <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-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-grid>
    <igc-column field="ContactName" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="ContactTitle" data-type="String" sortable="true" disable-hiding="true"></igc-column>
</igc-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-grid class="grid"></igc-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:

.grid  igx-column-actions {
    /* 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

DATA

TS

HTML

CSS

export class CustomersDataItem {
    public constructor(init: Partial<CustomersDataItem>) {
        Object.assign(this, init);
    }

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem(
                {
                    ID: `ALFKI`,
                    Company: `Alfreds Futterkiste`,
                    ContactName: `Maria Anders`,
                    ContactTitle: `Sales Representative`,
                    Address: `Obere Str. 57`,
                    City: `Berlin`,
                    Region: `East`,
                    PostalCode: 12209,
                    Country: `Germany`,
                    Phone: `030-0074321`,
                    Fax: `030-0076545`
                }),
                new CustomersDataItem(
                {
                    ID: `ANATR`,
                    Company: `Ana Trujillo Emparedados y helados`,
                    ContactName: `Ana Trujillo`,
                    ContactTitle: `Owner`,
                    Address: `Avda. de la Constitución 2222`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5021,
                    Country: `Mexico`,
                    Phone: `(5) 555-4729`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `ANTON`,
                    Company: `Antonio Moreno Taquería`,
                    ContactName: `Antonio Moreno`,
                    ContactTitle: `Owner`,
                    Address: `Mataderos 2312`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5023,
                    Country: `Mexico`,
                    Phone: `(5) 555-3932`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `AROUT`,
                    Company: `Around the Horn`,
                    ContactName: `Thomas Hardy`,
                    ContactTitle: `Sales Representative`,
                    Address: `120 Hanover Sq.`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 22000,
                    Country: `UK`,
                    Phone: `(171) 555-7788`,
                    Fax: `(171) 555-6750`
                }),
                new CustomersDataItem(
                {
                    ID: `BERGS`,
                    Company: `Berglunds snabbköp`,
                    ContactName: `Christina Berglund`,
                    ContactTitle: `Order Administrator`,
                    Address: `Berguvsvägen 8`,
                    City: `Luleå`,
                    Region: `South`,
                    PostalCode: 17000,
                    Country: `Sweden`,
                    Phone: `0921-12 34 65`,
                    Fax: `0921-12 34 67`
                }),
                new CustomersDataItem(
                {
                    ID: `BLAUS`,
                    Company: `Blauer See Delikatessen`,
                    ContactName: `Hanna Moos`,
                    ContactTitle: `Sales Representative`,
                    Address: `Forsterstr. 57`,
                    City: `Mannheim`,
                    Region: `East`,
                    PostalCode: 68306,
                    Country: `Germany`,
                    Phone: `0621-08460`,
                    Fax: `0621-08924`
                }),
                new CustomersDataItem(
                {
                    ID: `BLONP`,
                    Company: `Blondesddsl père et fils`,
                    ContactName: `Frédérique Citeaux`,
                    ContactTitle: `Marketing Manager`,
                    Address: `24, place Kléber`,
                    City: `Strasbourg`,
                    Region: `East`,
                    PostalCode: 67000,
                    Country: `France`,
                    Phone: `88.60.15.31`,
                    Fax: `88.60.15.32`
                }),
                new CustomersDataItem(
                {
                    ID: `BOLID`,
                    Company: `Bólido Comidas preparadas`,
                    ContactName: `Martín Sommer`,
                    ContactTitle: `Owner`,
                    Address: `C/ Araquil, 67`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28023,
                    Country: `Spain`,
                    Phone: `(91) 555 22 82`,
                    Fax: `(91) 555 91 99`
                }),
                new CustomersDataItem(
                {
                    ID: `BONAP`,
                    Company: `Bon app'`,
                    ContactName: `Laurence Lebihan`,
                    ContactTitle: `Owner`,
                    Address: `12, rue des Bouchers`,
                    City: `Marseille`,
                    Region: `West`,
                    PostalCode: 13008,
                    Country: `France`,
                    Phone: `91.24.45.40`,
                    Fax: `91.24.45.41`
                }),
                new CustomersDataItem(
                {
                    ID: `BOTTM`,
                    Company: `Bottom-Dollar Markets`,
                    ContactName: `Elizabeth Lincoln`,
                    ContactTitle: `Accounting Manager`,
                    Address: `23 Tsawassen Blvd.`,
                    City: `Tsawassen`,
                    Region: `BC`,
                    PostalCode: 28000,
                    Country: `Canada`,
                    Phone: `(604) 555-4729`,
                    Fax: `(604) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `BSBEV`,
                    Company: `B's Beverages`,
                    ContactName: `Victoria Ashworth`,
                    ContactTitle: `Sales Representative`,
                    Address: `Fauntleroy Circus`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 10000,
                    Country: `UK`,
                    Phone: `(171) 555-1212`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CACTU`,
                    Company: `Cactus Comidas para llevar`,
                    ContactName: `Patricio Simpson`,
                    ContactTitle: `Sales Agent`,
                    Address: `Cerrito 333`,
                    City: `Buenos Aires`,
                    Region: `East`,
                    PostalCode: 1010,
                    Country: `Argentina`,
                    Phone: `(1) 135-5555`,
                    Fax: `(1) 135-4892`
                }),
                new CustomersDataItem(
                {
                    ID: `CENTC`,
                    Company: `Centro comercial Moctezuma`,
                    ContactName: `Francisco Chang`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Sierras de Granada 9993`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5022,
                    Country: `Mexico`,
                    Phone: `(5) 555-3392`,
                    Fax: `(5) 555-7293`
                }),
                new CustomersDataItem(
                {
                    ID: `CHOPS`,
                    Company: `Chop-suey Chinese`,
                    ContactName: `Yang Wang`,
                    ContactTitle: `Owner`,
                    Address: `Hauptstr. 29`,
                    City: `Bern`,
                    Region: `East`,
                    PostalCode: 3012,
                    Country: `Switzerland`,
                    Phone: `0452-076545`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `COMMI`,
                    Company: `Comércio Mineiro`,
                    ContactName: `Pedro Afonso`,
                    ContactTitle: `Sales Associate`,
                    Address: `Av. dos Lusíadas, 23`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 34000,
                    Country: `Brazil`,
                    Phone: `(11) 555-7647`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CONSH`,
                    Company: `Consolidated Holdings`,
                    ContactName: `Elizabeth Brown`,
                    ContactTitle: `Sales Representative`,
                    Address: `Berkeley Gardens 12 Brewery`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 27000,
                    Country: `UK`,
                    Phone: `(171) 555-2282`,
                    Fax: `(171) 555-9199`
                }),
                new CustomersDataItem(
                {
                    ID: `DRACD`,
                    Company: `Drachenblut Delikatessen`,
                    ContactName: `Sven Ottlieb`,
                    ContactTitle: `Order Administrator`,
                    Address: `Walserweg 21`,
                    City: `Aachen`,
                    Region: `South`,
                    PostalCode: 52066,
                    Country: `Germany`,
                    Phone: `0241-039123`,
                    Fax: `0241-059428`
                }),
                new CustomersDataItem(
                {
                    ID: `DUMON`,
                    Company: `Du monde entier`,
                    ContactName: `Janine Labrune`,
                    ContactTitle: `Owner`,
                    Address: `67, rue des Cinquante Otages`,
                    City: `Nantes`,
                    Region: `East`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.67.88.88`,
                    Fax: `40.67.89.89`
                }),
                new CustomersDataItem(
                {
                    ID: `EASTC`,
                    Company: `Eastern Connection`,
                    ContactName: `Ann Devon`,
                    ContactTitle: `Sales Agent`,
                    Address: `35 King George`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 41000,
                    Country: `UK`,
                    Phone: `(171) 555-0297`,
                    Fax: `(171) 555-3373`
                }),
                new CustomersDataItem(
                {
                    ID: `ERNSH`,
                    Company: `Ernst Handel`,
                    ContactName: `Roland Mendel`,
                    ContactTitle: `Sales Manager`,
                    Address: `Kirchgasse 6`,
                    City: `Graz`,
                    Region: `South`,
                    PostalCode: 8010,
                    Country: `Austria`,
                    Phone: `7675-3425`,
                    Fax: `7675-3426`
                }),
                new CustomersDataItem(
                {
                    ID: `FAMIA`,
                    Company: `Familia Arquibaldo`,
                    ContactName: `Aria Cruz`,
                    ContactTitle: `Marketing Assistant`,
                    Address: `Rua Orós, 92`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 27000,
                    Country: `Brazil`,
                    Phone: `(11) 555-9857`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `FISSA`,
                    Company: `FISSA Fabrica Inter. Salchichas S.A.`,
                    ContactName: `Diego Roel`,
                    ContactTitle: `Accounting Manager`,
                    Address: `C/ Moralzarzal, 86`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28034,
                    Country: `Spain`,
                    Phone: `(91) 555 94 44`,
                    Fax: `(91) 555 55 93`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLIG`,
                    Company: `Folies gourmandes`,
                    ContactName: `Martine Rancé`,
                    ContactTitle: `Assistant Sales Agent`,
                    Address: `184, chaussée de Tournai`,
                    City: `Lille`,
                    Region: `South`,
                    PostalCode: 59000,
                    Country: `France`,
                    Phone: `20.16.10.16`,
                    Fax: `20.16.10.17`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLKO`,
                    Company: `Folk och fä HB`,
                    ContactName: `Maria Larsson`,
                    ContactTitle: `Owner`,
                    Address: `Åkergatan 24`,
                    City: `Bräcke`,
                    Region: `East`,
                    PostalCode: 36000,
                    Country: `Sweden`,
                    Phone: `0695-34 67 21`,
                    Fax: `0695 33-4455`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANK`,
                    Company: `Frankenversand`,
                    ContactName: `Peter Franken`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Berliner Platz 43`,
                    City: `München`,
                    Region: `East`,
                    PostalCode: 80805,
                    Country: `Germany`,
                    Phone: `089-0877310`,
                    Fax: `089-0877451`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANR`,
                    Company: `France restauration`,
                    ContactName: `Carine Schmitt`,
                    ContactTitle: `Marketing Manager`,
                    Address: `54, rue Royale`,
                    City: `Nantes`,
                    Region: `South`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.32.21.21`,
                    Fax: `40.32.21.20`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANS`,
                    Company: `Franchi S.p.A.`,
                    ContactName: `Paolo Accorti`,
                    ContactTitle: `Sales Representative`,
                    Address: `Via Monte Bianco 34`,
                    City: `Torino`,
                    Region: `East`,
                    PostalCode: 10100,
                    Country: `Italy`,
                    Phone: `011-4988260`,
                    Fax: `011-4988261`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private iD: IgcColumnComponent
    private contactName: IgcColumnComponent
    private contactTitle: IgcColumnComponent
    private city: IgcColumnComponent
    private company: IgcColumnComponent
    private fax: IgcColumnComponent
    private address: IgcColumnComponent
    private postalCode: IgcColumnComponent
    private country: IgcColumnComponent
    private phone: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var iD = this.iD = document.getElementById('ID') as IgcColumnComponent;
        var contactName = this.contactName = document.getElementById('ContactName') as IgcColumnComponent;
        var contactTitle = this.contactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;
        var city = this.city = document.getElementById('City') as IgcColumnComponent;
        var company = this.company = document.getElementById('Company') as IgcColumnComponent;
        var fax = this.fax = document.getElementById('Fax') as IgcColumnComponent;
        var address = this.address = document.getElementById('Address') as IgcColumnComponent;
        var postalCode = this.postalCode = document.getElementById('PostalCode') as IgcColumnComponent;
        var country = this.country = document.getElementById('Country') as IgcColumnComponent;
        var phone = this.phone = document.getElementById('Phone') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.customersData;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        column-width="200px"
        allow-filtering="true"
        column-selection="single">
            <igc-grid-toolbar
            >
                <igc-grid-toolbar-title
                >
                </igc-grid-toolbar-title>
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-hiding
                    >
                    </igc-grid-toolbar-hiding>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            name="ID"
            id="ID"
            field="ID"
            header="ID"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="ContactName"
            id="ContactName"
            field="ContactName"
            header="Name"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="ContactTitle"
            id="ContactTitle"
            field="ContactTitle"
            header="Title"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="City"
            id="City"
            field="City"
            header="City"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Company"
            id="Company"
            field="Company"
            header="Company"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Fax"
            id="Fax"
            field="Fax"
            header="Fax"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Address"
            id="Address"
            field="Address"
            header="Address"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="PostalCode"
            id="PostalCode"
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Country"
            id="Country"
            field="Country"
            header="Country"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            name="Phone"
            id="Phone"
            field="Phone"
            header="Phone"
            data-type="string"
            sortable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

    .grid igc-grid-toolbar-actions, igx-column-actions {
        --ig-column-actions-background-color: #292826;
        --ig-column-actions-title-color: #ffcd0f;
        --ig-checkbox-tick-color: #292826;
        --ig-checkbox-label-color: #ffcd0f;
        --ig-checkbox-empty-color: #ffcd0f;
        --ig-checkbox-fill-color: #ffcd0f;
        --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;
        --igx-button-foreground: #292826;
        --igx-button-background: #ffcd0f;
        --igx-button-hover-background: #404040;
        --igx-button-hover-foreground: #ffcd0f;
        --igx-button-focus-background: #ffcd0f;
        --igx-button-focus-foreground: black;
        --igx-button-focus-visible-background: #ffcd0f;
        --igx-button-focus-visible-foreground: black;
        --igx-button-disabled-foreground: #ffcd0f;
    }

cssCOPY CODE

Edit in: Codesandbox

API References

In this article we learned how to use the built-in column hiding UI in the IgcGridComponent'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:

• disableHiding

IgcGridToolbar properties:

• showProgress

IgcGridToolbar methods:

• IgcGridToolbarHiding
• IgcGridToolbarActions
• IgcGridToolbarTitle

IgcGridComponent events:

• ColumnVisibilityChanged

Additional Resources

• Virtualization and Performance
• Filtering
• Paging
• Sorting
• Summaries
• Column Pinning
• Column Resizing
• Selection

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub