@devexpress/dx-react-grid-bootstrap3

DevExtreme React Grid Bootstrap3

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

Installation

Install the main dx-react-grid package with its dependencies and templates for Bootstrap 3:

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

Add the required modules to your project:

import {
  Grid, TableView
} from '@devexpress/dx-react-grid-bootstrap3';

export const App = () => (
  <Grid
    rows={[{ id: 0, ... }, ...]}
    columns={[{ name: 'id', ... }, ...]}>
    <TableView />
  </Grid>
);

Make sure that the Bootstrap styles are linked to the page. Check the following link if you have not configured Bootstrap yet.

Getting started

This package provides templates implementing Bootstrap 3 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>