Table in box with pagination
When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.
Primary, pagination on the bottom. If the table does not fit on the screen, use pagination above the table aswell.Add control for page size
As a user
- I should be able to navigate by keyboard.
- As a user, I should be able to know that there is a pagination navigation when scanning the page with a screen reader.
- As a user, Each navigation item should be read as "Goto Page 1".
- As a user, I need to know which element is currently active.
- As a user, I need to navigate with Next and Previous links.
| Name | Age | Position | Office | Start date | Salary |
|---|---|---|---|---|---|
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 32 | Hitman | London | 01.01.1971 | 833 000 |
| Expandable | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 83312 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 12 | Hitman | London | 01.01.1971 | 3 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Bitcher | 38 | balls | London | 01.01.1971 | 1 000 |
| 123 123 123 | |||||
Default full pagination
Default full pagination, disabled arrows
Disabled buttons is shown when the data set is at the end, or beginning of the data set.