Other Style Options

The react-bootstrap-data-grid grid component implements some additional style options that are meant be equivalent those offered by Bootstrap for tables.

API Reference Documentation Notice

Some of the contents of this article refer to TypeScript type definitions for types within the react-bootstrap-data-grid code base. Such references are generally look like the following: GridProps.

Efforts are underway to create comprehensive TypeScript type reference documentation. In the meantime, feel free to explore the react-bootstrap-data-grid source code for specific information about types.

Alternatively, you may be able to gain a satisfactory understanding of how to use the feature described in this article by simply following the code sample in this article.

Stripes

Bootstrap offers both striped rows and striped columns for tables.

react-bootstrap-data-grid implements the same styles. These styles can be activated by passing the rows and columns values to the stripes prop on the Grid component.

By default, stripes are disabled.

Hover

Bootstrap offers hoverable row styles.

The same kind of style can be activated on the Grid component by passing in a true value to the hover prop.

Be default, hoverable row styles are disabled.

Divider

Bootstrap provides a style for table group dividers. They are relatively thick horizontal borders meant to separate the table header, body, and footer.

The Grid component implements such dividers but only for dividing the grid header and body. The reason is that the grid currently does not support footers.

To activate the divider between the grid header and body, pass a true value to the divider prop.

Note that as of now, the divider color only responds to color modes (dark mode vs light mode). There is currently no officially supported way to customize the color of the divider.

Border Style

Bootstrap offers three different table border styles:

"bordered" tables have both horizontal and vertical borders around each cell and around the outer perimeter of the table
an unnamed style that includes only horizontal borders and omits a order at the top edge of the table. This is the default style.
borderless tables that have no borders

The Grid component implements styles that very similar to the unnamed and borderless styles. For the "bordered" style, a similar options exists, but there is a key difference. See the responsive grid section for details.

How to Configure

Configure border styles by passing one of the following values to the borders prop:

"horizontal" or undefined: The unnamed default style with horizontal borders.
"full": The "bordered" style that includes horizonal and vertical borders.
"none": The "borderless" style.

Border Color

See the borders section of the_color article.

Small Grid

Like the Bootstrap small tables feature, the grid also implements a similar feature to reduce cell padding to produce a more densely packed grid.

Pass a true value to the small prop of the Grid component to enable the style.

Responsive Grid

Like Bootstrap's responsive tables, the react-bootstrap-data-grid grid implements scrolling functionality when the grid's dimensions cannot fit its contents.

One respect where the grid's behavior differs from responsive Bootstrap tables is where outer borders are applied. Outer borders are applied when the "bordered table" style is applied to a Bootstrap table or when the full option is chosen for the react-bootstrap-data-grid grid.

(See the border style section earlier in this article for details on applying a grid border style.)

For responsive Bootstrap tables, the borders are around the table that is within the scrollable container. For the react-bootstrap-data-grid grid, the borders are applied around the scrollable container itself.

See the example later in this article for a demonstration of the "bordered" setting for the grid.

Unsupported Features

A number of Bootstrap table style features are not supported for various reasons.

Active Tables

This section refers to the active tables feature of Bootstrap tables.

While technically implemented in react-bootstrap-data-grid grid's Sass and CSS, there is currently no feature that makes use of active rows or cells.

These styles will like be made use of in upcoming row and/or cell selection features for the react-bootstrap-data-grid grid.

Vertical Alignment

This section refers to the vertical alignment feature of Bootstrap tables.

Currently, the grid component has only one line of text per row, so vertical alignment is not applicable.

Nesting

This section refers to the nesting feature of Bootstrap tables.

Nesting react-bootstrap-data-grid grids within each other is not currently supported.

Caption

This section refers to the discussion about table captions on the Bootstrap tables documentation.

The react-bootstrap-data-grid grid component currently does not support the equivalent of a table caption.

Example

The following code sample demonstrates the results of adjusting various style options on the Grid component.

Note: this code sample makes use of react-bootstrap.

Code

"use client";
 
import Grid, {
  RowDef,
  ColDef,
  GridProps,
} from "@absreim/react-bootstrap-data-grid/grid";
import { FC } from "react";
import Stack from "react-bootstrap/Stack";
import useToggleSwitch from "@/assets/examples/useToggleSwitch";
import useVariantDropdown from "@/assets/examples/useVariantDropdown";
import { OptionSet } from "@/assets/examples/types";
import useOptionSelection from "@/assets/examples/useOptionSelection";
 
// --- Sample data ---
 
interface Bg3Skill {
  name: string;
  ability: string;
}
 
