@bimetal/table-vue-components

The default Vue 3 table / data-grid for BIMETAL — a thin binding over the canonical @bimetal/table-headless controller. Every interaction decision (sort cycle, inline-edit lifecycle, selection, input policy, undo, keyboard semantics) lives in the headless controller; this package owns only the DOM: normalising keyboard events and rendering the canonical .bm-table* markup with ARIA grid roles.

Features

• Column sorting — header click cycles none → asc → desc → none; the active header reflects aria-sort and a directional glyph.
• Inline cell editing — click a cell to edit in place; boolean cells toggle a checkbox, text/number cells use a typed input. Enter commits, Escape cancels — both owned by the controller.
• Row selection, add & delete — select a row, add via the toolbar, delete via the per-row action button.
• Search, undo, theming — text search, one-click undo toast, light/dark token set from @bimetal/table-themes.

Usage

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

const store = createTableStore();
// …seed the rows…
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>

<template>
  <Table :store="store" :config="config" />
</template>

License

Apache-2.0