Key insights
- Sort is a tri-state, not a toggle: ascending → descending → back to original. A binary flip loses the natural order forever; a third click should restore it.
- Numbers must line up — use tabular figures and right-align numeric columns so every digit sits on the same grid. Proportional, left-aligned digits jitter and can't be compared at a glance.
- Freeze what you navigate by: keep the header sticky on vertical scroll and freeze the first column on horizontal scroll, each with a subtle shadow so labels never scroll out of reach.
- Treat density as a token, not a guess — one control switching row heights (e.g. 36 / 48 / 60px) gives a predictable rhythm. Zebra stripes help at comfortable spacing; collapse to a single hairline as rows compact.
- Make the whole row the selection target — full tint + an accent left bar + the checkbox — instead of a tiny checkbox-only hit area that's easy to miss.
- Signal partial selection with a select-all state that morphs empty → indeterminate (dash) → checked, so bulk actions read at a glance.
Do / Don't
- Do: Right-align numeric columns with tabular figures so values form a scannable vertical grid.
- Do: Keep the header sticky and freeze the first column so labels stay anchored while scrolling.
- Do: Expose row density as one token-driven control for consistent, predictable spacing.
- Don't: Ship a binary sort that strips the original order with no way back to natural sequence.
- Don't: Rely on a tiny checkbox-only hit target when the entire row could be clickable.
