DataManager supports both RESTful JSON data services binding and local JavaScript object array binding.
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. Now the JavaScript object array can be queried and manipulated.
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'));DataManager can be bound to remote data source by assigning service end point URL to the url property. With the
provided url, the DataManager handles all communication with the
data server with help of queries.
When querying data, the DataManager will convert the query object(
Query into server request after calling
executeQuery and waits for the server response(JSON format).
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 as Object[]).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'));The queried data will not be cached locally unless offline mode is enabled.