search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

feat/TablePagination - Table with Pagination #1353

Open dhavalveera opened 2 months ago

dhavalveera commented 2 months ago

1318

this PR adds the Pagination Component to the Table.

Summary by CodeRabbit

changeset-bot[bot] commented 2 months ago

⚠️ No Changeset found

Latest commit: cecd43a031677be81bbe6ac820adafbffbed628e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 8, 2024 8:52am
flowbite-react-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 8, 2024 8:52am
coderabbitai[bot] commented 2 months ago

[!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 `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR. 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. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our [FAQ](https://coderabbit.ai/docs/faq) for further information.
Commits Files that changed from the base of the PR and between 915d52cb106d702e6e7e246ec22afe077b4d352d and cecd43a031677be81bbe6ac820adafbffbed628e.

Walkthrough

This update introduces pagination functionality to the <Table> React component, enhancing its capability to manage and navigate through larger data sets efficiently. Users can now paginate data using either numbered navigation or Prev/Next buttons, improving the component's usability for displaying product information across multiple pages.

Changes

Files Change Summaries
.../docs/components/table.mdx Added pagination functionality for <Table>, including number-based and Prev/Next button navigation.
.../examples/table/index.ts Exported pagination functionality.
.../examples/table/table.pagination.tsx Introduced a pagination feature for the table component to navigate through data pages.

Possibly related issues

🐰✨
In the realm of code where tables extend,
A rabbit hopped, a feature to amend.
With pages numbered, or buttons to press,
Navigating data, no longer a mess.
📚🔢🐾
So hop along, through data vast,
With pagination, a blast from the past!
🎉🐰

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?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
SutuSebastian commented 2 months ago

on dark theme it has no active item

Screenshot 2024-04-08 at 11 18 30
dhavalveera commented 2 months ago

on dark theme it has no active item Screenshot 2024-04-08 at 11 18 30

Okay!. I'll check and update it. Thanks for point it out..

dhavalveera commented 2 months ago

@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.

SutuSebastian commented 2 months ago

@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.

SutuSebastian commented 2 months ago

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

dhavalveera commented 2 months ago

@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.

For this one, I'll dig into the existing Pagination Component and we check it out how I can extend one to fix it and it production ready.

dhavalveera commented 2 months ago

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

while working with Table.Pagination Component I understood a little bit is like we need to provide different kind of Pagination to the Users as like below:

  1. Next / Previous Button
  2. Next/Previous Button with Numbers in between if they want that as way
  3. one more possible option could be something like a dropdown menu thing where there're possibilities => 1. a Dropdown Menu with predefined options if not passed by User or with the list Users want. and along with it Left/Right Icon for Prev/Next
  4. then Pagination for Numbers with Square/Circle as an Border & maybe different colors.
  5. Input Field for allowing to enter Custom Page Number.

those are some possibilities I came across for the Pagination Components.

Furthermore @SutuSebastian -- above suggestions & possibilities I came across for the Pagination components aren't implemented in the Flowbite's Core Package, so how we can proceed it with flowbite-react?

@SutuSebastian please share your feedback & input on this.

dhavalveera commented 2 months ago

@SutuSebastian - can you please review?