Draft
Table page
A full list with search, filters and paging.
A full list of one kind of thing: invites, intros. A Back link, a header, optional tabs, then one glass card with a toolbar (search, filters) over a DataTable with paging.
Use it for
- Browse, search and act on a long list.
- The "see all" page behind a dashboard number or a profile section.
Built on this
| Screen | Route | Fit |
|---|---|---|
| Invites | /network/invites | Exact |
| Sharing | /network/sharing | Closest — two tables side by side |
| Your intros | /profile/intros | Exact |
| Intros with a contact | /contact/[refId]/intros | Exact |
| Intros with a member | /to/[username]/intros | Exact |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Your intros
Every intro you've made and received.
Anatomy
- Back link. "← Back".
- Header. 22px title and subtitle.
- Tabs. Optional: underline tabs on a divider line above the card, counts in muted 12px.
- Card. One big card: toolbar row (SearchInput left, filters right), then DataTable, then page numbers.
Measurements
| What | Value | From |
|---|---|---|
| Width | LAYOUT_WIDE (1600px) for a person's intros; 1280px for Invites and Sharing | Bridge OS; pick 2026-11-02 |
| Page padding (from the shell) | 16px phone · 24px from 640px · 32px from 1024px; 32px top | Bridge OS `(shell)/layout.tsx` |
| Back link | "← Back" (goes back), 13px semibold muted, 24px below | Bridge OS Organization, Invites, Sharing; pick 2026-11-02 |
| Page title | 22px Bold, 4px to a 14px --text-body subtitle, 24px below the header | Bridge OS (6 pages); pick 2026-11-02 |
| Cards | Big cards: 16px corners, 24px inside, 16px apart. A card whose content runs edge to edge has a header strip instead (28px icon square, 14px title) | Picks 2026-11-02 (corners, space, headers) |
| Toolbar row | 24px sides, 12px top and bottom, divider below | components.md → SearchInput placement |
| Paging | Page numbers (DataTablePagination) | Bridge OS Invites, Your intros; pick 2026-11-02 |
Responsive
| Width | What happens |
|---|---|
| Any width | The table keeps its column widths and scrolls sideways inside the card; the page never does. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Table | DataTableSkeleton with the real row height and pager | "No {things} yet" + what fills it | Couldn't load + Try again |
Do and don't
| Do | Don't |
|---|---|
| Search and filter on the server, and put them in the address. | Filter only the loaded page. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- There's no shared page header in Bridge OS: each page writes its title, subtitle and Back link inline (see App kit).
- Your intros titles itself at 16px with an icon; Invites uses filter chips as tabs; Sharing hand-builds its list, search and "Load more". All move to this shape.
- One page size is still to choose (Invites shows 50, Your intros 20).
Sources
- Survey of Bridge OS routes (2026-11-02)
- Bridge OS
invites-content.tsx,person-intros-view.tsx,sharing-table.tsx.