@devexpress/dx-react-grid-bootstrap4

DevExtreme React Grid Bootstrap4

A template suite used to render the React Grid's UI elements based on Bootstrap 4 components.

Installation

Install the main dx-react-grid package with its dependencies and Bootstrap 4 templates using the following command:

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

Add the DevExtreme React Grid styles in one of the following ways:

• In the index.html file

  <link rel="stylesheet" type="text/css" href="node_modules/@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css" />
  

• In the root .js file.

  import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';
  

The DevExtreme React Grid also requires adding the OpenIconic icons to your project.

Add the required modules to your project:

import {
  Grid, Table, TableHeaderRow
} from '@devexpress/dx-react-grid-bootstrap4';

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' },
    ]}>
    <Table />
    <TableHeaderRow />
  </Grid>
);

Make sure that reactstrap dependencies are installed and properly configured. Check the reactstrap's Getting Started article for configuration details.

Getting started

The dx-react-grid-bootstrap4 package provides components and plugins that implement Bootstrap 4 rendering for the React Grid. You can use them instead of the ones the React Grid package provides.

See demos for more information.

Reference

The package exposes components and plugins with injected template components.

Components:

• Grid - the Grid component

Plugins:

• DragDropProvider - implements the drag-and-drop functionality and visualizes columns that are being dragged
• GroupingPanel - renders the Grouping Panel in the Grid’s header
• ColumnChooser - allows a user to show and hide grid columns at runtime
• PagingPanel - renders the paging panel
• Table - renders Grid data as a table
• TableColumnResizing - manages table column widths
• TableColumnReordering - manages the displayed columns’ order
• TableColumnVisibility - manages Grid columns’ visibility
• TableEditColumn - renders a command column
• TableEditRow - renders a row being edited
• TableFilterRow - renders a filter row
• TableGroupRow - renders group rows and enables them to expand and collapse
• TableHeaderRow - renders the table’s header row
• TableRowDetail - renders detail rows
• TableSelection - visualizes table rows’ selection state by rendering selection checkboxes and highlighting the selected rows
• Toolbar - renders the Grid toolbar
• VirtualTable - renders a scrollable table

License

DevExtreme licensing.