Introduction

Welcome to the documentation for React Boostrap Data Grid!

Inspired by react-bootstrap-table2 and MUI X Data Grid, React Bootstrap Data Grid aims to fill the specific niche of a data grid UI component for the combination of Bootstrap and React.

Getting Started

NPM Package Installation

React Bootstrap Data Grid is published as an npm package with the name @absreim/react-bootstrap-data-grid.

To add the component to you project, install it with your package manager of choice.

For example:

npm install @absreim/react-bootstrap-data-grid

Dependency on Bootstrap

React Bootstrap Data Grid is designed to work with CSS styles from Bootstrap version 5 or later. If you project does not already include Bootstrap, install it according to the installation instructions in the official documentation. More specifically, since React Bootstrap Data Grid is designed to work with projects using a package manager like NPM, you will most likely want to follow the installation instructions for installing Bootstrap using a package manager.

If you are only including Bootstrap partially in your project, note that React Bootstrap Data Grid currently only depends on the tables Sass import among the list of Sass imports.

Using the Component in Your Project

Once the React Bootstrap Data Grid and Bootstrap are both installed, define rows and columns for a grid according to the following example:

import Grid from "@absreim/react-bootstrap-data-grid";
import { FC } from "react";

const cols: ColDef[] = [
  {
    type: "string",
    name: "name",
    label: "Name"
  },
  {
    type: "string",
    name: "race",
    label: "Race"
  },
  {
    type: "string",
    name: "class",
    label: "Class"
  }
]

const rows: RowDef[] = [
  {
    name: "The Dark Urge",
    race: "Dragonborn",
    class: "Sorcerer"
  },
  {
    name: "Lae'zel",
    race: "Githyanki",
    class: "Fighter"
  },
  {
    name: "Shadowheart",
    race: "Half-elf",
    class: "Cleric"
  },
  {
    name: "Astarion",
    race: "Elf",
    class: "Rogue"
  },
  {
    name: "Gale",
    race: "Human",
    class: "Wizard"
  },
  {
    name: "Wyll",
    race: "Human",
    class: "Warlock"
  },
  {
    name: "Karlach",
    race: "Tiefling",
    class: "Barbarian"
  }
]

const BasicGridExample: FC = () => {
  return (
    <Grid rows={rows} cols={cols} />
  );
};

Further information

• See the source code in the project's Github repo.
• The project is under active development. See the development roadmap.
• See the page for the published NPM package in case you are curious about download statistics.

Change Log

1.1.3

December 23, 2025

Fixed bug with datetime filter functionality involving timezones and updated documentation to explain how filtering works with timezones.

1.1.2

December 20, 2025

Fixed bug that prevented filtering from working at all.

1.1.1

December 20, 2025

Change React keys of rows to be based on original ordering in order to improve rendering performance when using pagination and sorting.

1.1.0

December 18, 2025

Added filtering feature.

1.0.0

December 17, 2025

Added aria-colindex and aria-rowindex attributes to improve accessibility and facilitate testing.

Bumped peer dependency of package to React 19. This change may break projects still using React 18.

Migrated tests to Playwright due to limitations introduced by more recent versions of React Testing Library.

0.1.4

May 9, 2024

Added sorting feature.

Added syntax highlighting to code blocks in documentation.

0.1.3

Apr. 18, 2024

Added pagination feature.

0.1.2

Mar. 14, 2024

Added automated tests and a build script to generate files meant for publishing as an NPM package.

0.1.0

Feb. 27, 2024

Initial release with baseline row definition, column definition, and data display functionality.