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

DevExtreme React Grid Material UI

A template suite used to render the React Grid based on Material UI components.

Installation

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

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 Material UI dependencies are installed and properly configured. Check the Material UI's Getting Started article for configuration details.

Getting started

This package provides components and plugins implementing Material UI rendering for the React Grid, which you can use instead of the original React Grid package ones.

See demos for more information.

Reference

The package exposes components and plugins with injected templates.

Components:

• Grid
• ColumnChooser

Plugins:

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

The templates are defined via properties that end with the 'Template' postfix which accept a rendering function. Assign a custom function to the required property to override the default rendering function. The custom function should return undefined if you need to invoke the default behavior under certain conditions.

License

DevExtreme licensing.

Changelog

1.0.0-alpha.12 (2017-10-19)

Bug Fixes

• react-grid: add 'overflow: hidden' for MUI TableCell (#406) (69fd88c), closes #403
• react-grid: allow to use Grid with react@16 (#389) (9f292fe)
• react-grid: correlate sorting order with grouping order (#414) (db3377c), closes #398
• react-grid: optimize table selection rendering (#412) (b0dfae1), closes #397
• react-grid-bootstrap3: fix server side rendering issue with VirtualTable (#420) (207e81b), closes #415

Features

• react-grid: implement column chooser (#366) (74b99c1)

Performance Improvements

• react-core: batch updates on draggable events (#384) (51efef1)

BREAKING CHANGES

• react-grid: The scope parameter of the setColumnSorting action has been removed.

  The GroupingState plugin now has an optional dependency on the SortingState plugin. So, GroupingState should be placed after SortingState.

  Before:

  <GroupingState /* ... */ />
  <SortingState /* ... */ />
  

  After:

  <SortingState /* ... */ />
  <GroupingState /* ... */ />
  

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