const rows: RowDef<Bg3Skill>[] = [
  {
    id: "athletics",
    data: {
      name: "Athletics",
      ability: "Strength",
    },
  },
  {
    id: "acrobatics",
    data: {
      name: "Acrobatics",
      ability: "Dexterity",
    },
  },
  {
    id: "sleight",
    data: {
      name: "Sleight of Hand",
      ability: "Dexterity",
    },
  },
  {
    id: "stealth",
    data: {
      name: "Stealth",
      ability: "Dexterity",
    },
  },
  {
    id: "arcana",
    data: {
      name: "Arcana",
      ability: "Intelligence",
    },
  },
  {
    id: "history",
    data: {
      name: "History",
      ability: "Intelligence",
    },
  },
  {
    id: "investigation",
    data: {
      name: "Investigation",
      ability: "Intelligence",
    },
  },
  {
    id: "nature",
    data: {
      name: "Nature",
      ability: "Intelligence",
    },
  },
  {
    id: "religion",
    data: {
      name: "Religion",
      ability: "Intelligence",
    },
  },
  {
    id: "animal",
    data: {
      name: "Animal Handling",
      ability: "Wisdom",
    },
  },
  {
    id: "insight",
    data: {
      name: "Insight",
      ability: "Wisdom",
    },
  },
  {
    id: "medicine",
    data: {
      name: "Medicine",
      ability: "Wisdom",
    },
  },
  {
    id: "perception",
    data: {
      name: "Perception",
      ability: "Wisdom",
    },
  },
  {
    id: "survival",
    data: {
      name: "Survival",
      ability: "Wisdom",
    },
  },
  {
    id: "deception",
    data: {
      name: "Deception",
      ability: "Charisma",
    },
  },
  {
    id: "intimidation",
    data: {
      name: "Intimidation",
      ability: "Charisma",
    },
  },
  {
    id: "performance",
    data: {
      name: "Performance",
      ability: "Charisma",
    },
  },
  {
    id: "persuasion",
    data: {
      name: "Persuasion",
      ability: "Charisma",
    },
  },
];
 
const cols: ColDef[] = [
  {
    name: "name",
    label: "Name",
    type: "string",
  },
  {
    name: "ability",
    label: "Related Ability",
    type: "string",
    width: 175,
  },
];
 
// --- Radio button fieldset definitions ---
 
type BorderStyleOptionNames = "unset" | "none" | "horizontal" | "full";
type StripeOptionNames = "unset" | "none" | "rows" | "columns";
 
const borderStyleOptions: OptionSet<
  BorderStyleOptionNames,
  GridProps["borders"]
> = {
  unset: {
    label: "Unset (same as horizontal)",
    value: undefined,
  },
  none: {
    label: "None",
    value: "none",
  },
  horizontal: {
    label: "Horizontal",
    value: "horizontal",
  },
  full: {
    label: "Full",
    value: "full",
  },
};
 
const stripeOptions: OptionSet<StripeOptionNames, GridProps["stripes"]> = {
  unset: {
    label: "Unset (same as none)",
    value: undefined,
  },
  none: {
    label: "None",
    value: "none",
  },
  rows: {
    label: "Rows",
    value: "rows",
  },
  columns: {
    label: "Columns",
    value: "columns",
  },
};
 
// --- Demo component ---
 
const StyleSettingsDemo: FC = () => {
  const smallGrid = useToggleSwitch("small", "Small Grid");
  const divider = useToggleSwitch("divider", "Enable Divider");
  const hover = useToggleSwitch("hover", "Hover Styles");
  const gridVariant = useVariantDropdown("gridVariant", "Grid Color Variant");
  const borderVariant = useVariantDropdown(
    "borderVariant",
    "Border Color Variant",
  );
  const borderStyleHook = useOptionSelection(
    borderStyleOptions,
    "unset",
    "Border Style",
    "borderStyle",
  );
  const stripeHook = useOptionSelection(
    stripeOptions,
    "unset",
    "Stripes",
    "stripes",
  );
 
  return (
    <Stack gap={2}>
      <Stack gap={2}>
        {smallGrid.switchUi}
        {divider.switchUi}
        {hover.switchUi}
        {gridVariant.selectUi}
        {borderVariant.selectUi}
        {borderStyleHook.selectionUi}
        {stripeHook.selectionUi}
      </Stack>
      <Grid
        rows={rows}
        cols={cols}
        small={smallGrid.enabled}
        divider={divider.enabled}
        hover={hover.enabled}
        variant={gridVariant.propValue}
        borderVariant={borderVariant.propValue}
        borders={borderStyleHook.value}
        stripes={stripeHook.value}
      />
    </Stack>
  );
};
 
export default StyleSettingsDemo;