Suspect Ledger · Sortable Data Tables

A sortable data table (numbers sort numerically, names lexicographically) and an actions table whose Edit/Dismiss links mutate rows.

Ten suspects, three sortable columns, one lied about their debts. Elementary.

Sortable Data Tables is a medium Data & Files challenge on Fun UI Playground. A sortable data table (numbers sort numerically, names lexicographically) and an actions table whose Edit/Dismiss links mutate rows. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “tables-”, and the techniques it exercises are read table cells, click-to-sort headers, assert sort order, row action links.

At a glance

Category
Data & Files
Difficulty
medium
Teaches
read table cells · click-to-sort headers · assert sort order · row action links
Backend
None — runs entirely in the browser
Locators
Stable id and data-testid, prefixed tables-

Selectors on this page

LocatorWhat it is
table#tables-ledgerLedger: table#tables-ledger with sortable <th> (aria-sort cycles none → ascending → descending)
table#tables-actionsActions table: table#tables-actions — Edit toggles the row into inline-edit mode, Dismiss removes the row

Frequently asked questions

How do I assert that a table is sorted correctly?

Click the sortable <th> in table#tables-ledger — aria-sort cycles none → ascending → descending — then read the column via data-testid="tables-cell-<column>" and compare the extracted values. Numeric columns sort numerically, names lexicographically.

How do I read a specific table column reliably?

Use the per-cell test ids rather than positional nth-child, so reordering a column cannot silently change what the assertion reads. The ledger's ten rows are deterministic, and the actions table's Edit and Dismiss links mutate rows for the mutation case.

More Data & Files

Updated

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.