building-tables

Use virtual scrolling with TanStack Virtual so only visible rows render in the DOM, keeping memory constant and scrolling at 60fps. For datasets above 10,000 rows, combine virtualization with server-side pagination and aggregation.

TanStack Table is a headless library around 15KB that gives full control over markup and styling, ideal for custom designs. AG Grid is a feature-complete solution with built-in grouping, pivoting, and Excel export, better for enterprise grids with millions of rows.

Client-side operations work well under 1,000 rows with sub-50ms response times. Between 1,000 and 10,000 rows, move sorting, filtering, and pagination to the server via API endpoints to keep responses under 200ms.

Use semantic HTML with caption, thead, tbody, and scope attributes, then apply the ARIA grid pattern with roles like columnheader and gridcell for interactive tables. Add keyboard navigation with arrow keys and live regions to announce sort and filter changes.

Four strategies work: horizontal scroll, transforming rows into cards, hiding lower-priority columns, or truncating content with expand-on-demand. The card stack pattern is most common for narrow screens.

Use the included export script or utilities that serialize row data to CSV with proper encoding, or the xlsx library to build Excel workbooks. For large exports, stream the output rather than building it in memory.