Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
Prevents layout shifts in sortable table headers by reserving space for the sort icon using `opacity` instead of removing it from the DOM. Includes hover and active states for discoverability.
Achieve elegant, instantly readable data tables with automatic zebra striping using CSS `nth-child(even)` and a subtle hover highlight. No manual row classes are needed, ensuring the pattern remains correct even when data changes.
This trick ensures numbers in a column align perfectly, especially decimal points, by using fixed-width digits. It contrasts the default 'proportional-nums' where digits like '1' are narrower than '0', causing a subtle wobble in price columns, with 'tabular-nums' for a precise, 'audited' look.