React
Demos
Support
Forum
Download
Search results

Getting started with React DataManager component

Dependencies

Below is the list of minimum dependencies required to use the DataManager.

|-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-base
    |-- es6-promise (Required when window.Promise is not available)

@syncfusion/ej2-data requires the presence of a Promise feature in global environment. In the browser, window.Promise must be available.

Installation and configuration

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
npm install
  • Install Syncfusion packages using below command.
npm install @syncfusion/ej2-data --save

Connection to a data source

The DataManager can act as gateway for both local and remote data source which will uses the query to interact with the data source.

Binding to JSON data

DataManager can be bound to local data source by assigning the array of JavaScript objects to the json property or simply passing them to the constructor while instantiating.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

function DataTable() {
    let result: Object[] = new DataManager(data).executeLocal(new Query().take(8));

    let items: Object[] = result.map((data: Object) => (<Row item={data}></Row>));

    return (<table id='datatable' class='e-table'>
            <thead>
             <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
            </thead>
            <tbody>{items}</tbody>
           </table>)
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Binding to OData

DataManager can be bound to remote data source by assigning service end point URL to the url property. Now all DataManager operations will address the provided service end point.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: e.result.map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Filter

The data filtering is a trivial operation which will let us to get reduced view of data based on filter criteria. The filter expression can be built easily using where method of Query class.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

function DataTable() {
    let result: Object[] = new DataManager(data).executeLocal(new Query().where('EmployeeID', 'equal', 3));

    let items: Object[] = result.map((data: Object) => <Row item={data}></Row>);

    return (<table id='datatable' class='e-table'>
            <thead>
                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
            </thead>
            <tbody>{items}</tbody>
           </table>)
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Sort

The data can be ordered either in ascending or descending using sortBy method of Query class.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

function DataTable() {
    let result: Object[] = new DataManager(data).executeLocal(new Query().sortBy('CustomerID').take(8));

    let items: Object[] = result.map((data: Object) => <Row item={data}></Row>);

    return (<table id='datatable' class='e-table'>
            <thead>
                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
            </thead>
            <tbody>{items}</tbody>
           </table>)
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Page

The page method of the Query class is used to get range of data based on the page number and the total page size.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

function DataTable() {
    let result: Object[] = new DataManager(data).executeLocal(new Query().page(1, 8));

    let items: Object[] = result.map((data: Object) => <Row item={data}></Row>);

    return (<table id='datatable' class='e-table'>
            <thead>
                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
            </thead>
            <tbody>{items}</tbody>
           </table>)
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Component binding

DataManager component can be used with Syncfusion components which supports data binding.

Local data binding

A DataSource can be created in-line with other Syncfusion component configuration settings.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query } from '@syncfusion/ej2-data';
import { GridComponent, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{
    public data: DataManager = new DataManager(data);
    render(){
        return <GridComponent  dataSource={this.data}>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                 <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
               </ColumnsDirective>
              </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Remote data binding

To bind remote data to Syncfusion component, you can assign a service data as an instance of DataManager to the dataSource property.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query } from '@syncfusion/ej2-data';
import { GridComponent, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-grids';

const SERVICE_URI = 'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=20';

class App extends React.Component<{}, {}>{
    public data: DataManager = new DataManager({ url: SERVICE_URI });
    render(){
        return <GridComponent  dataSource={this.data}>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                 <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
               </ColumnsDirective>
              </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));
Previous
Next