Table

Cần hiển thị data?
├─ Dữ liệu có cấu trúc rows/columns → Table
│   ├─ 3+ columns, sortable → Table (default)
│   ├─ Dense data, many rows → Table (compact) + Pagination
│   ├─ Alternating rows → Table (striped)
│   └─ Clean minimal → Table (borderless)
│
├─ Danh sách đơn giản (1-2 fields) → List Group
│   ├─ Settings-style → List Group (inset)
│   └─ Navigable items → List Group (link)
│
├─ Visual items (images, cards) → Card Grid
└─ Single data points → Stats / Metric cards

┌──────────────────────────────────────────────────┐
│  ☐  Name ▲        Email             Role   ...  │ ← Header (sticky, --muted bg)
├──────────────────────────────────────────────────┤ ← --border
│  ☐  John Smith    john@email.com    Admin        │ ← Row (--state-layer-hover on hover)
├──────────────────────────────────────────────────┤
│  ☐  Jane Doe      jane@email.com    Editor       │ ← Row (striped: --muted bg alternate)
├──────────────────────────────────────────────────┤
│  ☐  Bob Wilson    bob@email.com     Viewer       │
├──────────────────────────────────────────────────┤
│   ← Empty State component khi no data →         │ ← Slot: empty state
└──────────────────────────────────────────────────┘
│  ◀ 1 2 3 ... 10 ▶    Showing 1-10 of 100        │ ← Pagination slot

interface TableProps {
  variant?: 'default' | 'striped' | 'borderless' | 'compact';
  stickyHeader?: boolean;
  selectable?: boolean;
  sortable?: boolean;
  onSort?: (column: string, direction: 'asc' | 'desc') => void;
  onSelectRows?: (selectedIds: string[]) => void;
}

interface TableColumnProps {
  key: string;
  label: string;
  sortable?: boolean;
  width?: string | number;
  align?: 'left' | 'center' | 'right';
}

{/* Basic table with sorting */}
<Table variant="default" sortable stickyHeader>
  <TableHead>
    <TableRow>
      <TableHeader sortable>Name</TableHeader>
      <TableHeader sortable>Email</TableHeader>
      <TableHeader>Role</TableHeader>
      <TableHeader sortable align="right">Created</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    {users.map(user => (
      <TableRow key={user.id}>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
        <TableCell><Badge variant="primary">{user.role}</Badge></TableCell>
        <TableCell align="right">{user.createdAt}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

{/* Selectable striped table with pagination */}
<Table variant="striped" selectable onSelectRows={handleSelect}>
  <TableHead>
    <TableRow>
      <TableHeader type="checkbox" />
      <TableHeader>Order ID</TableHeader>
      <TableHeader>Amount</TableHeader>
      <TableHeader>Status</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    {orders.map(order => (
      <TableRow key={order.id} selected={selectedIds.includes(order.id)}>
        <TableCell type="checkbox" />
        <TableCell>{order.id}</TableCell>
        <TableCell>{order.amount}</TableCell>
        <TableCell><chip variant={order.statusVariant}>{order.status}</chip></TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
<Pagination currentPage={page} totalPages={10} onChange={setPage} />