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 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.