@devexpress/dx-react-grid-bootstrap3

DevExtreme React Grid Bootstrap3

A template suite used to render the React Grid based on Bootstrap 3 components.

Installation

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

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, TableHeaderRow
} from '@devexpress/dx-react-grid-bootstrap3';

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

Getting started

This package provides components and plugins implementing Bootstrap 3 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.11 (2017-10-04)

Bug Fixes

• react-core: update TemplatePlacholder on placeholder func change (#370) (69659c8)
• react-grid: add 'pointer' cursor on group icon in the HeaderCell (#369) (8d1de4a)

Code Refactoring

• react-grid: change custom filtering function signature (#354) (67cfdc9)
• react-grid: rename getCellData to getCellValue (#349) (8f8e41d)

Features

• react-grid: add custom grouping functions to LocalGrouping (#376) (2c31af1)
• react-grid: add the functionality to define a custom sorting algorithm (#371) (4ac8ab8)
• react-grid: support column data types (#336) (1528800)

Performance Improvements

• react-grid: optimize internal state calculation (#356) (be890b4)
• react-grid: suppress redundant render (#355) (695aacd)

BREAKING CHANGES

• react-grid: The filterFn property of the LocalFiltering has been renamed to getColumnPredicate. The argument list has been changed from filterFn(row: Row, filter: Filter) => boolean to getColumnPredicate(columnName: string) => Function. The returning function has the following signature (value: any, filter, row: Row) => boolean.
• react-grid: The getCellData property of the TableView plugin and the getCellData field of the Column interface have been renamed to getCellValue.

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