Selection

react-bootstrap-data-grid provides functionality for the user to select and deselect rows in a Table component.

A Table can be configured to allow or disallow selection. If allowed, it can be configured to either allow selection of one row at a time or multiple rows at a time.

In addition, after configuring whether to allow single or multiple selection, it can be configured to allow selection in different ways. These ways are clicking on a row, clicking on a radio or checkbox for each row, or both. Radio buttons are for single selection mode while checkboxes are for multi selection mode.

If radio or checkbox selection is enabled (including the "both" option), the header cell for the column that contains radio or checkbox selection inputs will be clickable. Clicking on it will deselect any existing selected rows if there is currently one or more rows selected.

If no rows are selected, clicking on the header cell selects all rows if multiple selection is enabled.

If single selection is enabled while no existing row is selected, clicking on the header cell does nothing.

Examples

External Interaction

To have your app act on selected elements, simply read the row indices from the state that is passed down in your parent component and do something with it.

Code

"use client";
 
import { FC, useMemo, useState } from "react";
import Table, {
  ColDef,
  MultiSelectModel,
  RowDef,
  RowId,
} from "@absreim/react-bootstrap-data-grid/table";
import Button from "react-bootstrap/Button";
import Stack from "react-bootstrap/Stack";
 
const cols: ColDef[] = [
  {
    type: "number",
    name: "number",
    label: "Number",
  },
];
 
const origRows: RowDef<{ number: number }>[] = [
  {
    id: 0,
    data: {
      number: 1,
    },
  },
  {
    id: 1,
    data: {
      number: 2,
    },
  },
  {
    id: 2,
    data: {
      number: 3,
    },
  },
  {
    id: 3,
    data: {
      number: 4,
    },
  },
  {
    id: 4,
    data: {
      number: 5,
    },
  },
];
 
const ExternalInteractionExample: FC = () => {
  const [rows, setRows] = useState<RowDef[]>(origRows);
  const [selected, setSelected] = useState<RowId[]>([]);
  const selectModel: MultiSelectModel = useMemo(
    () => ({
      mode: "both",
      type: "multi",
      selected,
      setSelected,
    }),
    [selected],
  );
 
  const deleteSelectedRows = () => {
    setRows(rows.filter(({ id }) => !selected.includes(id)));
    setSelected([]);
  };
 
  const resetRows = () => {
    setRows(origRows.slice());
  };
 
  return (
    <Stack gap={2}>
      <Table rows={rows} cols={cols} selectModel={selectModel} />
      <Stack direction="horizontal" gap={2} className="justify-content-end">
        <Button
          onClick={resetRows}
          disabled={rows.length === origRows.length}
          variant="secondary"
        >
          Reset
        </Button>
        <Button
          onClick={deleteSelectedRows}
          disabled={selected.length === 0}
          variant="primary"
        >
          Delete Selected
        </Button>
      </Stack>
    </Stack>
  );
};
 
export default ExternalInteractionExample;

	Number
	1
	2
	3
	4
	5

Multiple Selection Mode

Code

"use client";
 
import Table, {
  ColDef,
  MultiSelectModel,
  RowDef,
  RowId,
  SelectMode,
} from "@absreim/react-bootstrap-data-grid/table";
import { FC, useMemo, useState } from "react";
 
export interface SampleMultiSelectGridProps {
  mode: SelectMode;
}
 
const cols: ColDef[] = [
  {
    name: "name",
    type: "string",
    label: "Name",
  },
  {
    name: "damage",
    type: "number",
    label: "Average Damage",
  },
  {
    name: "weight",
    type: "number",
    label: "Weight (lb)",
  },
  {
    name: "price",
    type: "number",
    label: "Price",
  },
];
 
interface Data {
  name: string;
  damage: number;
  weight: number;
  price: number;
}
 
const rows: RowDef<Data>[] = [
  {
    id: 0,
    data: {
      name: "Short Bow",
      damage: 3.5,
      weight: 1.8,
      price: 16,
    },
  },
  {
    id: 1,
    data: {
      name: "Long Bow",
      damage: 4.5,
      weight: 2.2,
      price: 50,
    },
  },
  {
    id: 2,
    data: {
      name: "Light Crossbow",
      damage: 4.5,
      weight: 4.5,
      price: 30,
    },
  },
  {
    id: 3,
    data: {
      name: "Heavy Crossbow",
      damage: 5.5,
      weight: 16.2,
      price: 65,
    },
  },
  {
    id: 4,
    data: {
      name: "Hand Crossbow",
      damage: 3.5,
      weight: 1.8,
      price: 50,
    },
  },
];
 
const SampleMultiSelectTable: FC<SampleMultiSelectGridProps> = ({ mode }) => {
  const [selected, setSelected] = useState<RowId[]>([]);
  const selectModel: MultiSelectModel = useMemo(
    () => ({
      mode,
      type: "multi",
      selected,
      setSelected,
    }),
    [mode, selected],
  );
 
  return <Table rows={rows} cols={cols} selectModel={selectModel} />;
};
 
export default SampleMultiSelectTable;

Name	Average Damage	Weight (lb)	Price
Short Bow	3.5	1.8	16
Long Bow	4.5	2.2	50
Light Crossbow	4.5	4.5	30
Heavy Crossbow	5.5	16.2	65
Hand Crossbow	3.5	1.8	50

Single Selection Mode

Code

"use client";
 
import { FC, useMemo, useState } from "react";
import Table, {
  ColDef,
  RowDef,
  RowId,
  SelectMode,
  SingleSelectModel,
} from "@absreim/react-bootstrap-data-grid/table";
 
export interface SampleSingleSelectGridProps {
  mode: SelectMode;
}
 
const cols: ColDef[] = [
  {
    name: "name",
    type: "string",
    label: "Name",
  },
  {
    name: "school",
    type: "string",
    label: "School",
  },
];
 
interface Data {
  name: string;
  school: string;
}
 
const rows: RowDef<Data>[] = [
  {
    id: 0,
    data: {
      name: "Acid Splash",
      school: "Conjuration",
    },
  },
  {
    id: 1,
    data: {
      name: "Blade Ward",
      school: "Abjuration",
    },
  },
  {
    id: 2,
    data: {
      name: "Bone Chill",
      school: "Necromancy",
    },
  },
  {
    id: 3,
    data: {
      name: "Fire Bolt",
      school: "Evocation",
    },
  },
  {
    id: 4,
    data: {
      name: "Minor Illusion",
      school: "Illusion",
    },
  },
  {
    id: 5,
    data: {
      name: "Friends",
      school: "Enchantment",
    },
  },
  {
    id: 6,
    data: {
      name: "Ray of Frost",
      school: "Evocation",
    },
  },
];
 
const SampleSingleSelectTable: FC<SampleSingleSelectGridProps> = ({ mode }) => {
  const [selected, setSelected] = useState<RowId | null>(null);
  const selectModel: SingleSelectModel = useMemo(
    () => ({
      mode,
      type: "single",
      selected,
      setSelected,
      groupName: "single selection example grid (BG3 cantrips)",
    }),
    [mode, selected],
  );
 
  return <Table rows={rows} cols={cols} selectModel={selectModel} />;
};
 
export default SampleSingleSelectTable;

Selection

Examples

External Interaction

Code

Live Demo

Multiple Selection Mode

Code

Live Demo

Single Selection Mode

Code

Live Demo

	Name	School
	Acid Splash	Conjuration
	Blade Ward	Abjuration
	Bone Chill	Necromancy
	Fire Bolt	Evocation
	Minor Illusion	Illusion
	Friends	Enchantment
	Ray of Frost	Evocation