Undo/redo

Prop enableUndoRedo — engine behaviour, default false.

Guide

When to use it

Give data-entry users a safety net — Ctrl+Z / Ctrl+Y across their edits — without tracking history yourself.

How it works

enableUndoRedo snapshots the data on each committed change and replays through the same onDataChange path when the user undoes or redoes, so your state stays the single source of truth:

<BstTableMui
  data={rows}
  columns={columns}
  getRowId={(r) => r.id}
  enableEditing
  enableUndoRedo
  showUndoRedo
  onDataChange={(next) => setRows(next)}
/>

Add showUndoRedo for toolbar buttons alongside the keyboard shortcuts.

Gotchas

• Needs onDataChange — undo / redo works by re-applying snapshots through it.
• History is per grid instance and resets on unmount; it isn't persisted.
• Snapshot-based: very large datasets with deep histories cost memory — bound it if you edit thousands of rows in one session.

Live example

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
type Row = { id: string; name: string; team: string; role: string; score: number }
const seed: Row[] = [
  { id: '1', name: 'Ada Lovelace',    team: 'Platform', role: 'Engineer',  score: 92 },
  { id: '2', name: 'Alan Turing',     team: 'Research', role: 'Scientist', score: 88 },
  { id: '3', name: 'Grace Hopper',    team: 'Platform', role: 'Engineer',  score: 95 },
  { id: '4', name: 'Katherine J.',    team: 'Research', role: 'Analyst',   score: 90 },
  { id: '5', name: 'Edsger Dijkstra', team: 'Platform', role: 'Architect', score: 84 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name', accessorKey: 'name', header: 'Name' },
  { id: 'team', accessorKey: 'team', header: 'Team' },
  { id: 'role', accessorKey: 'role', header: 'Role' },
  { id: 'score', accessorKey: 'score', header: 'Score', sortFn: 'basic' },
]
const editable = columns.map((c) => c.id === 'score' ? { ...c, meta: { type: 'number', editable: true } } : c)
export default function App() {
  const [rows, setRows] = React.useState(seed)
  return (
    <BstTableMui data={rows} columns={editable} getRowId={(r) => r.id}
      enableEditing enableUndoRedo showUndoRedo onDataChange={setRows} />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	custom feature (needs onDataChange)
Status	✅ done (Phase 3)
Since	v0.6.0
Settings sheet	Editing

Undo / redo of committed data changes — cell edits, paste, and row add/delete/duplicate. Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes; adapters also render Undo/Redo buttons. Snapshot-based, so it needs onDataChange. Default: false (opt-in).

Enable it

<BstTableMui
  data={rows}
  columns={columns}
  enableUndoRedo
/>

Swap BstTableMui for BstTableShadcn (and the CSS import) for the shadcn skin — same props.

Options

Option	Notes
onDataChange	undo/redo is snapshot-based and replays through your data setter

Spec coverage

Spec codes (A1, C2, X8, …) are Bst-Table's internal requirement IDs from the capability matrix; P0–P2 mark the delivery phase. They are traceability tags, not part of the public API.

• C5 · Shortcuts (arrows/undo-redo) — ✅ built. P3 — nav + enableUndoRedo