Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Table): add support for pagination & initialState #3065

Open
wants to merge 4 commits into
base: v3
Choose a base branch
from

Conversation

MuhammadM1998
Copy link
Contributor

πŸ”— Linked issue

Part of #2441

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This adds Pagination support for the table component. I've been waiting on #2654 but it's been a draft for some time. I've also added support for initialState to allow users to pass default options to the table, such as page size.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@@ -169,6 +175,8 @@ const tableApi = useVueTable({
...(props.expandedOptions || {}),
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
getPaginationRowModel: getPaginationRowModel(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this not break all existing examples? I already tried this when I made the component but this enables the pagination just by passing getPaginationRowModel.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tested the examples locally and they're working as expected. Can you elaborate more on how they break?

Copy link

pkg-pr-new bot commented Jan 10, 2025

npm i https://pkg.pr.new/@nuxt/ui@3065

commit: 60c9bb4

@MuhammadM1998
Copy link
Contributor Author

One thing to note is that this works for Client Side Pagination; for Server-Side pagination, one would need to pass pagination as instructed in the docs.

This made me think that we should let the table component accept all of useVueTable possible options and use defu to merge the defaults. This gives the end-user full control and allows extending the component with any features that's not built in yet.

What do you think? @benjamincanac

@benjamincanac
Copy link
Member

Yes that would be better indeed, initially I was planning to add props one by one to document each feature.

@MuhammadM1998
Copy link
Contributor Author

Would you like me to do it in this PR?

@benjamincanac benjamincanac added the v3 #1289 label Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v3 #1289
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants