Empty frame — header + 4 rows (hairlines · em-dash empties · row hover)
Name
Status
Vehicle
Source
Score
The shell. Column widths are declared once on .sb-datatable (grid-template-columns via --dt-cols); each row is a subgrid spanning those tracks, so every cell + the header align to the same column in every row — no stagger, even with variable row heights. Cells have 16px horizontal padding and a 1px gray-06 vertical separator between columns (last cell in a row has none). Text cells wrap (rows grow to fit); atom + number cells (.sb-dtcell--nowrap, --num) stay single-line. Per-cell hover = gray-07 on populated cells; em-dash, Stage, and Status cells are excluded. Empty cells render a muted em-dash. Reused atoms drop into .sb-dtcell.
Compact — 40px rows
Name
Status
Vehicle
Score
.sb-dtrow--compact drops the row to 40px (default 48px) — the board's compact-density twin, applied per row incl. the header.
Horizontal scroll — sticky header + sticky first column
Name
Status
Vehicle
Source
Owner
Created
Score
Both stickies inside the overflow-x frame: the .sb-dthead pins to the top on vertical scroll (gray-07), and .sb-dtcell--sticky pins the first column to the left on horizontal scroll with a right-edge shadow (2px gray-06) for the scroll-overlap. Scroll the frame both ways — Name and the header stay put. Sticky cells inherit their row's background so the hover/white/gray-07 states carry across the freeze.
Typed cells — each cell is an existing atom in a .sb-dtcell
Cell type
Atom in the cell
Name
Devon Brooks
Assigned
KSTBJM+2
Score
Warm4d
Labels
VIPHotRepeat+1
Vehicle
2023 Honda Accord Sport#48213$28,750
Source
CarGurus
Last activity
3h ago
Price
$28,750
Each typed cell is an existing atom vertically centered in a .sb-dtcell — no new cell styling. Name = the .nm/.sub truncation stack (NO idx gutter, NO customer avatar — customers never have avatars), sticky-left. Assigned = .sb-avgroup s24 STAFF avatars + "+N" (staff, so avatars are fine). Score = the .sb-embergrid element dropped flex:none as-is. Labels = .sb-tag--* chips + "+N" overflow. Vehicle = .sb-dealrow (the short deal row — NOT the 80px .sb-veh thumb row). Source = .ibx family icon + .srcname (raw leadSource in the tooltip). Last activity = the .ago colored age. Price = right-aligned .sb-dtcell--num. Nullable cells → the em-dash.
Control bar — two-state view toggle (Board|Table)
View + sort controls. The table's controls live in the shared header band, never in the table itself. The Table⇄Board view switch is a two-state .sb-msel chip in the quick-filter .sb-mselbar (fa-table-columns/fa-table-cells; the chip always names the CURRENT view — blue .on only in table state). Sort is GLOBAL and menu-driven — there is no header-click sorting. Desktop: a labeled .sb-msel dropdown (⊕ ⌄, wrapped in span.sb-sortwrap) right-aligned in the band, under the pagehead Add. Mobile: the same control as an icon-only chip, just left of Filters. Sort renders in table view only (body:not(.table-mode) .sb-sortwrap{display:none}). The menu is a standard .sb-popover (min-width 184px, gray-06 bg, gray-05 hairlines and hover) with four .sb-menuitem entries, verbatim and in order: Manual Order (fa-arrow-down-arrow-up, the default, .is-selected) · Lead Score (fa-fire) · Most Stale (fa-hourglass-half) · Vehicle (A-Z) (fa-car). Every item carries a .ck check, hidden except on .is-selected. The active sort echoes as the quiet .sortcaret on that one column header; Manual Order is not a real sort, so it shows no caret anywhere.
Composed row — a row is a deal
Name
Stage
Score
Last activity
Assigned
Vehicle
Price
Source
Labels
Email
Phone
Alex Chen
Hot0d
20m ago
JM
2024 Subaru Outback#90455
$38,200
Vehicle Inquiry
VIP
alex.chen@outlook.com
(415) 555-0177
Devon Brooks
Warm4d
3h ago
KSTB
2023 Honda Accord Sport#48213
$28,750
CarGurus
VIPHot+1
devon.brooks@gmail.com
(415) 555-0132
Priya Nair
Warm1d
2h ago
SDKSTB
2022 Tesla Model 3#77120
$41,900
CarGurus
Repeat
priya.nair@gmail.com
(415) 555-0161
Marcus Lee
Cold6d
6d ago
2019 Toyota RAV4 LE#31902
$22,400
Website
Trade-In
marcus.lee.longaddress@dealershipmail.com
(415) 555-0140
Rob Delgado
12m ago
KS
None
Credit Application
rob.delgado@outlook.com
(415) 555-0188
A row is a deal — default order Name(sticky) · Stage · Score · Last activity · Assigned · Vehicle · Price · Source · Labels · Email · Phone (triage front-loaded, contact detail last). Every non-empty, non-Stage cell has its own hover (gray-07 + cursor:pointer) and is its own click target (v1 destinations = read-and-open); em-dash cells and the Stage cell (which keeps its .sb-statusdd dropdown) do not hover. Stage is the ONE full-cell tinted column (documented exception to "color the value, never the cell"): a full-bleed tint of the deal processingStatus hue at ~14% with the picker at full chroma; nullable → untinted em-dash. sort is global and menu-driven from the control band (see the controls nugget); the quiet .sortcaret marks the one sorted column, and the authored default (Manual Order) shows none. Text cells wrap; atom + number cells nowrap; Labels is the sole 1fr column; Assigned caps at 3 + "+N".
Compact view — fewer fields (Name · Stage · Score · Vehicle · Assigned)
Name
Stage
Score
Vehicle
Assigned
Alex Chen
Hot0d
2024 Subaru Outback
JM
Devon Brooks
Warm1d
2023 Honda Accord Sport
TBRK
Marcus Lee
Cold6d
2022 Toyota RAV4
JM
Compact currently lives on the board only — the chip hides in table view. The reduced-column table (Name · Stage · Score · Vehicle · Assigned) is spec’d here but not yet wired.
Numeric cell — right-aligned tabular-nums
Name
Score
Days
62
4
8
120
.sb-dtcell--num right-aligns with tabular-nums so digits align on the decimal — the frame slot for future numeric atoms (score %, day counts).
Composed row — a row is a CONTACT (Customers table)
Name
Status
Score
Last activity
Assigned
Vehicle
Source
Labels
Email
Phone
Created
Priya Nair
Warm1d
2h ago
JM
2024 Jeep Wrangler#W2214
CarGurus
VIPRepeat
priya.nair@email.com
(313) 555-0142
05/31/24
Devon Brooks
Hot0d
5h ago
KSTB2
2025 Toyota Land Cruiser#T8891+1
Website
Hot
devon.brooks@email.com
(313) 555-0198
05/28/24
Marcus Lee
6d ago
RD
2023 Ford Bronco#F1180
AutoTrader
Trade-InFinance+2
marcus.lee.longaddress@dealership.com
(313) 555-0090
05/21/24
Rob Delgado
Cold2d
1d ago
Walk-In
rob.delgado@email.com
(313) 555-0177
05/14/24
Alex Chen
Warm3d
9d ago
JMKS3
2024 Honda Accord#H4402
Phone
Repeat Buyer
alex.chen@email.com
(313) 555-0165
04/30/24
Wes Colby
TB
DMS Import
wes.colby@email.com
(313) 555-0111
03/02/24
A row is a CONTACT (customer-backed) — order Name(sticky) · Status · Score · Last activity · Assigned · Vehicle · Source · Labels · Email · Phone · Created. NO customer avatars (names only). Status = the 7 locked seed defaults (New orange · Active green · Scheduled blue · Showroom purple · Closed grey · Nurture yellow · Bad red), tint keyed by COLOR (the Stage-exception applied to Contacts). Dealers reorder + add custom statuses; name+color of the 7 are immutable. Sort is GLOBAL with REAL server sorts: Recently Updated (default, so NO column caret) · Alphabetical · Lead Age · Unseen Activity · Deal Score. Unseen Activity is backed by unreadAt, NOT the Last-activity column, so it too runs caret-less. Nullable cells → em-dash.
Status — CHIP variant (fallback ruling)
Name
Status
Score
Priya Nair
Warm1d
Devon Brooks
Hot0d
Marcus Lee
Status — chip variant. The same statuses as the NORMAL bordered .sb-statusdd chip (compact colored dropdown, cell untinted) — the alternative to the full-bleed tinted cell above. Both are laid side by side for a ruling: full-bleed tint reads more Monday-like and scans as a color field down the column; the chip is quieter and matches the in-app pill. Ruling pending.