ListPage
The entity-list page shell from Attio — Reports / Sequences / Tasks / Notes.
The shared layout behind Attio's Reports, Sequences, Tasks, and Notes list views: a view-bar toolbar (leading Sort/Filter, a record count, trailing view-toggle / View settings / New), an optional dashed Favorites region, then column headers and time-grouped 52px rows. Rows are composed by the caller — wrap each in <ListRow> (a real <button> when onClick is given). Pair with Button, Badge (dot for status), Avatar, and EmptyState.
Preview
Usage
import { ListPage, ListRow, Button, Badge } from "crisp";
<ListPage
count="2 sequences"
leading={<Button intent="neutral" size="sm">Sort</Button>}
trailing={<Button intent="primary" size="sm">New sequence</Button>}
favorites={<EmptyState title="Favorites" description="…will appear here" />}
columns={[{ label: "Sequence" }, { label: "Status" }]}
groups={[
{
id: "week",
label: "Created last week",
count: 2,
rows: rows.map((r) => (
<ListRow key={r.id} onClick={() => open(r.id)}>
<span className="listpage-row-title">{r.name}</span>
<Badge tone="success" dot>Enabled</Badge>
</ListRow>
)),
},
]}
/>;API
| Prop | Type | Description |
|---|---|---|
leading | ReactNode | Left toolbar slot (Sort / Filter). |
trailing | ReactNode | Right toolbar slot (view toggle / settings / New). |
count | ReactNode | Record count, e.g. "8 records". |
favorites | ReactNode | Content of the dashed Favorites region (optional). |
columns | { label, icon? }[] | Column-header row. |
groups | { id, label, count?, rows }[] | Time-grouped sections; rows are <ListRow> nodes. |
emptyLabel | ReactNode | Shown when there are no groups. |