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
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));
}
}
}
tsimport '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();
ts<!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>
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.
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
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));
}
}
}
tsimport '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();
ts<!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>
html/* 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;
}
css
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:
IgcGridToolbar
properties:
showProgress
IgcGridToolbar
methods:
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.