Table

<script>
  import { Table, TableColumns, type Column } from '@urbicon-ui/table';

  type Employee = {
    id: number;
    name: string;
    role: string;
    status: string;
    salary: number;
    joinedAt: string;
  };

  // Rows are keyed by `id` when they have one, by array index otherwise.
  const items: Employee[] = [
    {
      id: 1, name: 'Emma Wilson', role: 'Staff Engineer',
      status: 'active', salary: 142000, joinedAt: '2021-03-15'
    }
    // …
  ];

  // The annotation is what checks the accessors: with `Column<Employee>[]`,
  // a first argument that is not a key of the row is a type error. Without
  // it, nothing checks them.
  const cols: Column<Employee>[] = [
    TableColumns.userAvatar('name', 'Employee'),
    TableColumns.text('role', 'Role'),
    // StatusBadge knows eleven statuses: active, inactive, pending, online,
    // offline, processing, completed, failed, draft, published, archived.
    // Anything else reads "Unknown" until you name it here.
    TableColumns.status('status', 'Status', {
      statusMap: {
        'on-leave': { intent: 'warning', text: 'On leave', icon: true },
        offboarding: { intent: 'neutral', text: 'Offboarding', icon: false }
      }
    }),
    TableColumns.number('salary', 'Salary'),
    TableColumns.date('joinedAt', 'Joined'),
    // Every handler receives the row, and each button follows its own handler:
    // pass onView and the view button appears, leave onDelete out and no delete
    // button renders. The showView / showEdit / showDelete flags are for the
    // two exceptions — rendering a button you handle elsewhere, or hiding one
    // you do handle.
    TableColumns.actions('Actions', {
      onView: (employee) => {},
      onEdit: (employee) => {}
    })
  ];
</script>

<Table
  {items}
  columns={cols}
  cardsBelow="36rem"
  viewDefaults={{ pageSize: 6 }}
  enableSmartFilter={false}
/>