bc-grid
GitHub

Built-in editors

View source

bc-grid ships nine editors covering every common ERP cell type. Each is a factory that returns a typed BcCellEditor — drop one onto a column and you have a working in-place editor.

Row
Text
Number
Date
Datetime
Time
Select
Multi-select
Autocomplete
Checkbox
row-1
Cosmetic kit
12.50
2026-04-01
2026-04-01T09:30
09:30
draft
urgent
row-2
Steel beam
4250.00
2026-04-02
2026-04-02T14:15
14:15
review
vip, follow-up
row-3
Concrete mix
14.50
2026-04-03
2026-04-03T08:00
08:00
published

The full set

  • createTextEditor — single-line text input.
  • createNumberEditor — locale-aware numeric input with decimal control, step, min/max. Rejects non-numeric input.
  • createDateEditor / createDatetimeEditor / createTimeEditor — calendar / clock picker with keyboard nav. ISO-string commit value.
  • createSelectEditor — single-select dropdown (cmdk-backed Combobox under the hood). Options static or async.
  • createMultiSelectEditor — same shape, multi-value commit. Selected chips render in the cell.
  • createAutocompleteEditor — async fetch on every keystroke, debounced. The demo above wires a Promise-based fetch over a static city list.
  • createCheckboxEditor — boolean toggle. Commits on click, no Tab needed.

Why factories

Each editor is created by a factory function so options are baked in per-column. Same factory, two columns, different decimal counts — each column has its own settings. createNumberEditor({ decimals: 2 }) is independent from createNumberEditor({ decimals: 0 }). Default-export aliases like textEditor exist for the zero-config case (textEditor === createTextEditor()).

Custom editors

Build your own by writing a component that matches BcCellEditor<TRow, TValue> and exposing the same { Component, kind } shape. The grid handles mount, focus, escape, commit, and cleanup — you handle render and validation. Recipes: packages/bc-grid/docs/recipes/shadcn-editors.md.