@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.2 (2017-12-14)
react-core: To get rid of redundant 'div' elements in markup, we have updated the minimum React version the grid requires to 16.2.0.
react-grid: Some times ago, we created a pull request that allows using our React Grid with the seamless-immutable library. The main change is that we switched from the Array.prototype.slice() function to the Array.from() one to copy arrays. It was not a good decision, because Array.from() is slower than Array.prototype.slice(). Now we return back to Array.prototype.slice() for performance reasons.
If you are using the seamless-immutable library, change your code as follows:
const state = {
data: Immutable({
selection: [],
})
};
<Grid>
{ /* ...*/ }
<SelectionState
// selection: this.state.data.selection -> before
selection: this.state.data.selection.asMutable() // now
/>
</Grid>
The related guide is updated as well.
react-grid-material-ui: To make Grid for Material-UI more flexible we've stopped using the Paper component inside the Grid's layout. It allows placing our Grid to an existing Paper with other components. For example:
<Paper>
<Button>Products</Button>
<Button>Customers</Button>
<Button>Sales</Button>
<Grid
/* ... */
>
{/* ... */}
</Grid>
</Paper>
react-grid: To simplify working with selection features and make the selection plugin's purposes clearer, the functionality that computes the selection state has been moved from the SelectionState plugin to the LocalSelection one:
availableToSelect getter has been deleted from the SelectionState plugin, while the selectAllAvailable, allSelected, and someSelected getters have been added to the LocalSelection plugin.SelectionState plugin's setRowsSelection action has been renamed to toggleSelection.selection getter's return value type has been changed to Set.TableSelection plugin's showSelectAll property has been changed to false.Both plugins are available from the @devexpress/dx-react-grid package.
Note that LocalSelection should be linked after SelectionState if you use the TableSelection plugin.
react-core: To simplify working with plugins, we have got rid of the Watcher. Now, you can use a Getter instead.
Before:
...
<Watcher
watch={
getter = getter('someGetter')
}
onChange={(action, someGetter) => {
action('someAction')(someGetter);
}}
/>
...
After:
...
<Getter
name="someGetter"
computed={(getters, actions) => {
actions.someAction(getters.someGetter);
return getters.someGetter;
}}
/>
...
react-grid: Such plugin names as TableView and VirtualTableView don't correspond to other plugins like TableFilterRow, TableGroupRow, TableSelection, which do not have "view" in their names. To keep the names of plugins consistent, the following changes have been introduced:
TableView plugin has been renamed to Table;VirtualTableView plugin has been renamed to VirtualTable;react-grid: The TableEditRow plugin's editCellTemplate, and editRowTemplate properties have been replaced with cellComponent, and rowComponent ones, which accept components instead of render functions. Find more details here: #496
react-grid: The GroupingPanel plugin's groupPanelTemplate, and groupPanelItemTemplate properties have been replaced with containerComponent, and itemComponent ones, which accept components instead of render functions. Find more details here: #496
containerComponent takes on the children property instead of all arguments passed to the groupPanelTemplate function.
The onSort, and onGroup properties passed to itemComponent are used instead of the changeSortingDirection, and groupByColumn arguments passed to the groupPanelItemTemplate function. The item, and draft properties are no longer available, use the item property instead.
react-grid: The TableEditColumn plugin's commandTemplate, cellTemplate and headingCellTemplate properties have been replaced with commandComponent, cellComponent, and headerCellComponent ones, which accept components instead of render functions. Find more details here: #496
Properties passed to a component returned from commandComponent have the same names as arguments passed to the commandTemplate function with the following exception. The onExecute property is used instead of the executeCommand argument.
All properties passed to the cellComponent except row have been replaced by the children property providing configured commands.
All properties passed to the headingCellComponent have been replaced by the children property providing configured commands.
react-grid: The TableGroupRow plugin's groupIndentColumnWidth property has been renamed to indentColumnWidth. The groupCellTemplate, groupRowTemplate and groupIndentCellTemplate properties have been replaced with cellComponent, rowComponent, and indentCellComponent ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent have the same names as arguments passed to the groupCellTemplate function with the following exceptions:
onToggle property is used instead of the toggleGroupExpanded argument.expanded property is used instead of the isExpanded argument.react-grid: The TableFilterRow plugin's filterCellTemplate and filterRowTemplate properties have been replaced with cellComponent, and rowComponent ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent have the same names as arguments passed to the filterCellTemplate function except for the onFilter property, which is used instead of the setFilter argument.
react-grid: The TableHeaderRow's headerCellTemplate, and headerRowTemplate properties have been replaced with cellComponent, and rowComponent, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent have the same names as arguments passed to the headerCellTemplate function with the following exceptions: the onSort, onGroup, onWidthChange and onDraftWidthChange properties are used instead of the changeSortingDirection, groupByColumn, changeColumnWidth and changeDraftColumnWidth arguments respectively.
react-grid: The TableRowDetail plugin's detailToggleCellWidth property has been renamed to toggleColumnWidth. The template, detailCellTemplate, detailRowTemplate, and detailToggleCellTemplate properties have been replaced with contentComponent, cellComponent, rowComponent, and toggleCellComponent ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent have the same names as arguments passed to the detailCellTemplate function except for the children property, which is used instead of the template argument.
Properties passed to toggleCellComponent have the same names as arguments passed to the detailToggleCellTemplate function except for the onToggle property, which is used instead of the toggleExpanded argument.
react-grid: The TableSelection plugin's highlightSelected property has been renamed to highlightRow. The selectCellTemplate and selectAllCellTemplate properties have been replaced with cellComponent, and headerCellComponent ones, which accept components instead of render functions. Find more details here: #496
Properties passed to headerCellComponent have the same names as arguments passed to the selectAllCellTemplate function with the following exceptions:
onToggle property is used instead of the toggleAll argument.disabled property is used instead of the selectionAvailable argument and it's value is inverted.Properties passed to cellComponent have the same names as arguments passed to the selectCellTemplate function except for the onToggle property, which is used instead of the changeSelected argument.
react-grid: The Table's tableLayoutTemplate, tableCellTemplate, tableRowTemplate, tableNoDataCellTemplate, tableNoDataRowTemplate, tableStubCellTemplate, and tableStubHeaderCellComponent properties have been replaced with layoutComponent, cellComponent, rowComponent, noDataCellComponent, noDataRowComponent, stubCellComponent and stubHeaderCellComponent. This also means that they accept components instead of render functions. Find more details here: #496
react-grid: The Grid's rootTemplate, headerPlaceholderTemplate, and footerPlaceholderTemplate properties have been replaced with rootComponent, headerPlaceholderComponent, and footerPlaceholderComponent. This also means that they accept components instead of render functions. Find more details here: #496
The headerTemplate, bodyTemplate, and footerTemplate properties have been replaced with the children property in rootTemplate.
<a name="1.0.0-beta.1"></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.