Editor Primitives

Editable ERP grids need spreadsheet speed without losing domain validation. BC Grid keeps the editor protocol small: a column declares whether it is editable, chooses an editor, parses the typed value, validates it, and emits a commit event.

Built-in Editors#

@bc-grid/editors exports factories for the field types BusinessCraft screens use most:

• text,
• number,
• date,
• datetime,
• time,
• select,
• multi-select,
• autocomplete,
• checkbox.

import { numberEditor, textEditor } from "@bc-grid/editors";

const columns: BcGridColumn<JobRow>[] = [
  {
    field: "description",
    header: "Description",
    editable: true,
    cellEditor: textEditor,
    validate: (value) =>
      String(value).trim() ? { valid: true } : { valid: false, error: "Required" },
  },
  {
    field: "quantity",
    header: "Qty",
    align: "right",
    editable: true,
    cellEditor: numberEditor,
    valueParser: (input) => Number(input),
  },
];

Commit Lifecycle#

The edit lifecycle is:

1. User enters edit mode from pointer or keyboard.
2. The editor owns the temporary input value.
3. valueParser converts strings to the typed value when needed.
4. validate accepts or rejects the value.
5. onCellEditCommit receives the committed value.
6. Server-backed grids mark pending, settled, or rejected states.

Rejected values keep the cell in edit context and surface the validation message through the grid's error UI.

Async Lookups#

Autocomplete editors can fetch options as the user types. Pass the abort signal through to the request so stale lookups stop cleanly.

{
  field: "collector",
  header: "Collector",
  editable: true,
  cellEditor: autocompleteEditor,
  fetchOptions: async (query, signal) => {
    const response = await fetch(`/api/collectors?q=${query}`, { signal });
    return response.json();
  },
}

BusinessCraft Rule Boundary#

BC Grid validates the mechanics of editing. Business rules still live outside the grid:

• field requirements and allowed transitions belong in domain functions,
• server actions call those functions,
• grid validators mirror immediate client feedback where useful,
• the server result remains authoritative.

This split lets a screen feel fast while keeping legacy-compatible validation in the ported domain layer.

Choosing A Demo#

Start with the edit grid demo for commit flow. Use built-in editors for field coverage, validation for rejected commits, and undo/redo for local edit history.