@bimetal/table-vanilla-components

The zero-framework table / data-grid for BIMETAL — a thin binding over the canonical @bimetal/table-headless controller, rendered with plain DOM (no React/Vue/Svelte/Angular). A peer of the table-{react,vue,svelte,angular}-components packages and behaviourally identical to them. Every interaction decision (sort, inline edit, selection, undo, the keyboard semantics, input policy) lives in the headless controller; this package owns only the DOM: forwarding a normalised keydown, reconciling the rendered tree to the controller snapshot, and preserving focus + caret across the rebuild.

Features

• Inline cell editing — click a cell to edit; a boolean column renders a checkbox, text/number a typed input. The controller owns commit/cancel.
• Column sort — click a sortable header to cycle none → asc → desc → none; aria-sort reflects the active direction.
• Selection, add/delete rows, undo — one-click undo toast, row delete, add a blank row from the toolbar.
• ARIA grid — role="grid"/columnheader/gridcell, aria-selected rows.
• Theming — light/dark token set shared with the framework packages.

Usage

import { mountTable } from '@bimetal/table-vanilla-components';
import '@bimetal/table-vanilla-components/styles';
import { createTableStore, createRow } from '@bimetal/table-data';

const store = createTableStore();
await store.dispatch(createRow({ id: 'r1', cells: { name: 'Alpha', qty: 3, active: true } }));

const handle = mountTable(document.getElementById('app')!, {
  store,
  config: {
    columns: [
      { id: 'name', header: 'Name', type: 'text' },
      { id: 'qty', header: 'Qty', type: 'number' },
      { id: 'active', header: 'Active', type: 'boolean' },
    ],
  },
  darkMode: false,
  // title / tag are optional toolbar text — omitted → nothing rendered.
});

// later
handle.destroy();

mountTable(target, options) returns a handle with getController() and destroy() (unsubscribe, remove the window listener, destroy the controller, clear the DOM).

Options

| option | type | default | notes | | ---------- | ------------------------ | ------- | ------------------------------------------------------------ | | store | TableStore | — | immutable after mount | | config | TableConfigInput | — | column schema + locale overrides | | darkMode | boolean | false | sets data-theme="dark" on the root | | title | string | — | optional toolbar heading; omitted → no heading | | tag | string | — | optional small toolbar tagline next to the heading | | onError | (err: unknown) => void | — | non-domain error channel (see the controller error contract) |

License

Apache License 2.0