Excel Filtering in Web Components Tree Grid
The Web Components Tree Grid exposes an Excel-style filtering feature that provides an Excel-like filtering UI. It simplifies the process of working with large datasets. The main idea is to help them filter the data that is most relevant, while eliminating irrelevant entries.
Web Components Tree Grid Excel Style Filtering Example
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.treeGrid;
sizeEditor.changed = this.webTreeGridSetGridSize;
treeGrid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
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="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
name="SizeEditor"
id="SizeEditor"
label="Grid Size:"
value-type="EnumValue"
drop-down-names="Small, Medium, Large"
drop-down-values="Small, Medium, Large">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-tree-grid
auto-generate="false"
id="treeGrid"
name="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-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.
Usage
To turn on the IgcTreeGridComponent
component's Excel-style filtering, two inputs should be set. The allowFiltering
should be set to true and the filterMode
should be set to ExcelStyleFilter
value.
<igc-tree-grid auto-generate="true" allow-filtering="true" filter-mode="excelStyleFilter" >
</igc-tree-grid>
html
Interactions
In order to open the filter menu for a particular column, the Web Components filter icon in the header should be clicked. Additionally, you can use the Ctrl + Shift + L combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on.
If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press Enter. The filtering applied through the list items creates filter expressions with equals
operator and the logic operator between the expressions is OR
.
If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option Add current selection to filter.
If you want to clear the filter, you can check the Select All option and then click the Apply button.
To apply a filter with different expressions, you can click the Text filter, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.
Configure Menu Features
Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: sortable
, selected
, disablePinning
, disableHiding
.
<igc-tree-grid id="treegrid1" auto-generate="false" height="480px" width="100%" moving="true" allow-filtering="true"
primary-key="ID" foreign-key="ParentID" filter-mode="ExcelStyleFilter">
<igc-column field="ID" header="Product ID" data-type="String">
</igc-column>
<igc-column field="Name" header="Product Name" sortable="true" data-type="'string'">
</igc-column>
<igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="false" disable-pinning="true" disable-hiding="true">
</igc-column>
<igc-column field="AddedDate" header="Added Date" data-type="Date" sortable="false">
</igc-column>
<igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true">
</igc-column>
</igc-tree-grid>
html
In the sample below 'Product Name' and 'Discontinued' columns have all three features enabled, 'Unit Price' have all three disabled, 'Added Date' has only pinning and hiding.
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
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;
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
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-tree-grid
auto-generate="false"
name="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="false"
data-type="number"
disable-pinning="true"
disable-hiding="true">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="false"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
sortable="true"
name="column1"
id="column1">
</igc-column>
</igc-tree-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
Templates
If you want to further customize the Excel style filter menu, you can use the excelStyleHeaderIconTemplate
property to define a custom template for the header icon of the menu.
The following code demonstrates how to customize the Excel style filter menu using the excelStyleHeaderIconTemplate
:
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
}
public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}
ts
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
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;
}
public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
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-tree-grid
auto-generate="false"
name="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-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
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:
<igc-tree-grid class="grid"></igc-tree-grid>
html
Then set the related CSS properties to this class:
.grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-list-item-background: #ffcd0f;
}
css
Demo
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
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;
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
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-tree-grid
auto-generate="false"
name="grid"
id="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-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 {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-button-background: #FFCD0F;
--ig-button-foreground: #292826;
--ig-button-hover-background: #292826;
--ig-button-hover-foreground: #ffcd0f;
--ig-list-background: #FFCD0F;
--ig-list-item-background: #FFCD0F;
--ig-list-item-background-hover: #c2b1b1bd;
--ig-checkbox-empty-color: #292826;
--ig-checkbox-fill-color: #292826;
--ig-checkbox-tick-color: #FFCD0F;
--ig-checkbox-label-color: #292826;
--ig-drop-down-background-color: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-item-background: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-focused-item-background: #c2b1b1bd;
}
css
API References
Additional Resources
Our community is active and always welcoming to new ideas.