Tables and Pagination Page

A comprehensive set of mock table elements for automation and interview testing. Each table demonstrates a different feature or interaction pattern.

1. Basic Table

Basic Table

ID	Name	Email	Role
1	Alice	alice@example.com	Admin
2	Bob	bob@example.com	User
3	Charlie	charlie@example.com	Editor

2. Sortable Table

Sortable Table

ID	Name	Age
1	Alice	28
2	Bob	34
3	Charlie	22

3. Searchable/Filterable Table

Searchable/Filterable Table

ID	Name	City
1	Alice	New York
2	Bob	San Francisco
3	Charlie	Boston

4. Paginated Table

Paginated Table

ID	Name	Email
1	User 1	user1@example.com
2	User 2	user2@example.com
3	User 3	user3@example.com
4	User 4	user4@example.com
5	User 5	user5@example.com
6	User 6	user6@example.com
7	User 7	user7@example.com
8	User 8	user8@example.com
9	User 9	user9@example.com
10	User 10	user10@example.com

Page 1 of 5

5. Editable Table (Inline Editing)

Editable Table (Inline Editing)

ID	Name	Age
1	Alice	28
2	Bob	34
3	Charlie	22

6. Selectable Rows Table

Selectable Rows Table

ID	Name	Department
1	Alice	HR
2	Bob	Engineering
3	Charlie	Marketing

Selected: None

7. Table with Row Actions

Table with Row Actions

ID	Name	Status
1	Alice	Active
2	Bob	Inactive
3	Charlie	Active

8. Responsive Table (Horizontal Scroll)

Responsive Table (Horizontal Scroll)

ID	Name	Email	Address
1	Alice	alice@example.com	123 Main St, Springfield, USA
2	Bob	bob@example.com	456 Oak Ave, Metropolis, USA
3	Charlie	charlie@example.com	789 Pine Rd, Gotham, USA

Try viewing this table on mobile or resizing the window to see horizontal scrolling.

9. Expandable/Collapsible Rows Table

Expandable/Collapsible Rows Table

Name	Actions
Alice
Bob
Charlie

10. Grouped/Sectioned Table

Grouped/Sectioned Table

Group	Name
Admin
	Alice
User
	Bob
	Charlie
Editor
	Dana

11. Tree Table (Hierarchical Rows)

Tree Table (Hierarchical Rows)

Name
Root

12. Virtualized Table (Large Data, Only Visible Rows Rendered)

Virtualized Table (Large Data, Only Visible Rows Rendered)

ID	Name	Value
1	Item 1	418
2	Item 2	770
3	Item 3	49
4	Item 4	262
5	Item 5	409
6	Item 6	733
7	Item 7	495
8	Item 8	800
9	Item 9	823
10	Item 10	578
11	Item 11	133
12	Item 12	458
13	Item 13	744
14	Item 14	740
15	Item 15	801
16	Item 16	383
17	Item 17	174
18	Item 18	940
19	Item 19	602
20	Item 20	223

Rows 1 - 20 of 1000

13. Sticky Header Table

Sticky Header Table

ID	Name	Status
1	User 1	Active
2	User 2	Inactive
3	User 3	Active
4	User 4	Inactive
5	User 5	Active
6	User 6	Inactive
7	User 7	Active
8	User 8	Inactive
9	User 9	Active
10	User 10	Inactive
11	User 11	Active
12	User 12	Inactive
13	User 13	Active
14	User 14	Inactive
15	User 15	Active
16	User 16	Inactive
17	User 17	Active
18	User 18	Inactive
19	User 19	Active
20	User 20	Inactive

Scroll vertically to see the header remain visible.

14. Drag-and-Drop Rows Table

Drag-and-Drop Rows Table

Name	Drag
Alice	⇅
Bob	⇅
Charlie	⇅

Drag rows to reorder them.

15. Table with Custom Cell Renderers

Table with Custom Cell Renderers

Avatar	Name	Progress
🧑‍💼	Alice	80%
🧑‍💻	Bob	30%
🧑‍🔬	Charlie	55%

Avatars and progress bars are rendered as custom cells.

16. Table with Row Hover Actions

Table with Row Hover Actions

Name	Role	Actions
Alice	Admin
Bob	User
Charlie	Editor

Actions appear when you hover over a row.

17. Table with Row Expansion for Forms

Table with Row Expansion for Forms

Name	Email	Actions
Alice	alice@example.com
Bob	bob@example.com
Charlie	charlie@example.com

18. Table with Multi-level Sorting

Table with Multi-level Sorting

Name	Age	City
Alice	28	New York
Bob	34	San Francisco
Charlie	22	Boston
Dana	28	Boston

Click columns in order to sort by multiple fields. Click again to toggle ascending/descending.

19. Table with Export to CSV

Table with Export to CSV

ID	Name	Score
1	Alice	92
2	Bob	85
3	Charlie	78

Click Export to download table data as CSV.

20. Table with Loading/Skeleton State

Table with Loading/Skeleton State

ID	Name	Value

A skeleton loader is shown while data is loading.