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
enableEditingandenableCellSelection— 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} />
)
}
Overview
| Layer | enable* (engine, resolved in useBstTable) |
| Type | boolean |
| Default | false |
| Maps to | custom — 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 |
| Since | v0.42.0 |
| Settings sheet | Editing |
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
BstTableMuiforBstTableShadcn(and the CSS import) for the shadcn skin — same props.
Behavior & interactions
- Requires
enableEditing,enableCellSelectionto 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;P0–P2mark 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