Basic Usage

Data Types

react-bootstrap-data-grid currently supports 4 data types: string, number, date, and datetime. The string and number types correspond to the types of the same name in JavaScript.

The date and datetime types are both backed by the Date type in JavaScript. The difference between date and datetime lies with the behavior of react-bootstrap-data-grid with regard to each type. Notably, the default way that each type is displayed differ, as do the input elements for filtering on and editing data of each type.

For details on how formatting differs between date and datetime types, see the next section on formatting.

Formatting

A formatter function that takes in a value of the corresponding type for a column (string, number, or Date) and returns a string may be optionally specified for each ColDef. When specified, this function will be used when displaying data for that column in the grid.

When not specified, the default displayed string for each column is as follows:

string

The string will be displayed as it is with no changes.

number

The number will be converted to a string via the Number.prototype.toString function.

date

The date will be displayed in the format yyyy-mm-dd, which is the format used for date inputs.

datetime

The datetime will be displayed in the format YYYY-MM-DDTHH:mm, which is the format used for datetime-local inputs.

Example

The in the below code sample, three columns, name, frequency and date are defined in the cols array.

import {
  ColDef,
  RowDef,
} from "@absreim/react-bootstrap-data-grid/table";
 
export const cols: ColDef[] = [
  {
    type: "string",
    name: "name",
    label: "Name",
  },
  {
    type: "number",
    name: "frequency",
    label: "Frequency (GHz)",
  },
  {
    type: "date",
    name: "releaseDate",
    label: "Release Date",
    formatter: (date: Date) => date.toDateString(),
  },
];

ID Field

Each RowDef object has a mandatory id field to uniquely identify rows between renders. This field can be a string or number and must be unique among all rows in any given Grid or Table component.

This field is used as a key prop within the grid to improve performance by reducing unnecessary unmounting and remounting of components that represent rows.

Guidelines for selecting values for the id field are the same as that for selecting key props when rendering lists of React components. See the official React documentation on this subject for additional information.

Data Field

The data in a row that corresponds to the column definitions passed in the cols prop is in a property named data in RowDef. The property names and types must match up with properties in the cols prop to avoid a runtime error.

Example

In the following code sample, RowDef objects that line up with the column definitions in the previous code sample are assigned to the rows constant.

An id field for each row is chosen that uniquely identifies the entity in question (Apple Silicon chip models). Compared to a number that simply represents the index of the array, it is relatively easy to identify the meaning of each id even if the order of the rows were to be changed.

interface CpuInfo {
  name: string;
  frequency: number;
  releaseDate: Date;
}
 
export const rows: RowDef<CpuInfo>[] = [
  {
    id: "m4",
    data: {
      name: "M4",
      frequency: 4.4,
      releaseDate: new Date(2024, 4, 15),
    },
  },
  {
    id: "m4-pro",
    data: {
      name: "M4 Pro",
      frequency: 4.51,
      releaseDate: new Date(2024, 10, 8),
    },
  },
  {
    id: "m4-max",
    data: {
      name: "M4 Max",
      frequency: 4.51,
      releaseDate: new Date(2024, 10, 8),
    },
  },
  {
    id: "m5",
    data: {
      name: "M5",
      frequency: 4.61,
      releaseDate: new Date(2025, 9, 15),
    },
  },
];

Grid

"use client";
 
import Grid from "@absreim/react-bootstrap-data-grid/grid";
import { FC } from "react";
import { rows, cols } from "./sampleData";
 
const SampleBasicGrid: FC = () => <Grid rows={rows} cols={cols} />;
 
export default SampleBasicGrid;

Table

"use client";
 
import Table from "@absreim/react-bootstrap-data-grid/table";
import { FC } from "react";
import { rows, cols } from "./sampleData";
 
const SampleBasicTable: FC = () => <Table rows={rows} cols={cols} />;
 
export default SampleBasicTable;