Sample Post

PRACTICE FORM

HTML • CSS • JS

DataGrid Playground

Practice web table automation with pagination, sorting, row selection, add row and delete selected actions.

Web Table With Pagination

Total Records: 100   |   Rows per page: 10   |   Pages: 10

0 selected

Showing 1–10 of 100

Locator Details

Table Locators

id = userDataTable css = #userDataTable css = [data-testid='user-data-table'] css = #tableBody tr css = tbody[data-testid='table-body'] tr xpath = //table[@id='userDataTable']

Pagination Locators

id = nextPageBtn id = prevPageBtn css = [data-testid='next-page-button'] css = [data-testid='previous-page-button'] css = [data-testid='page-number-2'] xpath = //button[@data-testid='next-page-button']

Playwright Locators

page.getByTestId('user-data-table') page.getByTestId('next-page-button').click() page.getByTestId('sort-username-button').click() page.locator('#tableBody tr').nth(0) page.getByTestId('select-all-checkbox').check()