Best React Table Component To Use??
Вставка
- Опубліковано 10 лют 2025
- In this video, I'll be talking about a component created by Sadman Sakib and myself, which gets ShadCNs table component to work with Server Side Pagination, Filtering and Sorting!
Take a look: shadcn-table-v...
Repo Link: github.com/sad...
Sadman Shakib: / sadmann17
ShadCN UI: ui.shadcn.com
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kav...
This is so good. I can not state how grateful I am for that.
I wasted days to make a flexible data table component myself which works server side. Thanks for the repo, I will improve my implementation using yours.
Thank you for this!!! It would be really cool for beginners to go into further details regarding integrating this onto another database table, new cols, new filtering, etc. But, you did amazing man!!!!!!
Thanks for the input! I wanted to make a short video and introduce the repository itself and didn't want to make it too long, but will keep the input in mind
Thanks a lot guys, really appreciate the work you put into this table.
Well done just the right video I was looking for. I skimmed through and it appears you go into enough detail but don't over explain. I like it a lot 👍
Thank you so much!
this work is so so good, well done man
Really appreciate the work that went into this! Thank you and Sadman. 🙌🏻
Some questions, I saw in the data-table.tsx, its using useRouter and other "use" hooks which give error in the NextJs stating that it needs to be a client component?
The component is actually inside a "use client" directive, if I remember correct
Thank you for the compliment!
You are doing great. I checked your skateshop project it is wonderful.
Haha that's completely Sadmann man, nothing by me 😊... Agree he's doing a wonderful job!
My main complaint with shadcn's demo table was the absolutely massive dependency tree full of imports spread out all over the place. Looks like you've improved on it a lot with a cleaner repo! Thanks!
Thanks for sharing your views 😊! This code is using the same base as shadcn's demo table, but now you probably don't ever need to update the data-table file, except if you want to customise the design.
Keep going. You always have amazing content. Indeed, it really help us a lot. ❤ #underrated
Thank you 🙌! Means a lot!
How can I implement loading while query, sorting or paginating though in your code you implement suspense but it doesn't show while the above task is running... Thanks for this video.
Is it possible to make and easy starter guide without a database please.
Good works thanks
Thank you for this, is is possible to make a download button where it downloads the filtered data?
Oh that would be interesting to make! We probably won't include it in the table component though, since it won't be something a lot of people will actually be using, but would be a fun thing to have. The thing is, this is not related to the table as such and this would be related to the data you're getting back. You have to query the data and then somehow find a way to generate a csv using the data, which the person will be able to download
2 bugs. When I select the first item and goto next page the first item there will also be selected
When you select 50 per page go to page 2 and filter on a keyword that iLife’s only a few results it will not show it as it stays on page 2
Fixed the second issue. Looking into the first one. Thank you for pointing it out!
I already checked the demo, all the implemetations you did are great. But one issue is that row selection has some issue, when I select all rows and navigate to another page, the items still selected in another page even the single item selected state, i.e I selected first row but the another page still select the first row.
Can u show us a complete CRUD?
would it be easy to port this to astrojs by any chance? or is it heavily reliant on next? thank you!
wish there was a version with react and nodejs :((
I am using Reactjs with Tanstack rest api and having difficulty with search and filtering pagination, can someone who has encountered this situation share with me?
it the table support crud operation?
Hello, can you create a beginner friendly version of this application? I was reading your code but I don't have much experience with T3 stack and Prisma. If you could re-create this using json-server and swr/tanstack query it would be much appreciated.
Hey man! Most of this code is just using shadcn's ui library and you don't even have to rewrite the data-table component. You can directly use it inside your application, you just need to handle querying the data
the setup seem different now
Any idea how to make rows draggable ?
Hey, can you tell me a use case where you will actually need this, since it's a table which is showing dynamic data and I don't really get where this would be useful. Were you thinking of something specific?
@@livecode247 Yes, in scenarios where you add data on admin panel and then you want customer facing app to show data in a particular order, so dragging and rearranging would be an intuitive way to do it.
Please do for projects that not use orm
In that case, you will have to manage getting the data by yourself, and manipulating the data (filtering, sorting, pagination) using the data parameters you get back
does the url still working?
Think Sadman changed it to table.sadmn.com/
always has an India guy better than you :D