• Docs
  • API
  • Help
  • Blog
  • GitHub

›Getting Started

Getting Started

  • About
  • Getting Started
  • Bootstrap 4
  • Migration

Basic Usage

  • Work on Row
  • Work on Column
  • Table Sort
  • Row Selection
  • Column Filter
  • Cell Edit
  • Pagination
  • Expandable Row

Remote Table

  • Work on Remote
  • Overlay

Table Toolkits

  • Getting Started
  • Table Search
  • Export to CSV
  • Column Toggle

Exposed API

  • Introduction

Getting Started

Installation

Due to react-bootstrap-table2 already taken on npm our module is called react-bootstrap-table-next. We still use react-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 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
  • The namespace of react-bootstrap-table2-toolkit is ReactBootstrapTable2Toolkit

npm

After install from npm, your can get UMD module from the dist.

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
  • Download react-bootstrap-table2-toolkit from here
← react-bootstrap-table2Bootstrap 4 →
Docs
Getting StartedAPI References
Community
Stack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 react-bootstrap-table2.