Table

Data table component with sorting, filtering, pagination, and row selection.

Structure

┌─────────────────────────────────────────────────────┐
│ root                                                │
│ ┌─────────────────────────────────────────────────┐ │
│ │ toolbar                                         │ │
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
│ │ │ filters             │ │ actions             │ │ │
│ │ │ [🔍 Search...     ] │ │ [+ Add] [⬇ Export] │ │ │
│ │ └─────────────────────┘ └─────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ table-container                                 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ table                                       │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ thead                                   │ │ │ │
│ │ │ │ ☐ │ Name ▼  │ Email     │ Role   │ Act │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ tbody                                   │ │ │ │
│ │ │ │ ☐ │ Jane Doe│ jane@...  │ Admin  │ ••• │ │ │ │
│ │ │ │ ☐ │ John Smi│ john@...  │ User   │ ••• │ │ │ │
│ │ │ │ ☐ │ Sarah Jo│ sarah@... │ Editor │ ••• │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ pagination                                      │ │
│ │ Showing 1-10 of 100    [◀][1][2][3]...[10][▶]  │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

Usage

Basic Table

<Table
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    { key: 'role', header: 'Role', sortable: true },
    { key: 'status', header: 'Status' },
  ]}
  data={users}
/>

With Selection and Actions

<Table
  columns={[
    { key: 'name', header: 'Name' },
    { key: 'email', header: 'Email' },
    {
      key: 'actions',
      header: '',
      render: (row) => (
        <DropdownMenu>
          <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
          <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
        </DropdownMenu>
      ),
    },
  ]}
  data={users}
  selectable
  onSelect={handleSelection}
/>

Custom Cell Rendering

<Table
  columns={[
    { key: 'name', header: 'Name' },
    {
      key: 'status',
      header: 'Status',
      render: (row) => <Badge variant={row.status}>{row.status}</Badge>,
    },
    {
      key: 'avatar',
      header: 'Avatar',
      render: (row) => <Avatar src={row.avatar} name={row.name} />,
    },
  ]}
  data={users}
/>

With Filtering

<Table
  columns={columns}
  data={data}
  filterable
  filters={[
    { key: 'status', type: 'select', options: ['Active', 'Inactive'] },
    { key: 'role', type: 'select', options: ['Admin', 'User', 'Editor'] },
  ]}
  onFilter={handleFilter}
/>

Style Variants

<Table striped />     // Alternating row colors
<Table bordered />    // Cell borders
<Table compact />     // Reduced padding
<Table stickyHeader /> // Fixed header on scroll

Empty State

<Table
  columns={columns}
  data={[]}
  emptyState={
    <div className="text-center py-8">
      <p>No users found</p>
      <Button>Add First User</Button>
    </div>
  }
/>

Table

On this page