Getting Started
Installation
Due to
react-bootstrap-table2
already taken on npm our module is calledreact-bootstrap-table-next
. We still usereact-bootstrap-table2
in any our git repository, official website and documentation - only the npm name is different!
$ npm install react-bootstrap-table-next --save
Add CSS
You first need to add bootstrap css in your application. After v1.0.0, we start to suport
bootstrap@4
.
Finish above step, then add the react-bootstrap-table2
styles:
// es5
require('react-bootstrap-table-next/dist/react-bootstrap-table2.min.css');
// es6
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
Your First Table
import BootstrapTable from 'react-bootstrap-table-next';
const products = [ ... ];
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
export default () =>
<BootstrapTable keyField='id' data={ products } columns={ columns } />
UMD
Namespace
- The namespace of
react-bootstrap-table-next
isReactBootstrapTable2
- The namespace of
react-bootstrap-table2-editor
isReactBootstrapTable2Editor
- The namespace of
react-bootstrap-table2-filter
isReactBootstrapTable2Filter
- The namespace of
react-bootstrap-table2-paginator
isReactBootstrapTable2Paginator
- The namespace of
react-bootstrap-table2-overlay
isReactBootstrapTable2Overlay
- The namespace of
react-bootstrap-table2-toolkit
isReactBootstrapTable2Toolkit
npm
After install from npm, your can get UMD module from the dist
.