List (table)

When to use it

CRUD entry point for any resource (users, projects, invoices, tickets).

• Filter to result set in <5s
• Bulk select 10+ items in <10s
• Server-side pagination

Layout regions

header

sidebar

main

page-header

Title + new button + breadcrumb

toolbar

Search + filter chips

table

bulk-bar

Sticky bar when ≥1 row selected

States

default

Rows present

loading

Filter changed

empty

No rows in entire table

partial

No rows match filter

error

Fetch failed

Example

Next.js — server-side params from URL, TanStack Table

// app/(app)/projects/page.tsx — Server Component
import { listProjects } from '@/lib/api.server'

export default async function ProjectsPage({ searchParams }) {
  const sp = await searchParams
  const page = Number(sp.page ?? 1)
  const sort = String(sp.sort ?? 'createdAt:desc')
  const q = String(sp.q ?? '')
  const { rows, total } = await listProjects({ page, pageSize: 25, sort, q })
  return (
    <DashboardLayout>
      <Stack size="4">
        <PageHeader title="Projects" cta={<Button asChild><Link href="/projects/new">New project</Link></Button>} />
        <Toolbar><Search defaultValue={q} /><FilterChips /></Toolbar>
        <ProjectsTable rows={rows} total={total} page={page} sort={sort} />
      </Stack>
    </DashboardLayout>
  )
}

The full List (table) pattern specifies 4 exact microcopy strings, 2 motion specs, 4 composition rules, 2 more code examples — all gated behind the full recipe. Get the full recipe.

Related