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

DevExtreme React Grid Material UI

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

Installation

Install the main dx-react-grid package with its Material UI dependencies and templates:

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

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 the Material UI dependenices are installed and configured. Check the following link if you have not configured the Material UI yet.

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 original React Grid repository ones.

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 to render a UI item with a built-in template.

License

DevExtreme licensing.

Changelog

1.0.0-alpha.5 (2017-07-07)

Bug Fixes

• react-grid: add grid bottom offset in Material-UI (#180) (48f12a2)
• react-grid: add group icon offset in Material-UI (#171) (43d9da1)
• react-grid: limit filterCellTemplate arguments (#163) (2a4f003)
• react-grid: reset a column filter when clearing the filter editor value (#184) (83b321c), closes #136
• react-grid: use MUI Chips for group panel items rendering (#168) (45ceb12)

Code Refactoring

• react-grid: extract GroupPanelLayout (#149) (ed73aa1)

Features

• react-grid: introduce column reordering animation (#169) (d5e808b)
• react-grid: introduce Material-UI templates (closes #93)

BREAKING CHANGES

• react-grid: Use the groupPanelCellTemplate property of the grouping-panel plugin instead of the GroupPanelProps interface's cellTemplate property to specify a template used to render a grouping panel cell. The GroupPanelProps interface's cellTemplate property is no longer available.

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