@devexpress/dx-react-grid

DevExtreme React Grid

Overview

DevExtreme React Grid is a component that displays table data from a local or remote source. It supports paging, sorting, filtering, grouping and other data shaping options, row selection, and data editing. Support for controlled and uncontrolled state modes allows you to use the Grid in a regular or Redux-based application. The DevExtreme Grid component has a composable and extendable plugin-based architecture and is provided with Twitter Bootstrap and Material UI rendering and theming out of the box.

Getting Started

Installation

Install the dx-react-grid package and its dependencies using the following command:

npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid

This package does not contain visual components. In the examples below, visual components are rendered using the Bootstrap 3 package. However, you can use any of the following:

• Bootstrap 3

  npm i --save @devexpress/dx-react-grid-bootstrap3
  

  Make sure that React-Boostrap dependencies are installed and properly configured. Check the React-Bootstrap's Getting Started article for configuration details.

• Material UI

  npm i --save @devexpress/dx-react-grid-material-ui
  

  Make sure that Material UI dependencies are installed and properly configured. Check the Material UI's Getting Started article for configuration details.

Polyfills

React Grid uses the latest web platform standards. Thus, it cannot support older browsers like IE11 and Android 4. Use the ES2015 (ES6) polyfill to support these browsers. We recommend BABEL Polyfill, but you can use an alternative.

Using Grid component

The Grid renders nothing by default. The root Grid component's nested plugin components implement its functionality, and it is necessary to specify at least one plugin that visualizes the grid data.

Use the Table plugin to display the data as a simple table:

import {
  Grid, Table, TableHeaderRow
} from '@devexpress/dx-react-grid-bootstrap3'/* or '@devexpress/dx-react-grid-material-ui' */;

const App = () => (
  <Grid
    rows={[
      { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
      { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
    ]}
    columns={[
      { name: 'id', title: 'ID' },
      { name: 'product', title: 'Product' },
      { name: 'owner', title: 'Owner' },
    ]}>
    <Table />
    <TableHeaderRow />
  </Grid>
);

Try Out The React Grid

Follow the links below to try out the React Grid:

• CodeSandbox for Bootstrap3
• CodeSandbox for Material UI

Documentation

Guides API Reference

License

DevExtreme licensing.

Changelog

1.1.0-beta.1 (2018-02-22)

Bug Fixes

• react-grid: allow adding custom styles to some components (#728) (7580410)
• react-grid: fix reordering after grouping (#744) (4de38d7)
• react-grid-bootstrap3: repair column chooser positioning (#740) (4c4ed15)
• react-grid-material-ui: remove PagingPanel's border-top (#751) (353e486)

Features

• react-grid: add the ability to prevent column filtering (#702) (f3d3f10)
• react-grid: add the ability to prevent column visibility toggling (#705) (2cdfe06)
• react-grid: add the ability to prevent editing by a column (#729) (3c88c4c)
• react-grid: add the ability to sort/group by the particular column (#692) (b5d0e2f)
• react-grid: add TypeScript definitions (#710) (7dfc052)

<a name="1.0.1"></a>