Responsive data tables
Sort the table after selecting a row
Selection, refresh and mobile transitions expose mistakes that static screenshots miss. Test record identity while the visible order changes.
In this article
Create distinguishable synthetic records
Use jobs with similar names but different IDs, statuses and due dates. Include one very long name, a missing optional value and a record whose action is unavailable.
Select a known job, change sort direction and move to another page. Confirm that the selected identity remains correct and that the visible selection summary explains its scope.
Then change the filter so the selected record is hidden. The interface should follow its documented policy, either clearing it or clearly retaining it. A hidden selection must not become a surprise during a bulk action.
Refresh the data under the user's hands
While a row is selected, change its status on the server so it no longer qualifies for the proposed action. Trigger refresh and then attempt the action.
The server should validate current eligibility, and the interface should explain any rejected records. A stale enabled button does not grant authority to apply an outdated operation.
Also delay two filter requests so the older response arrives last. It must not replace the newer result set while the controls still display the latest filter.
Change the viewport during the task
Open a record on desktop, return, then use the mobile layout. Verify that filters, ordering and selected identities remain consistent if the application supports live resizing.
On a phone-sized viewport, reach filters, all row actions and pagination with touch and keyboard where supported. Open menus near the bottom and sides to expose clipping by overflow containers.
Enlarge text and inspect the long name. The row may grow or provide an accessible full-value path, but it should not cover adjacent controls or lose the identifying text entirely.
Inspect semantic and scroll behaviour
Use a screen reader to move through the table and confirm header context. For a mobile summary, ensure each value retains a visible or programmatic label.
Operate any horizontal scrolling region without a pointer and confirm focus remains visible. Check that the whole page does not become wider than the viewport merely because the table is wide.
Finish by opening a detail view and returning through browser Back. The useful list context should survive, so the person can continue the task rather than rebuilding the same query after every record.
Primary sources
W3C WAI: tables tutorialW3C WAI: reflowReferences checked 11 September 2026.