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 (⊕ <active sort> ⌄, 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
Created
Last activity
Assigned
Vehicle
Price
Pay Method
Term (mo)
Down
Payment
Source
Labels
Email
Phone
Alex Chen
Hot0d
06/28/26
20m ago
JM
2024 Subaru Outback#90455
$38,200
Finance
72
$3,000
$612
Vehicle Inquiry
VIP
alex.chen@outlook.com
(415) 555-0177
Devon Brooks
Warm4d
07/14/26
3h ago
KSTB
2023 Honda Accord Sport#48213
$28,750
Lease
36
$2,500
$489
CarGurus
VIPHot+1
devon.brooks@gmail.com
(415) 555-0132
Priya Nair
Warm1d
07/29/26
2h ago
SDKSTB
2022 Tesla Model 3#77120
$41,900
Cash
—
—
—
CarGurus
Repeat
priya.nair@gmail.com
(415) 555-0161
Marcus Lee
Cold6d
05/03/26
6d ago
—
2019 Toyota RAV4 LE#31902
$22,400
Finance
72
$3,000
$744
Website
Trade-In
marcus.lee.longaddress@dealershipmail.com
(415) 555-0140
Rob Delgado
—
08/04/26
12m ago
KS
None
—
—
—
—
—
Credit Application
—
rob.delgado@outlook.com
(415) 555-0188
A row is a deal — default order Name(sticky) · Stage · Score · Created · Last activity · Assigned · Vehicle · Price · Pay Method · Term · Down · Payment · Source · Labels · Email · Phone (sixteen columns, 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". Created is a compact date and is never heat-colored — a creation date is a fact, not a freshness signal — and never blank. Pay Method renders Cash, Finance or Lease as plain text: we color the value, not the cell, and Stage is the single documented tint exception. Payment is the monthly figure, right-aligned like Price; a Cash deal shows an em-dash, because a cash deal has no monthly payment and its total already lives in Price. Term is a bare integer of months (the unit lives in the header) and Down is currency, both right-aligned with Price and Payment. The four deal-terms columns read in the order a desk manager says them out loud — “Finance, 72 months, three thousand down, six-twelve a month” — so Payment stays last as the outcome of the three before it. A Cash deal em-dashes Term, Down and Payment: only Price is real on a cash deal. A deal that was never desked em-dashes all four.
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.