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 depends on the following Sass imports among the list of Sass imports.


// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/pagination";

// Utilities
@import "~bootstrap/scss/utilities/api";

Styles Specific to React Bootstrap Data Grid

React Bootstrap Data Grid contains styles of it's own that are distributed as an SCSS file and CSS file. Depending on whether your project is using SCSS or CSS, add in the appropriate import. The following code examples are for NextJS. Only one of the following three options is needed.

Import the SCSS file in another SCSS file


@import "@absreim/react-bootstrap-data-grid/style";

Import the SCSS file in a TSX file


import "@absreim/react-bootstrap-data-grid/style.scss";

Import the CSS file in a TSX file


import "@absreim/react-bootstrap-data-grid/style.css";

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:

Code


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

Live Demo

Name	Race	Class
The Dark Urge	Dragonborn	Sorcerer
Lae'zel	Githyanki	Fighter
Shadowheart	Half-elf	Cleric
Astarion	Elf	Rogue
Gale	Human	Wizard
Wyll	Human	Warlock
Karlach	Tiefling	Barbarian

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.
If you have a question, concern, or suggestion, feel free to create a GitHub issue on the repo's issue page.

Change Log

1.3.0

January 28, 2026

This release adds a feature that allows a user to edit the contents of rows.

1.2.2

January 19, 2026

This release contains bug fixes, documentation updates, and other enhancements.

Fixed an issue where the distributed NPM package was not working NextJS due to the output preserving JSX sytnax
Styles specific to React Bootstrap Data Grid were not being distributed with the NPM package. They are now included, and documentation has been updated to give examples on how to import them.
Adjusted class names for styles specific to React Bootstrap Data Grid to have a "rbdg" prefix to distinguish them from class names from other sources.

1.2.1

January 16, 2026

Selection feature no longer in experimental state due to it now having an automated test suite. Fixed a bug involving accessibility for the selection feature.

1.2.0

January 14, 2026

Added Selection feature, but in an experimental state.

1.1.4

December 29, 2025

Changed behavior of pagination feature when selecting a new page size that would make the existing index out-of-bounds. The index will be set to the maximum available for the page size.

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.