Package Exports
- @devexpress/dx-react-grid
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devexpress/dx-react-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
DevExtreme React Grid
Overview
The DevExtreme React Grid component allows you to display table data with a set of different transformations, such as paging, sorting, filtering, grouping, etc. It also allows row selection and data editing. It has a composable and extensible plugin-based architecture. It supports the controlled and uncontrolled state modes, and can be easily used in either a regular or a Redux-based application. It's provided with the Twitter Bootstrap rendering and theming out-of-the-box.
Installation
Install package:
npm i @devexpress/dx-react-grid --saveThis package does not contain any visual components, so all examples provided below use the DevExtreme React Grid Bootstrap3 package to use Bootstrap rendering for the Grid visual components.
Install the Grid Bootstrap3 components package:
npm i @devexpress/dx-react-grid-bootstrap3 --saveMake sure that Bootstrap styles are linked to the page. If you have not yet configured Bootstrap for your project, check the following link.
Add a Grid to your app:
By default Grid renders nothing. All its functionality is implemented via plugin components that are nested into the root Grid component. So, we should specify at least one plugin that visualizes the data provided for the grid.
To display the data as a simple table, you can use the TableView plugin as follows:
import {
Grid, TableView
} from '@devexpress/dx-react-grid-bootstrap3';
const App = () => (
<Grid
rows={[{ id: 0, ... }, ...]}
columns={[{ name: 'id', ... }, ...]}>
<TableView />
</Grid>
);