@devexpress/dx-react-grid-material-ui

DevExtreme React Grid Material UI

A template suite used to customize React Grid with the Material UI rendering.

Installation

Install the package and its dependencies:

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

Add the required modules to your project:

import {
  Grid
} from '@devexpress/dx-react-grid';
import {
  TableView
} from '@devexpress/dx-react-grid-material-ui';

export const App = () => (
  <Grid
    rows={[{ id: 0, ... }, ...]}
    columns={[{ name: 'id', ... }, ...]}>
    <TableView />
  </Grid>
);

Make sure that Material UI dependenices are installed and configured. If you have not yet configured Material UI for your project, check the following link.

Getting started

This package provides templates implementing Material UI rendering for the React Grid UI plugins and the UI Plugins with injected templates as well. You can use these templates instead of the ones in the original React Grid repository.

See demos for more information.

Reference

The package exposes components and plugins with injected templates.

The list of components:

• Grid

The list of plugins:

• TableView
• TableHeaderRow
• TableSelection
• TableFilterRow
• TableRowDetail
• TableGroupRow
• GroupingPanel
• PagingPanel
• DragDropContext

Each plugin has properties with the 'Template' postfix. Components passed to such properties are templates.

You can override templates by passing your component or rendering function, or return undefined from your custom template if you want to render a UI item with a built-in template.

License

DevExtreme licensing.

Changelog

1.0.0-alpha.3 (2017-06-09)

Bug Fixes

• react-grid: Cancel sorting by using the Ctrl key in Material-UI (#129) (2508537)
• react-grid: Treat templates as functions (#120) (4b2c490)

Code Refactoring

• react-grid: Move layout templates to Grid (#107) (f6be302)

Features

• react-grid: Controlled state featured demo for Material-UI (#130) (2528c67)
• react-grid: Implement ColumnOrderState plugin (#111) (b3284f0)
• react-grid: Implement DragDropContext plugin (#117) (31f6b2d)
• react-grid: Introduce Material-UI templates (#102) (70975a7)
• react-grid: Material-UI detail row (#115) (c161c66)
• react-grid: Material-UI editing (#124) (3d9a00b)
• react-grid: Material-UI featured uncontrolled state demo (#126) (8e1d80b)
• react-grid: Material-UI filtering (#109) (5484942)
• react-grid: Material-UI pager (#108) (99f30b6)
• react-grid: Mobile-friendly pager (#125) (23ec7f0)
• react-grid: Redux integration demo for Material-UI (#132) (9988355)
• react-grid: Remote data featured demo for Material-UI (#131) (41b64b2)
• react-grid: Use column name if its title is not specified (#121) (daef7db)

BREAKING CHANGES

• react-grid: We moved layout templates from the TableView plugin to the Grid component. The Grid component with the predefined plugins is now available in the "@devexpress/dx-react-grid-bootstrap3" package. If you want to define custom layout templates, the Grid component without predefined templates is still available in the "devexpress/dx-react-grid" package.

  The following code:

  import {
    Grid
  } from '@devexpress/dx-react-grid';
  

  should be replaced with:

  import {
    Grid
  } from '@devexpress/dx-react-grid-bootstrap3';
  

<a name="1.0.0-alpha.2"></a>