@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, TableView, TableHeaderRow
} from '@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' },
    ]}>
    <TableView />
    <TableHeaderRow />
  </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 components and plugins implementing Material UI rendering for the React Grid, which you can use instead of the ones provided by the original React Grid package.

See demos for more information.

Reference

The package exposes components and plugins with injected templates.

Components:

• Grid

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.6 (2017-07-24)

Bug Fixes

• react-core: prevent scrolling while dragging (#207) (e3e18a9)
• react-grid: clear expanded groups after ungrouping (#202) (d97809e)
• react-grid: remove the totalPages getter from the PagingState plugin (#195) (e231d63)
• react-grid: throw error if the count of title rows exceeds the page size (#193) (8abde20)
• react-grid: turn edit cell input into the controlled mode (#201) (af26c64)
• react-grid-material-ui: pin material-ui version (#197) (34e6ddb)
• fix versions in distrubutives (#208) (7c2f9da)
• react-grid-material-ui: use correct typography for the drag preview (#214) (e1a134d)

Features

• react-grid: implement grouping by drag and drop (#205) (ebb6c61)

Performance Improvements

• react-grid: update only changed rows in table (#199) (e1c64ff)

Reverts

• fix(react-grid): grid bottom offset in Material-UI (#196) (e2392ed)

BREAKING CHANGES

• react-grid: The TableHeaderRow plugin's allowGrouping property has been renamed to allowGroupingByClick.
• react-grid: The totalPages getter is no longer exported from the PagingState and LocalPaging plugins.

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