Introduction

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

Change Log

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.