ListView

┌─────────────────────────────────────────────────────┐
│ header                                              │
│ ┌───────────────────────────────────┐ ┌───────────┐ │
│ │ title                             │ │ [+ New]   │ │
│ │ description                       │ │           │ │
│ └───────────────────────────────────┘ └───────────┘ │
├─────────────────────────────────────────────────────┤
│ toolbar                                             │
│ ┌─────────────┐ ┌────────┐ ┌────────┐ ┌──────────┐ │
│ │ 🔍 search   │ │ Status │ │ Type   │ │ Sort  ▾ │ │
│ └─────────────┘ └────────┘ └────────┘ └──────────┘ │
├─────────────────────────────────────────────────────┤
│ bulk-actions (when items selected)                  │
│ │ ☑ 3 selected │ [Delete] [Export] [Archive]       │
├─────────────────────────────────────────────────────┤
│ table                                               │
│ ┌───┬────────────┬──────────┬────────┬───────────┐ │
│ │ ☐ │ Name       │ Status   │ Date   │ Actions   │ │
│ ├───┼────────────┼──────────┼────────┼───────────┤ │
│ │ ☐ │ Item 1     │ Active   │ Jan 1  │ ⋮         │ │
│ │ ☑ │ Item 2     │ Pending  │ Jan 2  │ ⋮         │ │
│ │ ☐ │ Item 3     │ Active   │ Jan 3  │ ⋮         │ │
│ └───┴────────────┴──────────┴────────┴───────────┘ │
├─────────────────────────────────────────────────────┤
│ pagination                                          │
│ │ Showing 1-10 of 100 │    ← 1 2 3 ... 10 →        │
└─────────────────────────────────────────────────────┘

<ListView
  title="Users"
  description="Manage team members"
  items={users}
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    { key: 'role', header: 'Role', sortable: true },
    { key: 'status', header: 'Status', render: StatusBadge },
    { key: 'createdAt', header: 'Joined', sortable: true },
  ]}
  search
  searchPlaceholder="Search users..."
  filters={[
    { name: 'role', label: 'Role', options: ['Admin', 'Member', 'Guest'] },
    { name: 'status', label: 'Status', options: ['Active', 'Inactive'] },
  ]}
  sort={[
    { label: 'Newest', value: '-createdAt' },
    { label: 'Name A-Z', value: 'name' },
  ]}
  selection="multiple"
  bulkActions={[
    { label: 'Delete', action: 'delete', variant: 'destructive' },
    { label: 'Export', action: 'export' },
  ]}
  itemActions={[
    { label: 'Edit', action: 'edit' },
    { label: 'Delete', action: 'delete' },
  ]}
  pagination={{ page: 1, pageSize: 10, total: 100 }}
/>

<ListView layout="table" items={items} />  // Default table
<ListView layout="grid" items={items} />   // Card grid
<ListView layout="list" items={items} />   // Simple list