mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
2.6 KiB
2.6 KiB
| id | title | sidebar_label |
|---|---|---|
| getting-started | Getting Started | Getting Started |
Installation
Due to
react-bootstrap-table2already taked on npm so that our npm module name isreact-bootstrap-table-next. Anyway, we still use or mentionreact-bootstrap-table2in any our git repository, offical website and documents!!, ony the npm name is different!!!!
$ npm install react-bootstrap-table-next --save
Add CSS
react-bootstrap-table2need you to add bootstrap css in your application firstly. After v1.0.0, we start to suportbootstrap@4.
Finish above step, let's 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-nextisReactBootstrapTable2 - The namespace of
react-bootstrap-table2-editorisReactBootstrapTable2Editor - The namespace of
react-bootstrap-table2-filterisReactBootstrapTable2Filter - The namespace of
react-bootstrap-table2-paginatorisReactBootstrapTable2Paginator - The namespace of
react-bootstrap-table2-overlayisReactBootstrapTable2Overlay - The namespace of
react-bootstrap-table2-toolkitisReactBootstrapTable2Toolkit
npm
After install from npm, your can get UMD module from the dist.