@pallassystems/react-bootstrap-table

React Bootstrap Table Libary

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.

Getting Started

1. Ensure that you have React 18 or later installed
2. Install Peer Dependencies

npm install react-bootstrap react-bootstrap-icons

3. Install react-bootstrap-table

npm install @pallassystems/react-bootstrap-table

Usage

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.