Editing

React Bootstrap Data Grid provides an opinionated interface to edit entire rows of cells at a time.

When enabled, controls to start editing, cancel editing, save changes, and delete rows are provided in special Edit Controls table column.

When the user starts editing a row by pushing the Edit button, the contents of the cells for that row turn into form inputs.

Editing is enabled by passing an editModel prop to the Grid component. One can additionally enable deletion by passing an optional getDeleteCallback member inside the editModel.

It is the responsibility of the parent component that contains the Grid to provide callback functions that actually act upon user interactions with the UI to edit or delete a row. In addition, it is the responsibility of the parent component to provide some kind of safeguard against accidental deletions (such as a confirmation dialog.)

Since null values are not supported by React Bootstrap Data Grid for now, for a row to be updated successfully, there should be a valid value for number, date, and datetime fields. For these three column types, the Grid will invoke a form validation error (using the form validation feature of the browser) when trying to use a blank string to update a field of one of these types. Since a blank string ("") is a valid string, the Grid will accept blank strings as input for string columns.

Type Definitions

EditModel

UpdateCallbackGenerator

This type is that of the function passed into EditModel for generating a callback function on a per-index basis. The defintion is (origIndex: number) => (rowDef: RowDef) => void.

See the example below to see how this property is typically implemented.

Example

Code

"use client";

import Grid, { ColDef, UpdateCallbackGenerator, RowDef } from "@/grid";
import { FC, useState } from "react";

const cols: ColDef[] = [
  {
    name: "name",
    type: "string",
    label: "Name",
  },
  {
    name: "class",
    type: "string",
    label: "Class",
  },
  {
    name: "selectionPriority",
    type: "number",
    label: "Selection Priority",
  },
  {
    name: "recruitmentDate",
    type: "date",
    label: "Recruitment Date",
  },
];

const initRows: RowDef[] = [
  {
    name: "Astarion",
    class: "Rogue",
    selectionPriority: 1,
    recruitmentDate: new Date("2023-10-02"),
  },
  {
    name: "Lae'zel",
    class: "Fighter",
    selectionPriority: 4,
    recruitmentDate: new Date("2023-09-30"),
  },
  {
    name: "Shadowheart",
    class: "Cleric",
    selectionPriority: 2,
    recruitmentDate: new Date("2023-10-01"),
  },
  {
    name: "Dark Urge",
    class: "Sorcerer",
    selectionPriority: 5,
    recruitmentDate: new Date("2023-09-29"),
  },
  {
    name: "Gale",
    class: "Wizard",
    selectionPriority: 3,
    recruitmentDate: new Date("2023-10-03"),
  },
  {
    name: "Wyll",
    class: "Warlock",
    selectionPriority: 5,
    recruitmentDate: new Date("2023-10-04"),
  },
  {
    name: "Karlach",
    class: "Barbarian",
    selectionPriority: 4,
    recruitmentDate: new Date("2023-10-05"),
  },
  {
    name: "Minthara",
    class: "Paladin",
    selectionPriority: 5,
    recruitmentDate: new Date("2023-10-06"),
  },
  {
    name: "Halsin",
    class: "Druid",
    selectionPriority: 4,
    recruitmentDate: new Date("2023-10-07"),
  },
  {
    name: "Jaheira",
    class: "Druid",
    selectionPriority: 4,
    recruitmentDate: new Date("2023-10-08"),
  },
  {
    name: "Minsc",
    class: "Ranger",
    selectionPriority: 2,
    recruitmentDate: new Date("2023-10-09"),
  },
];

const SampleEditableGridContainer: FC = () => {
  const [rows, setRows] = useState<RowDef[]>(initRows.slice());
  const getUpdateCallback: UpdateCallbackGenerator =
    (origIndex) => (rowDef) => {
      const newRows = rows.slice();
      newRows[origIndex] = rowDef;
      setRows(newRows);
    };
  const getDeleteCallback: (origIndex: number) => () => void =
    (origIndex) => () => {
      if (window.confirm("Are you sure you want to delete this row?")) {
        setRows(rows.toSpliced(origIndex, 1));
      }
    };

  return (
    <Grid
      rows={rows}
      cols={cols}
      editModel={{ getUpdateCallback, getDeleteCallback }}
      caption={"Plan out your party for your BG3 adventure"}
    />
  );
};

export default SampleEditableGridContainer;

Live Demo