@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 main dx-react-grid package and its templates for Material UI:

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

Note: The packages mentioned above have peer dependencies that should be installed manually. Use the following command to install them.

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

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.4 (2017-06-23)

Bug Fixes

• react-grid: Add a vertical space between grouping buttons (#151) (ec1bd30)
• react-grid: Add an offset for left column in Material-UI (#156) (67d0eda)
• react-grid: Fix incorrect table layout if all columns have fixed width (#160) (b933aea)
• react-grid: Put the dx-react-grid dependencies in order (#148) (fe60801)
• react-grid: Update deps (fixes #134) (#139) (5bf504a)

Code Refactoring

• react-grid: Rename detailToggleTemplate to detailToggleCellTemplate (#146) (bd49b0e)
• react-grid: Rename groupColumnWidth to groupIndentColumnWidth (#145) (e78b55f)
• react-grid: Rename groupRowCellTemplate to groupCellTemplate (#153) (fec0aac)

Features

• react-grid: Ability to show all rows on a page via page size selector (#150) (8af3dde)
• react-grid: Implement column reordering (#128) (1de1c63)
• react-grid: TableView support stub cell rendering if no data for cell is provided (#155) (34dee6c)

BREAKING CHANGES

• react-grid: The following package has become a peer dependency of the @devexpress/dx-react-grid one and has to be installed by your app:

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

• react-grid: The 'groupRowCellTemplate' property of the TableGroupRow plugin has been renamed to 'groupCellTemplate'

• react-grid: We renamed the detailToggleTemplate property of the TableRowDetail plugin to detailToggleCellTemplate to make it consistent with the detailToggleCellWidth property.

• react-grid: The groupColumnWidth property of the TableGroupRow plugin has been renamed to groupIndentColumnWidth to avoid possible confusion of what it is responsible for.

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