Live Grid

The Live Grid is a grid component that allows you to quickly bind and display your data with little coding or configuration. Features include filtering, sorting, templates, and movable columns.

Demo

Dependencies

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

npm install igniteui-react-core
npm install igniteui-react-grids

In order to use the grid, you need to register the IgrLiveGridModule in your app during load:

import { IgrLiveGridModule } from "igniteui-react-grids/ES5/igr-live-grid-module";
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";

IgrLiveGridModule.register();

Usage

Now that the grid module is imported, next is the basic configuration of the 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
    }];

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

Autogenerated columns:

<IgrLiveGrid
    height="100%"
    width="100%"
    autoGenerateColumns="true"
    dataSource={this.data}/>

Manual definition of columns:

<IgrLiveGrid
    height="100%"
    width="100%"
    autoGenerateColumns="false"
    dataSource={this.data}>
    <IgrNumericColumn propertyPath="ProductID" headerText="Product ID"/>
    <IgrTextColumn propertyPath="ProductName" headerText="Product Name"/>
    <IgrTextColumn propertyPath="QuantityPerUnit" headerText="Quantity Per Unit"/>
    <IgrNumericColumn propertyPath="UnitsInStock" headerText="Units In Stock"/>
    <IgrDateTimeColumn propertyPath="OrderDate" headerText="Order Date"/>
</IgrLiveGrid>