Codemo Playground
  • Getting Started
  • General UI
  • Dynamic UI
    • Waiting
    • Hover
    • Toast notification
    • Dialogs
    • Data Table
  • Browser Interactions
  • Storage & State
  • API
  • Beehive
Back to Home
Dynamic UI

Data Table

Practice interacting with paginated tables, counting rows across pages, and validating dynamic content updates.
Find Row by Unique Text
Locate row 5 by employee name and validate the department in the footer.
Employee IDNameDepartmentSalaryStatusActions
No data

Target employee:

Find Row by Row Position
Locate row 7 by position and validate the employee name in the footer.
Employee IDNameDepartmentSalaryStatusActions
No data

Target row position: 7

Click Action Button
Click the row 3 edit button and verify the action is counted in the footer.
Employee IDNameDepartmentSalaryStatusActions
No data

Target row: (row 3)

Edit count: 0

Click Context Menu Action
Right click the row 3 menu trigger and select Edit from the context menu.
Employee IDNameDepartmentSalaryStatusActions
No data

Target row: (row 3)

Edit count: 0

Delete Row
Delete row 7, confirm the modal, and verify the row count decreases in the footer.
Employee IDNameDepartmentSalaryStatusActions
No data

Target row to delete: (row 7)

Deleted row: (none)

Remaining rows: 0

Count Total Rows
Count all rows across pagination and validate the total
Employee IDNameDepartmentSalaryStatusActions
No data
Count Total Rows by Condition
Count the Active status rows across pagination and validate the total
Employee IDNameDepartmentSalaryStatusActions
No data
Sort by Column
Sort by Salary column, then validate the highest and lowest salary values.
Employee IDNameDepartmentStatusActions
No data