Primitives

DataTable

Config-driven table. Columns carry their own renderer, so the table stays generic over the row type.

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Latest published versions
Package	Version	Parity
@ilomee/aura-core	1.0.0	ok
@ilomee/aura-react	1.0.0	ok
@ilomee/aura-vue	1.0.0	behind

Latest published versions
Package	Version	Parity
@ilomee/aura-core	1.0.0	ok
@ilomee/aura-react	1.0.0	ok
@ilomee/aura-vue	1.0.0	behind

Latest published versions
Package	Version	Parity
@ilomee/aura-core	1.0.0	ok
@ilomee/aura-react	1.0.0	ok
@ilomee/aura-vue	1.0.0	behind

Latest published versions
Package	Version	Parity
@ilomee/aura-core	1.0.0	ok
@ilomee/aura-react	1.0.0	ok
@ilomee/aura-vue	1.0.0	behind

Code

A recipe is a composition of primitives, not one element — so there is no single snippet to copy. Build it from the classes below, or open the primitives it is made of.

Demo.tsx

import { Badge, Button, DataTable, type DataTableColumn } from '@ilomee/aura-react';

interface Release {
  pkg: string;
  version: string;
  status: 'ok' | 'behind';
}

const ROWS: Release[] = [
  { pkg: '@ilomee/aura-core', version: '1.0.0', status: 'ok' },
  { pkg: '@ilomee/aura-react', version: '1.0.0', status: 'ok' },
  { pkg: '@ilomee/aura-vue', version: '1.0.0', status: 'behind' },
];

const COLUMNS: DataTableColumn<Release>[] = [
  { key: 'pkg', header: 'Package' },
  { key: 'version', header: 'Version', align: 'end', width: '110px' },
  { key: 'status', header: 'Parity', render: (row) => <Badge tone={row.status === 'ok' ? 'success' : 'danger'}>{row.status}</Badge> },
];

export default function Demo() {
  return (
    <DataTable
      columns={COLUMNS}
      rows={ROWS}
      rowKey={(row) => row.pkg}
      actions={(row) => <Button variant="ghost">Publish {row.version}</Button>}
      caption="Latest published versions"
    />
  );
}

Demo.vue

import { DataTable } from '@ilomee/aura-vue';

A column renders through the scoped slot named after its key; column.render is still accepted for a render function.

Demo.svelte

import { DataTable } from '@ilomee/aura-svelte';

A column renders through column.cell, a Snippet<[Row, number]>.

Used as aura-data-table.

demo.component.ts

import { AuraDataTable } from '@ilomee/aura-angular';

Content inputs take a string or a TemplateRef.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
columns*	`DataTableColumn<Row>[]`	—	`{ key, header, render?, align?, width? }`.
rows	`Row[] \| null`	—
rowKey	`(row: Row, i: number) => string`	—
actions	`(row: Row) => ReactNode`	—
emptyLabel	`string`	`'No rows'`
caption	`ReactNode`	—

Name	Type	Default	Notes
columns*	`DataTableColumn<Row>[]`	—
rows	`Row[] \| null`	—
rowKey	`(row: Row, i: number) => string`	—
emptyLabel	`string`	`'No rows'`
caption	`RecipeContent`	—
cell-<key> / actionsslot	`Slot<{ row: Row; index: number }>`	—	Per-column cell and the row action cell.

Name	Type	Default
columns*	`DataTableColumn<Row>[]`	—
rows	`Row[] \| null`	—
rowKey	`(row: Row, i: number) => string`	—
actions	`Snippet<[Row, number]>`	—
emptyLabel	`string`	`'No rows'`
caption	`RecipeContent`	—

Name	Type	Default	Notes
columns*	`DataTableColumn<Row>[]`	—
rows	`Row[] \| null`	—
rowKey	`(row: Row, i: number) => string`	—
cells	`Record<string, TemplateRef<AuraCellContext<Row>>>`	—	A cell template per column key. Context is `{ $implicit: row, index }`.
actions	`TemplateRef<AuraCellContext<Row>>`	—
emptyLabel	`RecipeContent`	`'No rows'`
caption	`RecipeContent`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-table	base	Required. A modifier does nothing without it.
.aura-table__actions	element
.aura-table--empty	modifier