Skip to main content

Type-to-edit

Prop enableTypeToEdit — engine behaviour, default false.

Guide

When to use it

Give power users spreadsheet-style data entry — start typing on a selected cell to overwrite it, then Enter / Tab to commit and move on. No double-click required.

How it works

On a selected (not-yet-editing) cell, a printable keystroke opens the editor seeded with that character, overwriting the old value via the cell type's parse (so text and number cells both work). Enter commits and moves the active cell down; Tab commits and moves right (Shift reverses each).

<BstTableMui
data={rows}
columns={columns}
getRowId={(r) => r.id}
enableEditing
enableCellSelection
enableTypeToEdit
/>

Gotchas

  • Requires both enableEditing and enableCellSelection — a no-op without them.
  • It only seeds editors that expose parse (text / number) and ignores keys the cell type can't represent (a letter typed into a number cell).
  • Commit-and-move routes through the normal commit path — there's no separate write.

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: BstTableColumn<Row>[] = columns.map((c) =>
c.id === 'name' || c.id === 'score'
? { ...c, meta: { type: c.id === 'score' ? 'number' : 'text', editable: true } }
: c,
)
export default function App() {
const [rows, setRows] = React.useState(seed)
// Click a cell, then just start typing to overwrite it (spreadsheet-style).
return (
<BstTableMui data={rows} columns={editable} getRowId={(r) => r.id}
enableCellSelection enableEditing enableTypeToEdit onDataChange={setRows} />
)
}
Loading live example…

Overview

Layerenable* (engine, resolved in useBstTable)
Typeboolean
Defaultfalse
Maps tocustom — spreadsheet-style entry: a printable keystroke on a selected cell opens the editor seeded with that char (overwrite, via the cell type parse), then Enter commits & moves down / Tab commits & moves right (⇧ reverses each). Needs enableEditing + enableCellSelection (resolved on the runtime handle so it's true only with both on); a no-op otherwise. Seeds only non-overlay editors that expose parse (text/number) and declines keys the type can't represent (a letter in a number cell → NaN). Commit-and-move routes through the existing commitCell (no new write path). In settings ("Editing", requires both prereqs). Both adapters inherit it (engine-level behaviour)
Status✅ done
Sincev0.42.0
Settings sheetEditing

Type-to-edit — spreadsheet-style data entry layered on cell selection + editing. On a selected (not-yet-editing) cell: start typing a printable character to open the editor seeded with that character, overwriting the old value (via the cell type's parse, so text and number cells both work). Enter then commits and moves the active cell down; Tab commits and moves right (Shift reverses each). Needs both enableEditing and enableCellSelection — a no-op without them. Default: false (opt-in).

Enable it

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

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

Behavior & interactions

  • Requires enableEditing, enableCellSelection to be on — this flag is a no-op otherwise.
  • Type on a selected cell to overwrite (seeded via the cell type parse); Enter commits & moves down, Tab commits & moves right (Shift reverses). No-op without both prerequisites.

Spec coverage

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

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