---
title: "Lists and tables · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/lists-and-tables
updated: 2026-10-20
licence: "All rights reserved"
---

# Lists and tables

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> 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.

**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`.

## Required

- [Never render thousands of rows](https://agentwranglers.se/playbook/app-ui/lists-and-tables/bounded-lists): Keep 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](https://agentwranglers.se/playbook/app-ui/lists-and-tables/server-sort-and-filter): When 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](https://agentwranglers.se/playbook/app-ui/lists-and-tables/sortable-headers): Put a button inside each sortable column header, and set `aria-sort` on the header of the sorted column only.
- [Key rows by their ID](https://agentwranglers.se/playbook/app-ui/lists-and-tables/stable-row-keys): Key every rendered list item by the record's stable ID, never by its position in the list.

## Recommended

- [Load more with a button](https://agentwranglers.se/playbook/app-ui/lists-and-tables/load-more-button): Load 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](https://agentwranglers.se/playbook/app-ui/lists-and-tables/grid-keyboard): Keep 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](https://agentwranglers.se/playbook/app-ui/lists-and-tables/bulk-selection): When people select all rows, say whether that means this page or every matching record, and show the count before any bulk action.

- Previous: [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)
- Next: [Feedback and dialogs](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs)
- [All chapters](https://agentwranglers.se/playbook/app-ui)