React Grid Binding Virtual Data

The Ignite UI for React Data Table / Data Grid supports data binding to remote datasources with one line of code. With the React data table’s Virtual Data Source, you simply configure the React grid with your remote URI and which OData Entity you’d like returned, and the React grid does the rest of the work for you.

React Grid Binding Virtual Data Example

In addition to the core and React data grid packages you will also have to install the datasources package.

npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs
npm install --save igniteui-react-datasources

Component Modules

The IgrGrid requires the following modules:

import './odatajs-4.0.0';
import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';
import { ODataVirtualDataSource } from 'igniteui-react-datasources';

IgrDataGridModule.register();

Code Snippet

Now that the React data grid module is imported, the next step is the basic configuration of the React grid that binds to remote data. Create the virtual data source. Assign the url where the data will be retrieved from to the baseUri property. Setting the entitySet property will inform which table to retrieve from the virtual data source.

<IgrDataGrid
    width="100%"
    height="100%"
    defaultColumnMinWidth={120}
    dataSource={this.virtualData}/>

Assign the data source to the grid.

private virtualData: ODataVirtualDataSource;
// ...
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
this.virtualData = vds;

API References

IgrGrid