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.

Sign up for GitHub

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

Jump to bottom

docs(examples): add advanced table example #393

Merged
merged 22 commits into from
Jul 30, 2023
Merged

docs(examples): add advanced table example #393

merged 22 commits into from
Jul 30, 2023

Conversation

Haythamasalama
Copy link
Contributor

@Haythamasalama Haythamasalama commented Jul 7, 2023 •
edited
Loading

Table

I tried to make it as simple as possible, which I am sharing here.
image
image

#297 (comment)

✨ Features:

  • Search Filter
  • Select menu rows per page
  • Paginagtion with info about the number of rows
  • Loading
  • I used the API and server-side integration provided by https://jsonplaceholder.typicode.com/
  • Actions Buttons
  • Columns Menu

Note:

I added some ESLint rules for spacing in Vue, which are very important to make our lives easier 😎😊 when writing code. I noticed that sometimes rules like object-curly-spacing and arrow-spacing are not consistent throughout the code.

@vercel
Copy link

vercel bot commented Jul 7, 2023 •
edited
Loading

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

Name Status Preview Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview Jul 30, 2023 2:47pm

@nuxt-studio
Copy link

nuxt-studio bot commented Jul 7, 2023 •
edited
Loading

✅ Live Preview ready!

Name Edit Preview Latest Commit
ui Edit on Studio ↗︎ View Live Preview e462be5

@Haythamasalama Haythamasalama marked this pull request as draft July 7, 2023 01:11
@Haythamasalama Haythamasalama changed the title Feat(docs) add a full exmple for data table feat(docs) add a full exmple for data table Jul 7, 2023
@Haythamasalama Haythamasalama marked this pull request as ready for review July 28, 2023 22:37
@Haythamasalama
Copy link
Contributor Author

@benjamincanac
Let me know what you think ?

@benjamincanac
Copy link
Member

Would you mind opening a separate PR for the eslint rules?

@Haythamasalama
Copy link
Contributor Author

Would you mind opening a separate PR for the eslint rules?

That's Done Here #464

@benjamincanac benjamincanac changed the title feat(docs) add a full exmple for data table docs(examples): add advanced table example Jul 30, 2023
@benjamincanac
Copy link
Member

Thanks! :) I've updated the design a bit.

@benjamincanac benjamincanac merged commit a9300db into nuxt:dev Jul 30, 2023
@ddahan
Copy link

ddahan commented Aug 17, 2023

Amazing job on this, I love it, thanks a lot.
To be a little picky, I was wondering is there exists a simple way to keep the table height while loading another page?
I guess a trick could be to blur the current content while waiting for new content, instead of displaying a spinner (that way the height should be the same in most cases)

@benjamincanac Volta.net
Copy link
Member

Have you tried setting :loading-state="null"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Haythamasalama @benjamincanac @ddahan