React Table / Grid

The Ignite UI for React Data Table / Data Grid is a tabular React component that allows you to quickly bind and display your data with little coding or configuration. Features of the React data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The React 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 React grid package, the core package must also be installed.

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

In order to use the data 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 React data grid module is imported, next is the basic configuration of the React 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 React data 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>