React Data Grid Overview
The Ignite UI for React Data Table / Data Grid is a tabular React grid 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 tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.
React Data Grid Example
This demo implements some of the features that are available in the Grid: Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries
Getting Started
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 npm install --save igniteui-react-inputs
Required Modules
The IgrDataGrid
requires the following modules:
Optional Modules
The optional IgrDataGrid
features, seen above, requires the following modules:
import { IgrGridColumnOptionsModule } from 'igniteui-react-grids';
import { IgrDataGridToolbarModule } from "igniteui-react-grids";
import { IgrSparklineModule } from 'igniteui-react-charts';
IgrGridColumnOptionsModule.register();
IgrDataGridToolbarModule.register();
IgrSparklineModule.register();
Sample Data Source
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 Antony 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 Antony Gumbo Mix",
QuantityPerUnit: "36 boxes",
ReorderLevel: 0,
UnitPrice: 21.3500,
UnitsInStock: 0
}];
Auto-Generate Columns
The following code demonstrates how to bind the React data grid to the above local data.
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
autoGenerateColumns="true"
defaultColumnMinWidth="100"
summaryScope="Root"
isColumnOptionsEnabled="true"
isGroupCollapsable="true"
groupSummaryDisplayMode="RowBottom"
columnMovingMode="Deferred"
columnMovingAnimationMode="SlideOver"
columnMovingSeparatorWidth="2"
columnShowingAnimationMode="slideFromRightAndFadeIn"
columnHidingAnimationMode="slideToRightAndFadeOut"
selectionMode="SingleRow"
cornerRadiusTopLeft="0"
cornerRadiusTopRight="0"
/>
Manually Define Columns
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
autoGenerateColumns="false">
<IgrNumericColumn field="ProductID" headerText="Product ID"/>
<IgrTextColumn field="ProductName" headerText="Product Name"/>
<IgrTextColumn field="QuantityPerUnit" headerText="Quantity Per Unit"/>
<IgrNumericColumn field="UnitsInStock" headerText="Units In Stock"/>
<IgrDateTimeColumn field="OrderDate" headerText="Order Date"/>
</IgrDataGrid>
Styling Columns
The following code demonstrates how to style specific columns using the provided column's properties.
<IgrTextColumn
background="SkyBlue"
textStyle="Italic Bold 16pt Times New Roman"
/>