Table practice · Admin grid

Sortable admin table

24 employees, sortable by every column, filtered by name/role, paginated 8/16/24 per page, with row selection and a bulk-delete bar. Each row exposes data-testid="row-{id}" and each header has aria-sort reflecting current state.

Employees · 24 total

Click a header to sort

	Name	Role	Email	Project	Status	Joined

id=admin-table · search · role-filter · status-filter · page-size · select-all · bulk-delete · pager-nav · page-summary data-testid=admin-table · admin-tbody · th-{column} · row-{id} · cell-{column} · page-{n} · prev-page · next-page headers=role=button · aria-sort=ascending/descending/none

No interaction yet — click a header, type a search, or change page.

What students should practise

Click th-joined twice and assert the column flips ascending → descending via aria-sort.
Type into the search and assert the row count drops.
Set page size to 16 and walk to page-2; assert page-summary reads "Showing 17–24 of 24".
Click select-all and assert the bulk-bar appears with the right count.
Pick a row by name (row-{id}) and read every cell into an object.

Playwright solutionSort, filter, paginate, select. Show solution

// 1) Sort by Joined date — flip twice, assert aria-sort
const joined = page.getByTestId('th-joined');
await joined.click();
await expect(joined).toHaveAttribute('aria-sort', 'ascending');
await joined.click();
await expect(joined).toHaveAttribute('aria-sort', 'descending');

// 2) Filter + assert row count
await page.getByTestId('filter-search').fill('priya');
await expect(page.getByTestId('admin-tbody').locator('tr')).toHaveCount(1);

// 3) Pagination
await page.getByTestId('filter-search').fill('');
await page.getByTestId('page-size').selectOption('16');
await page.getByTestId('page-2').click();
await expect(page.getByTestId('page-summary'))
  .toHaveText('Showing 17–24 of 24');

// 4) Bulk select
await page.getByTestId('page-size').selectOption('8');
await page.getByTestId('page-1').click();
await page.getByTestId('select-all').check();
await expect(page.getByTestId('bulk-count')).toHaveText('8 selected');

// 5) Pluck a row's cells into an object
const row = page.getByTestId('row-emp-1003');
const cells = {
  name: await row.getByTestId('cell-name').innerText(),
  role: await row.getByTestId('cell-role').innerText(),
  email: await row.getByTestId('cell-email').innerText()
};