@devexpress/dx-react-grid-bootstrap3
Advanced tools
Bootstrap 3 templates for DevExtreme React Grid component
A template suite used to render the React Grid based on Bootstrap 3 components.
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, Table, 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' },
]}>
<Table />
<TableHeaderRow />
</Grid>
);
Make sure that React-Boostrap dependencies are installed and properly configured. Check the React-Bootstrap's Getting Started article for configuration details.
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.
The package exposes components and plugins with injected template components.
Components:
Plugins:
1.0.0-beta.3 (2017-12-28)
react-grid: We have moved the PagingState plugin's totalCount property to the CustomPaging plugin to improve API consistency. Now, you can add the CustomPaging plugin to a project and specify its totalCount property to implement remote paging.
Before:
<Grid>
<...>
<PagingState totalCount={10} />
</Grid>
After:
<Grid>
<...>
<PagingState />
<CustomPaging totalCount={10} />
</Grid>
react-grid: To simplify working and make consistent API, some plugins properties have been renamed.
allowGroupingByClick property has been renamed to showGroupingControls.allowUngroupingByClick property has been renamed to showGroupingControls.allowedPageSizes property has been renamed to pageSizes .react-grid: A column's getCellValue function has gotten higher priority than that defined in the Grid component.
react-grid: The createRowChange function arguments order has been changed to (row: any, value: any, columnName: string) to improve the API consistency. Now, the EditingState plugin's createRowChange function has the same signature as the column extension's one.
react-grid: We have renamed the following plugins that process data to make the Grid API more consistent:
react-grid: We removed the LocalSorting plugin's getColumnIdentity property to improve API consistency. Now, use the column extension's criteria property to specify an individual column's grouping criteria.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldGroupCriteria = /* custom group criteria */;
const getColumnIdentity = (columnName) => {
if (name === 'field') return fieldGroupCriteria;
};
<Grid columns={columns}>
<LocalGrouping getColumnIdentity={getColumnIdentity} />
</Grid>
After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldGroupCriteria = /* custom group criteria */;
const integratedGroupingColumnExtensions = [
{ columnName: 'field', criteria: fieldGroupCriteria },
];
<Grid columns={columns}>
<IntegratedGrouping columnExtensions={integratedGroupingColumnExtensions} />
</Grid>
react-grid: We removed the cancel argument from the SortingState plugin's setColumnSorting action and from the onSort event of the TableHeaderCellProps and GroupPanelItemProps component properties. Now, you can pass null to the direction argument to cancel sorting by column.
react-grid: The TableHeaderCellProps interface's allowResizing property has been renamed to resizingEnabled to improve the API consistency.
react-grid: We removed the getColumnCompare property from the LocalSorting plugin to improve API consistency. Now, use the columnExtension property to specify individual column sorting options.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const getColumnCompare = (columnName) => {
if (name === 'field') return fieldCompare;
};
<Grid columns={columns}>
<LocalSorting getColumnCompare={getColumnCompare} />
</Grid>
After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const integratedSortingColumnExtensions = [
{ columnName: 'field', compare: fieldIdentity },
];
<Grid columns={columns}>
<IntegratedSorting columnExtensions={integratedSortingColumnExtensions} />
</Grid>
react-grid: We have integrated the column chooser into the Grid as a plugin to simplify the API. Now, use the column chooser as follows:
<Grid>
{/* ... */}
<TableColumnVisibility
/* props */
/>
<Toolbar />
<ColumnChooser />
</Grid>
For details, see Controlling Column Visibility.
react-grid: We extracted the column's showWhenGrouped property that the TableGroupRow plugin handles to a column extension to improve the API readability.
The TableGroupRow plugin's showColumnsWhenGrouped property type has been changed to boolean and this property affects all columns. If you need to control specific columns' visibility, use column extensions.
Before:
const columns = [{ name: 'field', showWhenGrouped: true }, { name: 'field2' }];
<Grid columns={columns}>
<TableGroupRow />
</Grid>
After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const tableGroupColumnExtensions = [
{ columnName: 'field', showWhenGrouped: true },
];
<Grid columns={columns}>
<TableGroupRow columnExtensions={tableGroupColumnExtensions} />
</Grid>
Note that column extension properties have higher priority than corresponding plugin properties.
react-grid: We renamed the DragDropContext plugin to DragDropProvider to improve API consistency.
react-grid: We removed the allowResizing property from the TableHeaderRow plugin to simplify the API. Now, adding the TableColumnResizing plugin enables column resizing.
react-grid: In order to improve API readability, we extracted the width and align column properties that the Table and VirtualTable plugins handle into a separate property. Now, the width and align properties in the Grid columns are no longer supported. Use a TableColumnExtension instead:
Before:
const columns= [{ name: 'field', width: 100 }, { name: 'field2' }];
<Grid columns={columns}>
<Table />
</Grid>
After:
const columns= [{ name: 'field1' }, { name: 'field2' }];
const tableColumnExtensions = [{ columnName: 'field1', width: 100 }];
<Grid columns={columns}>
<Table columnExtensions={tableColumnExtensions} />
</Grid>
react-grid: In order to simplify API, we changed the way the DataTypeProvider plugin detects columns associated with a type. Now, to associate a custom formatter and editor with a column, pass a column array to the DataTypeProvider's for field:
Before:
const columns= [{ name: 'field', dataType: 'boolean' }, { name: 'field2' }];
<Grid columns={columns}>
<DataTypeProvider type="boolean" />
</Grid>
After:
const columns= [{ name: 'field1' }, { name: 'field2' }];
const booleanColumns = ['field1'];
<Grid columns={columns}>
<DataTypeProvider for={booleanColumns} />
</Grid>
react-grid: In order to improve API consistency, we've decided to replace the getColumnPredicate function in the LocalFiltering plugin with the LocalFilteringColumnExtension.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldPredicate = /* custom filtering predicate */;
const getColumnPredicate = (columnName) => {
if (name === 'field') return fieldPredicate;
};
<Grid columns={columns}>
<LocalFiltering getColumnPredicate={getColumnPredicate} />
</Grid>
After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldPredicate = /* custom filtering predicate */;
const integratedFilteringColumnExtensions = [
{ columnName: 'field', predicate: fieldPredicate },
];
<Grid columns={columns}>
<IntegratedFiltering columnExtensions={integratedFilteringColumnExtensions} />
</Grid>
react-grid: In order to simplify API, we've decided to remove allowDragging properties in TableHeaderRow and GroupingPanel plugins. Now, to enable dragging it is enough to add the DragDropContext plugin.
react-grid: To provide a more convenient and flexible way to render elements that are placed within a Grid header we add the Toolbar plugin. For this reason, the GroupingPanel plugin has the Toolbar dependency:
import {
// ...
Toolbar,
GroupingPanel
} from '@devexpress/dx-react-grid-material-ui';
<Grid>
{/* ... */}
<Toolbar />
<GroupingPanel />
</Grid>
To simplify Grid's markup we removed header placeholder and footer placeholder components.
If you're customizing Grid appearance using the headerPlaceholderComponent and footerPlaceholderComponent properties, your code should be updated as follows:
Before:
<Grid
headerPlaceholderTemplate={() => (<div />)}
footerPlaceholderTemplate={() => (<div />)}
>
{/* ... */}
</Grid>
After:
import { Template, TemplatePlaceholder } from '@devexpress/dx-react-core';
<Grid>
<Template name="header">
<TemplatePlaceholder />
{/* Custom markup */}
</Template>
<Template name="footer">
<TemplatePlaceholder />
{/* Custom markup */}
</Template>
{/* ... */}
</Grid>
react-grid: We extracted the column's createRowChange property that the EditingState plugin handles to a column extension to improve API readability.
Before:
const columns = [{ name: 'field', createRowChange: (row, value) => { /* logic */ } }, { name: 'field2' }];
<Grid columns={columns}>
<EditingState />
</Grid>
After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const editingColumnExtensions = [
{ columnName: 'field', createRowChange: (row, value) => { /* logic */ } },
];
<Grid columns={columns}>
<EditingState columnExtensions={editingColumnExtensions} />
</Grid>
Note that column extension properties have higher priority than corresponding plugin properties.
<a name="1.0.0-beta.2"></a>
FAQs
Bootstrap 3 templates for DevExtreme React Grid component
The npm package @devexpress/dx-react-grid-bootstrap3 receives a total of 261 weekly downloads. As such, @devexpress/dx-react-grid-bootstrap3 popularity was classified as not popular.
We found that @devexpress/dx-react-grid-bootstrap3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.