This project implements a plugin for the DevExtreme React Grid that provides remote data loading functionality.
The backend for the plugin should support the parameter structure documented in the wiki of my devextreme-query-mongodb project. This parameter structure is compatible with the DevExtreme data layer.
The library is available through npm:
npm install dx-react-devextreme-data-server
Import the plugin type:
import { DevExtremeDataServer } from 'dx-react-devextreme-data-server';
Render the plugin as part of the React Grid:
<Grid rows={...} columns={...}>
{
// state plugins go here
}
<DevExtremeDataServer url="//dataserver/baseurl" />
{
// visual plugins follow
}
</Grid>
The plugin supports the following properties:
url
: This defines the base URL for data access. The plugin passes query parameters automatically depending on user interaction with the React Grid.
reloadState
: This property can be bound to a state field that will be changed when a data reload is required.
loadingIndicator
: A function that renders a loading indicator if necessary (see below). The default function shows a Bootstrap compatible indicator.
useLoadingIndicator
: Whether or not to show a loading indicator. Default true
.
loadingIndicatorThreshold
: The number of milliseconds to wait during a loading operation before a loading indicator is shown. Default 500.
A simple example can be found in this JSFiddle.
A complex example can be found in this file of my DevExtreme - Real World Patterns demo project. This shows the use of the reloadState
and loadingIndicator
properties.