Systems

Tables that survive 10,000 rows

You will not render 10,000 rows, and you should not. The craft is in what you do instead, and being honest about it.

Advanced1 min read (computed · recorded 9)updated 2026-09-12tablesperformancevirtualisation

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Key takeaways

— Render the window; print 'showing 20 of 10,000' to stay honest.
— Sort on the server past a few hundred rows; keep state in the URL.
— Empty result and failed load get different words.

Render the window, state the truth

Virtualisation renders the visible window plus a buffer; the scrollbar lies by design and the lie is fine — as long as the row count and the total are printed somewhere real. A table that says 'showing 20 of 10,000' has told the truth; one that just scrolls has not.

Sorting is a database question

Client-side sorts beyond a few hundred rows are a slow re-render wearing a chevron. Sort on the server, or sort a pre-sorted index. The catalog's sortable-table pattern marks aria-sort and moves state to the URL, so a sorted view is a link, not a memory test.

Sticky first column, and only the first — sticky everything is sticky nothing.
Row expansion: one open at a time, Escape closes, the row announces its state.
Empty table: the empty-state trio's third case is a failed load, not an empty result. Different words.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Sortable Table (aria-sort)practice Two-Column Diff Viewpractice Tree Tablepractice

Keep learning

All guides Try the interactive Lab