@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

Plugins:

• TableView
• TableHeaderRow
• TableSelection
• TableFilterRow
• TableRowDetail
• TableGroupRow
• 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.8 (2017-08-21)

Bug Fixes

• react-grid: correct pager rendering within an empty grid (#251) (eb13a8b)
• react-grid: get rid of the exception thrown on a column ungrouping by drag and drop (#260) (8fc2990)
• react-grid: preserve group panel height when no grouping is specified (#261) (9116e92)

Code Refactoring

• react-grid: change TableRow and TableColumn interfaces structure (#227) (5288a9f)
• react-grid: merge the setRowSelection and setRowsSelection actions (#233) (876a2c6)
• react-grid: remove redundant getters from GroupingState (#244) (1fb21ca)
• react-grid: rename colspan to colSpan (#248) (afc69e9)
• react-grid: wrap group panel column data (#267) (156392b)

Features

• react-core: rework Getter (#259) (4fd5f9b)
• react-grid: adopt PluginContainer dependencies in Grid plugins (#249) (016f618)
• react-grid: provide the custom data accessors capability (#264) (5f699bf), closes #176

Performance Improvements

• react-grid: optimize plugin dependencies check (#253) (640c124)

BREAKING CHANGES

• react-grid: The following changes have been made in the GroupingPanel plugin:

  • the groupPanelCellTemplate property has been renamed to groupPanelItemTemplate;
  • the groupedColumns property has been renamed to groupingPanelItems and now contains an array of objects which conform the GroupingPanelItem interface.

  The isDraft property of the DraftGrouping interface has been renamed to draft.

• react-grid:   In order to reduce API verbosity, the groupedColumns and draftGroupedColumns getters are no longer exported from the GroupingState plugin.   The column field is no longer present in the GroupRow interface. So, to access the column field in groupCellTemplate and groupIndentCellTemplate of the TableGroupRow plugin, it is necessary to use args.column instead of args.row.column.

• react-grid: The colspan field passed to tableNoDataCellTemplate (the TableView plugin), detailCellTemplate (the TableRowDetail plugin) and groupCellTemplate (the TableGroupRow plugin) has been renamed to colSpan.

• react-grid: To simplify the Grid plugins API the setRowSelection action was removed from the SelectionState and TableSelection plugins.

  For now, to select a single row you can use the setRowsSelection action in the following manner:

  setRowsSelection({ rowIds: [/* rowId */] })
  

• react-grid:   TableRow and TableColumn interfaces structure has been changed. Now, it wraps original rows and columns of the Grid component instead of patching it.

  Before:

  interface TableRow extends Row {
    type?: string;
  }
  interface TableColumn extends Column {
    type?: string;
  }
  

  After:

  interface TableRow {
    key: string;
    type: string;
    rowId?: number | string;
    row?: Row;
    height?: number;
  }
  interface TableColumn {
    key: string;
    type: string;
    column?: Column;
    width?: number;
  }
  

  The CommandHeadingCellArgs interface related to the TableEditColumn plugin no longer has column and row fields.

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