---
id: "2115745468202291282"
source: https://x.com/CollectUI/status/2115745468202291282
author: "Collect UI (@CollectUI)"
media: "video, 1200x1200, 5.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Clean Selectable Payroll Table

## Summary
A crisp white data table of contractors with columns for name, entity type and total pay, demonstrating row hover and multi-select: the pointer moves down the list, checking rows one by one, and the header checkbox switches to an indeterminate dash as soon as anything is selected. A good reference for restrained table styling where hover tint, checkbox state and tabular figures do all the work.

## Style
- Theme: light
- Mood: clean, calm, precise, professional
- Tags: data-table, multi-select, checkbox, row-hover, indeterminate-state, fintech, admin-ui
- Category: Components, Web app

## Palette
| Role | Hex |
|---|---|
| Background | #FFFFFF |
| Header row and hover | #F8F8F8 |
| Divider | #E7E7E7 |
| Checkbox border | #B2B1B1 |
| Secondary text | #686566 |
| Primary text and checked box | #141414 |

## Typography
- Cell text (names, entity, amounts): neo-grotesk sans, regular (400), sentence case, about 1.2% of the frame height (14px in a real UI). Closest free font: Inter 400 or Geist 400.
- Amounts: same sans with tabular figures; cents rendered slightly smaller and lighter than the whole amount (for example 52,340 then .00 at 85% size).
- Column headers (Name, Entity, Total pay): 12px regular in #686566.
- Search placeholder and Filters button: 14px, Filters in medium (500).

## Layout
- Square 1200x1200 frame, the table cropped by the right edge, starting about 5% from the left.
- Toolbar on top: a search input about 240px wide and a Filters button, both 32px tall, radius 8px, 1px #E7E7E7 border, 8px apart.
- Header row: #F8F8F8 fill, radius 8px, 36px tall.
- Body rows: 48px tall, 1px #E7E7E7 bottom dividers, columns at roughly 0, 40% and 70% of the table width.
- Left gutter: 16px checkbox then a 20px circular avatar and the name with an 8px gap.

## Elements
- Search field with magnifier icon and muted placeholder.
- Filters button with a three-line filter icon.
- Header checkbox: empty, then a black square with a white dash (indeterminate) once any row is selected.
- Row checkbox: 16px, radius 4px, 1.5px #B2B1B1 border; checked state solid #141414 with a white tick; a mid-press gray state appears for a frame.
- Avatar: 20px circular photo before each placeholder name.
- Hovered row: #F8F8F8 tint across the full width.

## Motion
- 0.2 to 1.2s: pointer moves down rows; each hovered row tints in about 100ms and untints as it leaves.
- 2.2s: a click checks a row; the checkbox fills black with the tick drawn in about 150ms; the header switches to indeterminate at the same moment.
- 3.2 to 5.2s: more rows get checked (four by the end); a pressed checkbox shows a brief gray fill before turning black.
- Linear ease-out for tints, no layout shift, no loop.

## Rebuild it
1. Data: an array of rows with `id, name, avatar, entity, total`; selection held in a `Set` in React state.
2. Table markup: `<table className="w-full text-[14px]">` with `thead tr` as `bg-[#F8F8F8] rounded-lg text-[12px] text-[#686566]` and body rows `h-12 border-b border-[#E7E7E7] hover:bg-[#F8F8F8] transition-colors duration-100`.
3. Header checkbox: set `indeterminate` via a ref when `0 < selected.size < rows.length`; checked when all.
4. Custom checkbox: `appearance-none size-4 rounded border-[1.5px] border-[#B2B1B1] checked:bg-[#141414] checked:border-[#141414]` with an SVG tick drawn by Motion `pathLength` 0 to 1 over 150ms.
5. Amounts: `tabular-nums`, split cents into a `span` with `text-[0.85em] text-[#686566]`.
6. Add `whileTap={{ scale: 0.9 }}` on the checkbox for the pressed feel.

## Generation prompt
A clean white web app data table of freelance contractors with a search field and filters button on top, a pale gray header row, columns for name with a small round avatar, entity type and total pay with tabular numbers, thin gray dividers; a cursor moves down the list and checks several rows, the checkboxes turning solid black and the header checkbox showing a dash; calm, precise, professional product UI.