Introduction

Welcome to the documentation for react-bootstrap-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

Supported Frameworks

This project has been tested with Vite and Next.js and those frameworks are officially supported by this project.

Unfortunately, there are known showstopping issues with use of this project with Astro that do not seem particularly easy to solve. Thus, Astro is not currently supported.

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 and up, with version 5.3 recommended. 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.

A way to quickly get started with Bootstrap is to import all of Bootstrap's exports. For example, if your project uses SCSS, you can import Bootstrap as follows in one of your SCSS files:

@import "~bootstrap/scss/bootstrap";

If you are only including Bootstrap partially in your project in order to optimize bundle size, 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";
 
// Helpers
@import "~bootstrap/scss/helpers";
 
// Utilities
@import "~bootstrap/scss/utilities/api";

Styles Specific to react-bootstrap-data-grid

react-bootstrap-data-grid contains styles of its 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

"use client";
 
import Grid, { ColDef, RowDef } 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: string; race: string; class: string }>[] = [
  {
    id: 0,
    data: {
      name: "The Dark Urge",
      race: "Dragonborn",
      class: "Sorcerer",
    },
  },
  {
    id: 1,
    data: {
      name: "Lae'zel",
      race: "Githyanki",
      class: "Fighter",
    },
  },
  {
    id: 2,
    data: {
      name: "Shadowheart",
      race: "Half-elf",
      class: "Cleric",
    },
  },
  {
    id: 3,
    data: {
      name: "Astarion",
      race: "Elf",
      class: "Rogue",
    },
  },
  {
    id: 4,
    data: {
      name: "Gale",
      race: "Human",
      class: "Wizard",
    },
  },
  {
    id: 5,
    data: {
      name: "Wyll",
      race: "Human",
      class: "Warlock",
    },
  },
  {
    id: 6,
    data: {
      name: "Karlach",
      race: "Tiefling",
      class: "Barbarian",
    },
  },
];
 
const IntroGrid: FC = () => {
  return <Grid rows={rows} cols={cols} />;
};
 
export default IntroGrid;

Live Demo

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.
• If you see anything wrong with this documentation site, want to make a change it, or are just curious, see this documentation site's GitHub repo.