Web Components Table / Grid

The Ignite UI for Web Components Data Table / Data Grid is a tabular Web Components component that allows you to quickly bind and display your data with little coding or configuration. Features of the Web Components data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The Web Components data table is optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.

Demo

Dependencies

When installing the Web Components grid package, the core package must also be installed.

  • npm install --save igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-grids

Required Modules

The IgcLiveGridComponent requires the following modules:

import { ModuleManager } from 'igniteui-webcomponents-core/ES2015/module-manager';
import { IgcLiveGridModule } from "igniteui-webcomponents-grids/ES2015/igc-live-grid-module";
import { IgcLiveGridComponent } from "igniteui-webcomponents-grids/ES2015/igc-live-grid-component";

ModuleManager.register(
    IgcLiveGridModule
);

Sample Data Source

Now that the Web Components data grid module is imported, next is the basic configuration of the Web Components grid that binds to local data.

    this.data = [{
        Discontinued: false,
        OrderDate: new Date("2012-02-12"),
        ProductID: 1,
        ProductName: "Chai",
        QuantityPerUnit: "10 boxes x 20 bags",
        ReorderLevel: 10,
        UnitPrice: 18.0000,
        UnitsInStock: 39
    }, {
        Discontinued: false,
        OrderDate: new Date("2003-03-17"),
        ProductID: 2,
        ProductName: "Chang",
        QuantityPerUnit: "24 - 12 oz bottles",
        ReorderLevel: 25,
        UnitPrice: 19.0000,
        UnitsInStock: 17
    }, {
        Discontinued: false,
        OrderDate: new Date("2006-03-17"),
        ProductID: 3,
        ProductName: "Aniseed Syrup",
        QuantityPerUnit: "12 - 550 ml bottles",
        ReorderLevel: 25,
        UnitPrice: 10.0000,
        UnitsInStock: 13
    }, {
        Discontinued: false,
        OrderDate: new Date("2016-03-17"),
        ProductID: 4,
        ProductName: "Chef Antons Cajun Seasoning",
        QuantityPerUnit: "48 - 6 oz jars",
        ReorderLevel: 0,
        UnitPrice: 22.0000,
        UnitsInStock: 53
    }, {
        Discontinued: true,
        OrderDate: new Date("2011-11-11"),
        ProductID: 5,
        ProductName: "Chef Antons Gumbo Mix",
        QuantityPerUnit: "36 boxes",
        ReorderLevel: 0,
        UnitPrice: 21.3500,
        UnitsInStock: 0
    }];

Code Snippet

The following code demonstrates how to bind the Web Components data grid to the above local data.

Auto-generated columns:

<igc-live-grid id="grid"
      height="100%"
      width="100%"
      auto-generate-columns="false">
</igc-live-grid>
let grid1 = (document.getElementById("grid") as IgcLiveGridComponent);
grid1.dataSource = data;

Manual definition of columns:

<igc-live-grid id="grid"
    width="100%"
    height="500px"
    auto-generate-columns="false">
        <igc-numeric-column property-path="ProductID" header-text="Product ID"></igc-numeric-column>
        <igc-text-column property-path="ProductName" header-text="Product Name"></igc-text-column>
        <igc-text-column property-path="QuantityPerUnit" header-text="Quantity Per Unit"></igc-text-column>
        <igc-numeric-column property-path="UnitsInStock" header-text="Units In Stock"></igc-numeric-column>
        <igc-date-time-column property-path="OrderDate" header-text="Order Date"></igc-date-time-column>
</igc-live-grid>
let grid1 = (document.getElementById("grid") as IgcLiveGridComponent);
grid1.dataSource = data;

Additional Resources