react-bootstrap-table2/docs/getting-started.md

id	title	sidebar_label
getting-started	Getting Started	Getting Started

Installation

Due to react-bootstrap-table2 already taked on npm so that our npm module name is react-bootstrap-table-next. Anyway, we still use or mention react-bootstrap-table2 in 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-table2 need you to add bootstrap css in your application firstly. About bootstrap css, we only compatible with bootstrap 3 but will start to compatible for bootstrap 4 on v0.2.0

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-next is ReactBootstrapTable2
• The namespace of react-bootstrap-table2-editor is ReactBootstrapTable2Editor
• The namespace of react-bootstrap-table2-filter is ReactBootstrapTable2Filter
• The namespace of react-bootstrap-table2-paginator is ReactBootstrapTable2Paginator
• The namespace of react-bootstrap-table2-overlay is ReactBootstrapTable2Overlay

npm

After install from npm, get UMD module from dist folder in the node_modules/PACKAGE_NAME:

unpkg

• Downloadreact-bootstrap-table-next from here
• Download react-bootstrap-table2-editor from here
• Download react-bootstrap-table2-filter from here
• Download react-bootstrap-table2-paginator from here
• Download react-bootstrap-table2-overlay from here