@bimetal/table-svelte-components

The default Svelte 5 table / data-grid for BIMETAL — a thin binding over the canonical @bimetal/table-headless controller. Every interaction decision (sort cycling, inline edit parse/commit, selection, undo, keyboard semantics) lives in the controller; this component only renders the canonical .bm-table* DOM, registers the window key forwarder and normalizes keyboard events. It is behaviorally identical to the React port and shares the same DOM classes and CSS (@bimetal/table-themes).

Install

npm i @bimetal/table-svelte-components

Usage

<script lang="ts">
  import { Table } from '@bimetal/table-svelte-components';
  import '@bimetal/table-svelte-components/styles';
  import { createTableStore, createRow } from '@bimetal/table-data';

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

  const config = {
    columns: [
      { id: 'name', header: 'Name', type: 'text' as const },
      { id: 'qty', header: 'Qty', type: 'number' as const },
      { id: 'active', header: 'Active', type: 'boolean' as const },
    ],
  };
</script>

<Table {store} {config} />

Props

| Prop | Type | Default | Description | | ------------ | ----------------------------- | ------- | ------------------------------------------------------------------------ | | store | TableStore | — | The row store. Immutable after mount (the controller is created once). | | config | TableConfigInput | — | Column schema + locale overrides, merged with the defaults. | | darkMode | boolean | false | Apply the dark token set (data-theme="dark"). | | title | string | — | Optional toolbar heading. Omitted → no heading is rendered. | | tag | string | — | Optional small toolbar tagline next to the heading. | | showSearch | boolean | true | Show the search box in the toolbar. | | onError | (err: unknown) => void | — | Surfaces infrastructure errors (a domain rejection becomes an undo toast). |

License

Apache-2.0