Data Table

npx shadcn@latest add https://brutallab.facilito.dev/r/data-table.json

'use client';

import { DataTable } from '@/components/ui/data-table';

export default function Demo() {
  const rows = [
    { name: 'Atlas', status: 'Active', count: 12 },
    { name: 'Bloom', status: 'Draft', count: 4 },
    { name: 'Cedar', status: 'Active', count: 18 },
    { name: 'Delta', status: 'Active', count: 7 },
    { name: 'Echo', status: 'Draft', count: 2 },
  ];
  return (
    <DataTable
      data={rows}
      columns={[
        {
          id: 'name',
          header: 'Name',
          value: (row) => row.name,
          sortable: true,
        },
        { id: 'status', header: 'Status', value: (row) => row.status },
        {
          id: 'count',
          header: 'Components',
          value: (row) => row.count,
          sortable: true,
        },
      ]}
      getRowId={(row) => row.name}
      caption="Workspace component usage"
      pageSize={3}
    />
  );
}