If there is a lot of data I can read all the data page by page of certain size instead of having to scroll constantly
Discussion
Currently, OurTable.js component doesn't have a pagination feature, and all data will be rendered in a long list. As you can see, users have to scroll the web page if we have a lot of data, which is not ideal.
The goal of this feature is to add pagination so that users will only see certain number of rows of data at a time and they can use pagination to see more if they want to, providing better user experience.
The mockup UI above shows what a pagination table look like.
Students can decide a default size for each page on their own. Our recommendation will be 10 entries per page.
There are many ways to implement this feature and we will leave it up to students on how to do this feature.
Acceptance Criteria
[ ] OurTable.js should be a generic React component that has pagination ability. When there are more rows of data than the default page size, pagination UI should be visible for our table UI.
[ ] Pagination feature should work as expected. When users go to next page or the previous page using the pagination feature, and data should be rendered correctly.
Implementation Todos
Frontend:
[ ] OurTable.js should have pagination ability. When there are more rows of data than the default page size, pagination UI should be visible for our table UI.
[ ] Pagination feature should work as expected. When users go to next page or the previous page using the pagination feature, and data should be rendered correctly.
Testing:
[ ] Frontend: When there are more rows of data than the default page size, pagination UI should be visible.
[ ] Frontend: When clicking on the pagination UI, users can go to the correct pages.
Have you updated the title?
As a...
user
I can...
paginate my table
So that...
If there is a lot of data I can read all the data page by page of certain size instead of having to scroll constantly
Discussion
Currently,
OurTable.jscomponent doesn't have a pagination feature, and all data will be rendered in a long list. As you can see, users have to scroll the web page if we have a lot of data, which is not ideal.The goal of this feature is to add pagination so that users will only see certain number of rows of data at a time and they can use pagination to see more if they want to, providing better user experience.
The mockup UI above shows what a pagination table look like.
Students can decide a default size for each page on their own. Our recommendation will be 10 entries per page.
There are many ways to implement this feature and we will leave it up to students on how to do this feature.
Acceptance Criteria
OurTable.jsshould be a generic React component that has pagination ability. When there are more rows of data than the default page size, pagination UI should be visible for our table UI.Implementation Todos
Frontend:
OurTable.jsshould have pagination ability. When there are more rows of data than the default page size, pagination UI should be visible for our table UI.Testing: