react-bootstrap-table

A Bootstrap table built with React.js

2,227

781

2,227

440

View on GitHub View on NPM

Top Related Projects

table

25,613

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

react-data-grid

7,069

Feature-rich and customizable data grid React component

mui-datatables

2,718

Datatables for React using Material-UI

react-data-table-component

2,060

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

Quick Overview

React-bootstrap-table is a powerful and flexible React component for creating dynamic tables with Bootstrap styling. It offers features like sorting, pagination, cell editing, and more, making it easy to build interactive and responsive tables in React applications.

Pros

Rich set of features including sorting, filtering, pagination, and cell editing
Highly customizable with numerous options and callback functions
Good documentation and examples for easy implementation
Supports both Bootstrap 3 and 4

Cons

Large bundle size, which may impact performance for smaller projects
Learning curve can be steep due to the extensive API
Some users report issues with TypeScript definitions
Less active development in recent years compared to alternatives

Code Examples

Basic table setup:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

const products = [
  { id: 1, name: 'Item 1', price: 100 },
  { id: 2, name: 'Item 2', price: 200 }
];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

Adding pagination:

import paginationFactory from 'react-bootstrap-table2-paginator';

<BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
  pagination={ paginationFactory() }
/>

Implementing cell editing:

import cellEditFactory from 'react-bootstrap-table2-editor';

const cellEdit = cellEditFactory({
  mode: 'click',
  blurToSave: true
});

<BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
  cellEdit={ cellEdit }
/>

Getting Started

Install the package:

npm install react-bootstrap-table-next --save

Import and use in your React component:

import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [
  { dataField: 'id', text: 'ID' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'price', text: 'Price' }
];

const data = [
  { id: 1, name: 'Item 1', price: 100 },
  { id: 2, name: 'Item 2', price: 200 }
];

function MyTable() {
  return (
    <BootstrapTable keyField='id' data={ data } columns={ columns } />
  );
}

export default MyTable;

Competitor Comparisons

table

1,306

React Table

Pros of react-component/table

More flexible and customizable, allowing for complex table layouts and features
Better performance with large datasets due to virtual scrolling
Stronger TypeScript support and type definitions

Cons of react-component/table

Steeper learning curve and more complex API
Less out-of-the-box styling, requiring more manual CSS work
Fewer built-in features compared to react-bootstrap-table

Code Comparison

react-component/table:

import { Table } from 'rc-table';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];

<Table columns={columns} data={data} />

react-bootstrap-table:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [
  { dataField: 'name', text: 'Name' },
  { dataField: 'age', text: 'Age' },
];

<BootstrapTable keyField='id' data={data} columns={columns} />

Both libraries offer powerful table components for React applications, but they cater to different needs. react-component/table is more suitable for complex, high-performance table requirements, while react-bootstrap-table provides a simpler API with more built-in features and styling options. The choice between the two depends on the specific project requirements and developer preferences.

table

25,613

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of TanStack Table

Framework-agnostic, supporting React, Vue, Solid, and more
More flexible and customizable, with a headless UI approach
Better performance for large datasets due to virtualization support

Cons of TanStack Table

Steeper learning curve due to its flexibility and API complexity
Requires more setup and configuration for basic use cases
Less out-of-the-box styling, needing additional CSS work

Code Comparison

react-bootstrap-table:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

TanStack Table:

import { useTable } from '@tanstack/react-table'

const columns = useMemo(() => [
  { Header: 'Product ID', accessor: 'id' },
  { Header: 'Product Name', accessor: 'name' },
], [])

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data: products })

Both libraries offer powerful table solutions, but TanStack Table provides more flexibility at the cost of simplicity, while react-bootstrap-table offers an easier setup with Bootstrap styling out of the box.

react-data-grid

7,069

Feature-rich and customizable data grid React component

Pros of react-data-grid

More advanced features like cell editing, custom renderers, and keyboard navigation
Better performance for large datasets due to virtualization
More active development and community support

Cons of react-data-grid

Steeper learning curve due to more complex API
Less out-of-the-box styling options compared to react-bootstrap-table
Requires more setup and configuration for basic use cases

Code Comparison

react-data-grid:

import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title', editor: TextEditor }
];

<ReactDataGrid
  columns={columns}
  rows={rows}
  onRowsChange={setRows}
/>

react-bootstrap-table:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'ID'
}, {
  dataField: 'title',
  text: 'Title'
}];

<BootstrapTable
  keyField='id'
  data={products}
  columns={columns}
/>

Both libraries offer powerful data grid solutions for React applications. react-data-grid is more feature-rich and performant, making it suitable for complex use cases and large datasets. react-bootstrap-table is simpler to set up and use, with better out-of-the-box styling, making it a good choice for straightforward table needs.

mui-datatables

2,718

Datatables for React using Material-UI

Pros of mui-datatables

Built on Material-UI, providing a modern and sleek design out of the box
More extensive customization options for styling and theming
Better support for responsive design and mobile-friendly tables

Cons of mui-datatables

Steeper learning curve due to Material-UI integration
Potentially larger bundle size due to Material-UI dependencies
Less frequent updates and maintenance compared to react-bootstrap-table

Code Comparison

react-bootstrap-table:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

mui-datatables:

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Both libraries offer similar basic functionality for creating data tables, but mui-datatables provides more built-in features and styling options out of the box. react-bootstrap-table has a simpler API and may be easier to set up for basic use cases, while mui-datatables offers more advanced customization options at the cost of increased complexity.

