react-bootstrap-table-ng

Maintenance fork of react-bootstrap-table-nextgen / npm package react-bootstrap-table-nextgen, which is a fork of react-bootstrap-table2 / npm package react-bootstrap-table-next created by Allen Fang.

The goal of this fork is to provide stable version to supports React 18+ and Bootstrap 4+ with modern React 18+ features such as hooks, context, etc.

Changes on top of [react-bootstrap-table-next] and [react-bootstrap-table-nextgen]

• Support React 18 and React 19
• Support Bootstrap 3.x up to 3.4.1, Bootstrap 4.x up to 4.6.2, and Bootstrap 5.x up to 5.3.8
• Converted PropTypes to typescript types, and removed prop-types from dependency.
• Replaced all class components with functional components
• Added hooks and context API to support modern React features
• Added column resize functionality
• Added cell expand functionality, i.e. showing full text when hover ellipsis cell
• Added pagination jump control functionality, allowing users to jump to a specific page by typing the page number.
• Added row id prefix functionality to provide stable identifiers for integration with external libraries.
• Converted all test cases from Enzyme to React Testing Library (RTL), Removed Enzyme related dependencies
• Updated most dependencies to their latest stable versions to fix vulnerabilities
• Upgraded Storybook to 10.3.5
• Upgraded Yarn to 4.13.0

Release Notes

https://github.com/jeff-k-zhou/react-bootstrap-table-ng/releases

React and Bootstrap compatibility

See the below table on which version of react-bootstrap-table-ng you should be using in your project.

Usage

Installation

npm install react-bootstrap-table-ng --save

Include CSS

react-bootstrap-table-ng needs you to add bootstrap css in your application firstly.

// es5
require("react-bootstrap-table-ng/dist/react-bootstrap-table-ng.min.css");

// es6
import "react-bootstrap-table-ng/dist/react-bootstrap-table-ng.min.css";

Your First Table

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

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 } />

More Examples

Live Demo