TypeScript icon, indicating that this package has built-in type declarations

0.6.0 • Public • Published

React Bootstrap Table Libary

Maintainability RatingReliability RatingCoverageApache License, Version 2.0, January 2004PRs Welcome

A library to create a data grid using React, Bootstrap & Bootstrap Icons. This was written as other Bootstrap libraries were written against old versions of React/Bootstrap and everything else was based on the Material UI framework.

Image of the Table

Getting Started

  1. Ensure that you have React 18 or later installed
  2. Install Peer Dependencies
npm install react-bootstrap react-bootstrap-icons
  1. Install react-bootstrap-table
npm install @pallassystems/react-bootstrap-table


import React, { useMemo, useRef, useState, useEffect } from 'react';
import type { RBTColumnDefs } from '@pallassystems/react-bootstrap-table';
import { RBTable } from '@pallassystems/react-bootstrap-table';

type Person = {
  name: string;
  age: number;

const data: Person[] = [
    name: 'John',
    age: 30,
    name: 'Sara',
    age: 25,

export default function App() {
  const columns = useMemo<RBTColumnDefs<Person>[]>(
    () => [
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        accessorFn: (row) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: () => <i>Age</i>, //optional custom header render

  return <RBTable columns={columns} data={data} />;

Develop and Contribute

We welcome questions, ideas, issues and code contributions to this project.

Use the issues page to get in touch with the community.

If you would like to make a code contribution please fork the repository and create a GitHub pull request to the main branch.

Package Sidebar


npm i @pallassystems/react-bootstrap-table

Weekly Downloads






Unpacked Size

228 kB

Total Files


Last publish


  • stephen.crocker