react-data-table-component

2,060

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

Pros of react-data-table-component

More modern and actively maintained, with frequent updates
Built-in support for server-side pagination and sorting
Highly customizable with theming and custom cell renderers

Cons of react-data-table-component

Steeper learning curve due to more advanced features
Less comprehensive documentation compared to react-bootstrap-table
Fewer pre-built components for complex table operations

Code Comparison

react-bootstrap-table:

<BootstrapTable data={products}>
  <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
  <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
  <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

react-data-table-component:

<DataTable
  columns={columns}
  data={data}
  pagination
  paginationServer
  paginationTotalRows={totalRows}
  onChangePage={handlePageChange}
  onChangeRowsPerPage={handlePerRowsChange}
/>

The code comparison shows that react-data-table-component offers a more concise syntax for basic table setup, while also providing built-in support for pagination and server-side operations. react-bootstrap-table uses a more declarative approach with nested components for column definitions.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

react-bootstrap-table

`react-bootstrap-table2` already released, this project will stop development after 2018Q2

It's a react.js table for bootstrap, named react-bootstrap-table. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However react-bootstrap-table support these features:

Striped, borderless, condensed table
Column align, hidden, width, sort, title, styling, customization
Table scrolling
Cell format
Pagination
Row selection
Table Search, Column filter
Cell editor
Insert & delete Row
Export to CSV
Rich function hooks
Header column span
Remote mode
Row expand
Key board navigation

Example See more about react-bootstrap-table and explore more examples on examples folder
Check the CHANGELOG for more detail release notes.

Notes

v4.0.0 released, this release mainly replace react-toastr with react-s-alert

Replace react-toastr by react-s-alert
Use prop-types
Support bootstrap@4 and bootstrap@3 both. If you use 4, please add version='4' on <BootstrapTable>
No important features were implemented, most of bug fixes and improvement

After v2.4.4, we move the css files to dist folder for allowing this repo can be hosted on cdnjs

Development

react-bootstrap-table dependencies on react.js and Bootstrap 3, also written by ES6 and use gulp and browserify for building and bundling.

You can use the following commands to prepare development

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

See the examples for react-bootstrap-table

$ npm start # see all examples, go to localhost:3004

Usage

a.Install

npm install react-bootstrap-table --save

b.Import Module

To use react-bootstrap-table in your react app, you should import it first. You can do this in two ways:

With a module bundler

With a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else.
You can include source maps on your build system to debug on development. Don't forget to Uglify on production.

// in ECMAScript 6
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
// or in ECMAScript 5
var ReactBSTable = require('react-bootstrap-table');  
var BootstrapTable = ReactBSTable.BootstrapTable;
var TableHeaderColumn = ReactBSTable.TableHeaderColumn;

Browser global(window object)

In the dist folder you have a UMD bundle with source maps (react-bootstrap-table.js) as well as a minified version (react-bootstrap-table.min.js).

<script src="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" />
<script>
  var ReactBsTable = window.BootstrapTable;
  //...
</script>

The UMD build is also available on npmcdn:

// source maps: https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js.map
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js"></script>
// or use the min version
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>

c.Import CSS

Finally, you need to import the css file to your app:

<!-- we still need bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./dist/react-bootstrap-table.min.css">

The CSS files you can find in the css folder.

Quick Demo

// products will be presented by react-bootstrap-table
var products = [{
      id: 1,
      name: "Item name 1",
      price: 100
  },{
      id: 2,
      name: "Item name 2",
      price: 100
  },........];
// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
  </BootstrapTable>,
	document.getElementById("app")
);

More react-bootstrap-table examples

The example source codes are in the examples folder folder. Run the following commands for a live demo.

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install
$ npm start # after start, open browser and go to http://localhost:3004

Documentation

Thanks

luqin
Help this project to integrate a better examples demo, add travis & badge, code formatting, give a lot of suggestions and bugs report.
Whien
Implement a lots of awesome new feature and also fix some bugs and enhancements.
Parth Prajapati
Help to check issues and give great and useful instructions.
khinlatt
Contribute export csv, multi-search and bug fixing.
dana
Contribute a new colum-filter design and great feedback given.
tbaeg
Bugs report and give some bootstrap and css suggestions actively.
bluedarker
Contribute the edit format & validation on cell editing and row insertion. Improve the custom styling.
Sofia Silva
Bug reports and fixing actively.
frontsideair
Fixing bugs and give improvement for functionality.
aaronhayes
Bugs report and enhance the cell formatting.
Reggino
Implement the TableDataSet component.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-component/table

Cons of react-component/table

Code Comparison

Pros of TanStack Table

Cons of TanStack Table

Code Comparison

Pros of react-data-grid

Cons of react-data-grid

Code Comparison

Pros of mui-datatables

Cons of mui-datatables

Code Comparison

Pros of react-data-table-component

Cons of react-data-table-component

Code Comparison

Convert designs to code with AI

README

react-bootstrap-table

react-bootstrap-table2 already released, this project will stop development after 2018Q2

Notes

Development

Usage

a.Install

b.Import Module

With a module bundler

Browser global(window object)

c.Import CSS

Quick Demo

More react-bootstrap-table examples

Thanks

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

`react-bootstrap-table2` already released, this project will stop development after 2018Q2