Great video. You have helped me so much with these shadcn tutorials. But here is one thing, I think the filtering and pagination are only done on the client side. What happens when you want to filter on the backend? I use React Query on the to do multiple queries and then invalidate the cache alright but at work, pagination is implemented on the backend. The nextpage and previous page all come with the data. How do I implement that type of pagination in shadcn’s data table?
So glad to hear I'm helping you out with these tutorials! Yeah this one is basically receiving all payments, users or whatever it is from the backend, and filtering it on the client side. For backend pagination / filtering you can just send parameters to the backend and based on that query the data. I created that tutorial also: Pagination: ruclips.net/video/-ajgYf9N68M/видео.html Search: ruclips.net/video/kIy6F-VSTCY/видео.html
Hi! Whole row is a separated component, so it should be easy. You could use some library like dndkit.com/ or just native draggable. Basically each row should be a draggable component, and you could rearrange them, based on that you could update the backend (depends on the needed feature)
Basically two things that are dynamic in Shadcn table (example from this video) are: - columns.tsx - there you determine which columns you have in your table. How it's usually done is that you have that file together with your page where you are displaying your table, and based on your data you set your columns. Technically it could probably be dynamic if you have a lot of repeating data, but not sure if it's worth it to make it dynamic. Usually you have 5 - 6 data tables where you display your data, and you have columns.tsx for each page. - data in page.tsx - That's dynamic data that you receive from the backend, and that one is already totally dynamic. data-table.tsx component is receiving dynamic data and columns, and based on that it's displaying what you need. What I would suggest you to do is to send data from your postgres db, and just set columns.tsx. You can check on this repo how it's working together with backend: github.com/TheOrcDev/orcish-fullstack-admin Here is the video also if you need some help: ruclips.net/video/W-Bd7nzzz3o/видео.html Hope I helped you a little bit, if anything is unclear I'm here :D
@@orcdev Yeah, I understand. But what I mean is how do I insert a new column into an existing database table that already has data? For example, I have a set of products with columns like ID, SKU, name, description, and price, which are common for most users. However, some users might want to add additional columns to these existing ones or plan to import their csv. What's your approach to this? I've tried creating dynamic tables where the additional columns are stored as type JSONB. This works, but I'm wondering if there's a better way to handle this situation.
@@princereyes5400 In that case I would probably separate those two sources of column data in some external ts file, where I would create some data interface which is exported, and configure columns.tsx to receive that data array. One source would be from db which you always have from your backend, and the other source could be totally flexible based on user csv or whatever way they import their data. That would be probably the best solution, because that ts file can be covered with unit tests, and you can always ensure / control what is going in the columns.tsx
@@acloudonthebluestsky9687 Ah I get it. It shouldn't be hard, here is the official tutorial from Tanstack: tanstack.com/table/v8/docs/guide/column-pinning I can make a video also if you want :D
Hope this tutorial was helpful! ⚔ Join the Mighty Horde! Become a true web dev WARRIOR! ⚔
this was really helpful thank you!
You're welcome! Happy coding! ⚔
Awesome! My method is much complex... 😁 This method simplier and faster, thank you 🙂
You're welcome! This one is really easy to follow.
Which method were you using, if it's not a secret? :D
@@orcdevtable component of material-ui
awesome! so easy!
That's why I love Shadcn :D
Thanks bro❤
You're welcome! I'm glad you found the content helpful.
some great tips!!
Thank you! I'm glad you find it useful!
just what i needed!
Glad to hear that! Enjoy!
can you make tutorial for filtering array nested column using multiple faceted filter
i trying filter a tags/roles column with nested array data
Yes I'm definitely going to cover that in one of my next projects that are coming up with Next.js 15! ⚔️
@orcdev ok thx u bro
@ You’re welcome brother!
Great video. You have helped me so much with these shadcn tutorials. But here is one thing, I think the filtering and pagination are only done on the client side. What happens when you want to filter on the backend? I use React Query on the to do multiple queries and then invalidate the cache alright but at work, pagination is implemented on the backend. The nextpage and previous page all come with the data. How do I implement that type of pagination in shadcn’s data table?
So glad to hear I'm helping you out with these tutorials!
Yeah this one is basically receiving all payments, users or whatever it is from the backend, and filtering it on the client side.
For backend pagination / filtering you can just send parameters to the backend and based on that query the data.
I created that tutorial also:
Pagination: ruclips.net/video/-ajgYf9N68M/видео.html
Search: ruclips.net/video/kIy6F-VSTCY/видео.html
And thank you very much for your kind words! ⚔
Hey Orc, are you aware of a way to make shadcn data table row's "drag and drop" able? Thanks
Hi! Whole row is a separated component, so it should be easy.
You could use some library like dndkit.com/ or just native draggable.
Basically each row should be a draggable component, and you could rearrange them, based on that you could update the backend (depends on the needed feature)
Great video
Thank you! Glad you liked it!
do you have idea how to make a dynamic table? i still thinking about it, i'm using postgre
Basically two things that are dynamic in Shadcn table (example from this video) are:
- columns.tsx - there you determine which columns you have in your table. How it's usually done is that you have that file together with your page where you are displaying your table, and based on your data you set your columns. Technically it could probably be dynamic if you have a lot of repeating data, but not sure if it's worth it to make it dynamic. Usually you have 5 - 6 data tables where you display your data, and you have columns.tsx for each page.
- data in page.tsx - That's dynamic data that you receive from the backend, and that one is already totally dynamic. data-table.tsx component is receiving dynamic data and columns, and based on that it's displaying what you need.
What I would suggest you to do is to send data from your postgres db, and just set columns.tsx. You can check on this repo how it's working together with backend:
github.com/TheOrcDev/orcish-fullstack-admin
Here is the video also if you need some help:
ruclips.net/video/W-Bd7nzzz3o/видео.html
Hope I helped you a little bit, if anything is unclear I'm here :D
@@orcdev Yeah, I understand. But what I mean is how do I insert a new column into an existing database table that already has data?
For example, I have a set of products with columns like ID, SKU, name, description, and price, which are common for most users. However, some users might want to add additional columns to these existing ones or plan to import their csv. What's your approach to this?
I've tried creating dynamic tables where the additional columns are stored as type JSONB. This works, but I'm wondering if there's a better way to handle this situation.
@@princereyes5400 In that case I would probably separate those two sources of column data in some external ts file, where I would create some data interface which is exported, and configure columns.tsx to receive that data array.
One source would be from db which you always have from your backend, and the other source could be totally flexible based on user csv or whatever way they import their data.
That would be probably the best solution, because that ts file can be covered with unit tests, and you can always ensure / control what is going in the columns.tsx
is there a possible way to pin the first or last column of the table sir ?
Hi there!
What do you mean to pin the column? To reorder them or something like that?
@@orcdev I mean when you can scroll horizontally, the first column should be appear like freeze Header when you scroll down
@@acloudonthebluestsky9687 Ah I get it. It shouldn't be hard, here is the official tutorial from Tanstack:
tanstack.com/table/v8/docs/guide/column-pinning
I can make a video also if you want :D
@@orcdev Thanks, i think i ll tried the solution for that sir
@@ThinhBuiGiaMark Awesome! If you need anything else just let me know ⚔️
No regrets as always.
Thank you my friend! ⚔️
cumbersome if its included on the form😂
On what do you mean? :D
I probably said again something wrong hahah
@@orcdev i want inline table form. but shadcn is kinda limited to have that feature
@@forktrader7870 Oh you mean that. Yeah it's little bit tricky probably. Never tried inline forms with Shadcn before :D
@@orcdev useForm have hydration error when table tag found on form tag as children. will try to use useFormik as an alternative