Agent WranglersLists and tables
Long lists stay fast with paging or virtual scrolling. Sort and filter on the server, key rows by ID, and make tables work by keyboard and screen reader.
- Required 4
- Recommended 3
Required
Never render thousands of rows
RequiredKeep at most 200 rows in the page at once. Page long lists on the server, or render only the visible rows with a virtual list.
Sort and filter on the server
RequiredWhen a list is paged, sort, filter and search on the server across all records. Never sort only the rows already loaded.
Make sortable columns buttons
RequiredPut a button inside each sortable column header, and set
aria-sorton the header of the sorted column only.Key rows by their ID
RequiredKey every rendered list item by the record's stable ID, never by its position in the list.
Recommended
Load more with a button
RecommendedLoad further results with page links or a "Load more" button, not endless scrolling. After loading, move focus to the first new item.
Use grid keys only for editable grids
RecommendedKeep read-only tables as plain tables with normal Tab order. Add arrow-key movement, with one Tab stop, only to grids whose cells people edit or act on.
Say what select all selects
RecommendedWhen people select all rows, say whether that means this page or every matching record, and show the count before any bulk action.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/lists-and-tables.