Row actions column
View sourceA pinned-right action column auto-injected by <BcEditGrid> and <BcServerGrid>. Edit / Delete / Discard ship by default; per-row gating via canEdit / canDelete keeps the chrome consistent without fragile cellRenderer code.
Use the three-dot menu in the pinned action column to edit or delete a row.No action yet
Try this
The action column lives at the right edge — pinned, auto-injected, and rendered as a compact row menu.
- Open the three-dot menu in the Actions column.
- Choose Edit order — fires
onEdit(row); the demo logs to the bar. - Choose Delete order — fires
onDelete(row)and removes the row from local state. - Delete order is disabled for active orders — that's
canDelete(row)in action. - Hover a row, then press Shift+E to invoke Edit, Shift+Delete for Delete — built-in keyboard shortcuts.
Why an injected column
Pre-BC Grid wrappers in bsncraft hand-rolled the same actions column over and over per grid — ~40 LOC each, all subtly different. Lifting it to the grid solves three problems at once: consistent visual + keyboard chrome across all grids, server-grid parity (the column ships on <BcServerGrid> too), and per-row gating colocated with the row data.
Available props
- onEdit / onDelete. Required (one or both) to mount the column. Each receives the row.
- canEdit / canDelete. Per-row gates returning boolean. Disabled menu items render but don't fire the handler.
- editLabel / deleteLabel. Custom menu item labels. Defaults "Edit" / "Delete".
- onDiscardRowEdits. Adds a Discard action that rolls back pending row edits — typically
(rowId) => apiRef.current?.discardRowEdits(rowId). - onInsertRow / onDuplicateRow.
<BcEditGrid>specific. Wires up insert + duplicate row affordances in the toolbar / context menu.
Keyboard shortcuts
- Shift+E — invoke Edit on the focused row
- Shift+Delete or Shift+Backspace — invoke Delete on the focused row