Responsive data tables
Review a table with long names and changing records
Real data stresses width, identity and navigation. Approve the complete interaction rather than a tidy screenshot of short sample rows.
In this article
Establish the task and structure
Ask which fields people compare and which actions they perform most often. Determine whether the mobile design preserves that task through a table, summary or detail path.
Inspect semantic headers and the table's accessible name. If the implementation uses an interactive grid, verify its keyboard model rather than assuming ordinary table navigation applies.
Check that sort controls expose their current state and that row actions have enough context to identify their target.
Challenge identity and selection
Select records, sort, paginate and change filters. Confirm that selection follows stable IDs and that hidden selections are either cleared deliberately or explained.
Read the wording for Select all and the bulk-action confirmation. It must distinguish the current page from all matching records when both are supported.
Change a selected record's eligibility on the server before acting. Verify current authorisation and a comprehensible result for any rejected item.
Stress the layout in context
Use long names, empty values, large amounts and row-level errors. Open menus at the edges of the table's scrolling container and check for clipping.
At narrow widths and enlarged text, keep page-level overflow contained. Ensure any deliberately scrollable comparison region remains operable and that pinned columns do not cover the useful data.
Test loading and empty states. A missing result should explain whether the dataset is empty, the filter found nothing or the service failed.
Follow navigation and asynchronous updates
Open detail and return with browser Back. The useful query state should survive. Then delay an old filter response and confirm it cannot overwrite a newer result.
Inspect performance with representative data volume and cell complexity. Identify whether delays come from the query, payload or rendering before prescribing virtualisation.
Record approval evidence as tasks: find a record, compare required values, select the intended scope and complete an authorised action on desktop and mobile. A table that fits its container can still fail every one of those tasks.
Primary sources
W3C WAI: tables tutorialW3C APG: grid patternReferences checked 11 September 2026.