DataTable

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"
    />
  );
}

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

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

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