v132 · CSS
Data Table Nav
A wide data table with ::scroll-button(inline-start) and ::scroll-button(inline-end) arrows for keyboard-accessible horizontal navigation. The native buttons are generated on the real scroll container, and the browser applies :disabled automatically at the scroll edges.
Native table scroll-button lab
selector parsing checking
generated content rule checking
disabled state rule checking
Repository comparison table
native ::scroll-button CSS enabled
| Repository | Language | Stars | Forks | Issues | PRs | Commits/mo | License | Last release | Contributors | Bundle MB | Release type |
|---|---|---|---|---|---|---|---|---|---|---|---|
| react | JavaScript | 222k | 45.2k | 1,247 | 86 | 42 | MIT | 2024-04 | 1,712 | 3.2 | stable |
| vue | TypeScript | 207k | 33.7k | 584 | 21 | 28 | MIT | 2024-03 | 456 | 2.7 | stable |
| angular | TypeScript | 95k | 25.1k | 1,032 | 143 | 117 | MIT | 2024-04 | 1,893 | 8.4 | LTS |
| svelte | JavaScript | 78k | 4.1k | 712 | 39 | 56 | MIT | 2024-04 | 634 | 1.8 | stable |
| next.js | TypeScript | 122k | 26.4k | 2,341 | 215 | 198 | MIT | 2024-04 | 3,102 | 12.6 | stable |
| remix | TypeScript | 29k | 2.5k | 263 | 28 | 31 | MIT | 2024-03 | 284 | 4.1 | stable |
| astro | TypeScript | 44k | 2.3k | 379 | 47 | 76 | MIT | 2024-04 | 521 | 2.9 | stable |
Pre-Chrome 132
Authors added real buttons, click handlers, scroll listeners, and disabled-state bookkeeping for every horizontally scrollable table.
Chrome 132+
The scroll container owns ::scroll-button(inline-start/end). CSS supplies the buttons and the browser owns their activation and :disabled edge state.