feat/TablePagination - Table with Pagination #1353
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate Limit Exceeded@dhavalveera has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 3 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughThis update introduces pagination functionality to the Changes
Possibly related issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (5)
- packages/ui/src/components/Table/Table.stories.tsx (2 hunks)
- packages/ui/src/components/Table/Table.tsx (2 hunks)
- packages/ui/src/components/Table/TablePagination.tsx (1 hunks)
- packages/ui/src/components/Table/index.ts (1 hunks)
- packages/ui/src/components/Table/theme.ts (1 hunks)
Additional comments not posted (9)
packages/ui/src/components/Table/index.ts (1)
13-14: The export statements forTablePaginationand its related type definitions are correctly implemented and follow the existing pattern for component exports in the library.packages/ui/src/components/Table/Table.tsx (3)
13-13: Correctly importedTablePaginationand its theme, ensuring the new pagination functionality is integrated with theTablecomponent.
21-21: Successfully updated theFlowbiteTableThemeinterface to include pagination settings, enhancing the theme's flexibility and supporting the new pagination feature.
61-61: Integration ofTablePaginationinto theTablecomponent's export object is correctly done, making it accessible as a sub-component.packages/ui/src/components/Table/theme.ts (1)
27-42: The added styles for pagination elements are well-defined and consistent with the library's design system. This ensures a seamless user experience and maintainability of the theme.packages/ui/src/components/Table/TablePagination.tsx (3)
9-22: TheFlowbiteTablePaginationThemeinterface is well-defined, covering all necessary styling aspects for the pagination component.
24-30: TheTablePaginationPropsinterface correctly defines the props needed for pagination functionality, ensuring a flexible and customizable component.
32-107: The pagination logic withinTablePaginationis implemented correctly, with clear handling of page changes and appropriate accessibility considerations. However, consider adding a brief comment explaining the logic behindgetLabelDisplayedRowsTofor future maintainability.Consider adding a brief comment explaining the logic behind
getLabelDisplayedRowsTofunction for better code readability and maintainability.packages/ui/src/components/Table/Table.stories.tsx (1)
91-183: The storybook implementation for theTablecomponent with pagination functionality is correctly done, showcasing the new feature effectively. The state management for page number and rows per page, along with the page change handling, are implemented properly.
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (3)
- apps/web/content/docs/components/table.mdx (1 hunks)
- apps/web/examples/table/index.ts (1 hunks)
- apps/web/examples/table/table.pagination.tsx (1 hunks)
Additional comments not posted (6)
apps/web/examples/table/index.ts (1)
2-2: Export statement forpaginationis correctly added and follows the naming convention of the project.apps/web/content/docs/components/table.mdx (1)
34-38: The documentation for "Table with Pagination" is clear and effectively explains the new feature. It's a valuable addition for users needing guidance on handling larger data sets.apps/web/examples/table/table.pagination.tsx (4)
1-2: Import statements are correctly organized and necessary for the component's functionality.
5-98: The example component demonstrates theTablePaginationcomponent's usage effectively, using React hooks for state management and handling page changes.
95-95: Pagination logic using theTablePaginationcomponent is straightforward and efficiently manages the pagination state.
190-201: The export of thepaginationobject is correctly structured for use in documentation or examples, with appropriate properties set.
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (1)
- apps/web/examples/table/table.pagination.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/web/examples/table/table.pagination.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (6)
- apps/web/content/docs/components/table.mdx (1 hunks)
- apps/web/examples/table/index.ts (1 hunks)
- apps/web/examples/table/table.paginationButton.tsx (1 hunks)
- apps/web/examples/table/table.paginationNumber.tsx (1 hunks)
- packages/ui/src/components/Table/Table.stories.tsx (2 hunks)
- packages/ui/src/components/Table/TablePagination.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/web/examples/table/index.ts
- packages/ui/src/components/Table/Table.stories.tsx
- packages/ui/src/components/Table/TablePagination.tsx
Additional comments not posted (3)
apps/web/content/docs/components/table.mdx (1)
34-44: The documentation for the new pagination features is clear and well-integrated with the existing content. Great job on providing concise and informative examples for both number-based and Prev/Next button-based pagination.apps/web/examples/table/table.paginationNumber.tsx (1)
1-209: The example implementation for number-based pagination in a table is correctly done, demonstrating the usage of state management and pagination controls effectively. For real-world applications, consider replacing the hardcoded sample data with dynamic data sources.apps/web/examples/table/table.paginationButton.tsx (1)
1-209: The example implementation for Prev/Next button-based pagination in a table is correctly done, showing how to effectively use pagination controls with a different pagination type. As with the number-based pagination example, consider using dynamic data sources for real-world applications.
|
on dark theme it has no active item |
Okay!. I'll check and update it. Thanks for point it out.. |
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (2)
- packages/ui/src/components/Table/TablePagination.tsx (1 hunks)
- packages/ui/src/components/Table/theme.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- packages/ui/src/components/Table/TablePagination.tsx
- packages/ui/src/components/Table/theme.ts
…the Docs accordingly
…the Docs accordingly
There was a problem hiding this comment.
Actionable comments posted: 1
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (3)
- apps/web/content/docs/components/table.mdx (1 hunks)
- apps/web/examples/table/index.ts (1 hunks)
- apps/web/examples/table/table.pagination.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- apps/web/examples/table/index.ts
- apps/web/examples/table/table.pagination.tsx
Additional comments not posted (1)
apps/web/content/docs/components/table.mdx (1)
34-39: Consider enhancing the "Table with Pagination" section by detailing the specific props used for pagination. This addition would provide clearer guidance to developers on how to implement pagination with the<Table>component.
There was a problem hiding this comment.
Actionable comments posted: 0
Actionable comments outside the diff hunks (1)
apps/web/content/docs/components/table.mdx (1)
Line range hint
18-18: Please ensure there are spaces between sentences for better readability.- ...ent and the children components such as `<Table.Head>`, `<Table.Body>`, `<Table.Row>` and `<Table.Cell>`. + ...ent and the children components such as `<Table.Head>`, `<Table.Body>`, `<Table.Row>` and `<Table.Cell>`.
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (1)
- apps/web/content/docs/components/table.mdx (1 hunks)
Additional comments not posted (1)
apps/web/content/docs/components/table.mdx (1)
34-38: The addition of the Table with Pagination section is clear and well-integrated into the document. It effectively communicates the new functionality.
|
@SutuSebastian Sir, one question though it arises in my mind is like, in the current Pagination component, we're limiting the size to 5 without allowing or giving an option to the User, that whether they need to show more or not on the single page by-default. e.g. by-default I want to show 10 rows per Page, but with the current Pagination it's restricted or can say it isn't allowed, then I guess we need to modify the Pagination to allow the User to pass an arbitrary value that how many rows/result they want to show on a single page instead of not allowing them to modify this behavior. Please share your @SutuSebastian inputs & feedbacks on this, and if this makes a valid point, then I would be happy to go ahead and make this necessary changes. |
|
@dhavalveera totally agreed. Lets fix and extend the pagination component properly and make it production ready once in for all. The current state is broken. |
|
While u're at it, investigate how a pagination component should work and the flexibility of it, and try to make a controller for it (a hook) and expose that as well, for the headless approach |
For this one, I'll dig into the existing |
while working with
those are some possibilities I came across for the Furthermore @SutuSebastian -- above suggestions & possibilities I came across for the @SutuSebastian please share your feedback & input on this. |
|
@SutuSebastian - can you please review? |
#1318
this PR adds the Pagination Component to the Table.
Summary by CodeRabbit
<Table>component to efficiently manage and navigate through large data sets. Users can now choose between numbered page navigation or Prev/Next buttons for easier data exploration.