- Please see the CHANGELOG for
react-bootstrap-table2
first drop. - Please see the Roadmap for
react-bootstrap-table2
in 2018/Q1. - Feel free to see the offical docs, we list all the basic usage here!!
Currently, I still can't implement all the mainly features in legacy react-bootstrap-table
, so please watch our github repo or blog to make sure the legacy features you wanted are already implemented on react-bootstrap-table2
. Anyway, ask me by open issue is ok.
react-bootstrap-table2
separate some functionalities from core modules to other modules like following:
react-bootstrap-table-next
- Core table module, include sorting and row selection
react-bootstrap-table2-filter
- Column filter Addons
react-bootstrap-table2-editor
- Cell Editing Addons
react-bootstrap-table2-paginator
- Pagination Addons
react-bootstrap-table2-overlay
- Overlay/Loading Addons
This can help your application with less bundled size and also help react-bootstrap-table2
have clean design to avoid handling to much logic in kernal module(SRP). Hence, which means you probably need to install above addons when you need specific features.
There is a big chagne is that there's no TableHeaderColumn
in the react-bootstrap-table2
, instead you are supposed to be define the columns
prop on BootstrapTable
:
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
The text
property is just same as the children for the TableHeaderColumn
, if you want to custom the header, there's a new property is: headerFormatter
.
Please see Work with table sort.
- Basic sorting
- Custom sort function
- Default Sort
- Remote mode
- Custom the sorting header
- Custom the sort caret
- Sort management
- Multi sort
Due to no TableHeaderColumn
so that no dataSort
here, please add sort
property on column definitation.
Please see Work with selection.
Please see available selectRow configurations.
No huge change for row selection, but can not custom the selection column currently. Coming soon!!!
Please see Work with column filter.
Please see available filter configuration.
- Text Filter
- Custom Text Filter
- Remote Filter
- Custom Filter Component
- Regex Filter
- Select Filter
- Number Filter
- Date Filter
- Array Filter
- Programmatically Filter
Remember to install react-bootstrap-table2-filter
firstly.
Due to no TableHeaderColumn
so that no filter
here, please add filter
property on column definitation and filter
prop on BootstrapTable
.
Please see Work with cell edit.
Please see available cell edit configurations.
Remember to install react-bootstrap-table2-editor
firstly.
No big changes for cell editing, validator
will not support the async call(Promise).
Please see Work with pagination.
Please see available pagination configurations.
Remember to install react-bootstrap-table2-paginator
firstly.
No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
It's totally different in
react-bootstrap-table2
. Please see.