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: th-cam.com/video/-ajgYf9N68M/w-d-xo.html Search: th-cam.com/video/kIy6F-VSTCY/w-d-xo.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)
Hello Orc Dev! Congrats for the channel, really helpful. I'm wondering...following shadcn practices, it recommends to create components for the Data table, as data-table.tsx / data-table-column-header / data-table-pagination / data-table-search, etc...In that scenario, I would just have a column.tsx file on each page to send the columns I want and the page.tsx to handle data from API and pass the . I want to know your opinion about that. In the Admin platform videos, you don't make it that way, You just create the data-table-users.tsx with the construction on the component. In my project, the backend is in another projetct and I'm going to have at least 10 different tables. Do you think it is worth it to make as shadcn recommends (components + columns.tsx + page.tsx), or to create like your project?
Hi there! Thank you, really glad the channel is helpful to you! Excellent question for the data table! I would definitely recommend going with the Shadcn way. You can create columns.tsx and getData for each of your entities (users, payments etc) and just reuse the same data-table.tsx Something like this one here: github.com/TheOrcDev/easiest-advanced-table/blob/main/app/payments/page.tsx That way you can keep all tables the same, making it consistent with your UI / UX. For search filters etc you could also create a dynamic component that could work on all types of data. It can be little bit complex depending on the data. One more thing I would recommend for filtering, pagination etc is to use your URL query parameters, so all filter links are sharable. I hope I made it clear :D If you have any more questions I'm here!
@@orcdev Thank you for your reply! Actually, I think you can help me with another one :D I'm building a frontend only static website with next js, using shadcn. I want to know which is the best project structure for that case, where I can easily find what I need, organize all api calls and components. Should I place the shared components (like shadcn) in the components/ui folder and create another component folder inside each page for specific components, and do the same with the api calls, errors, etc. Or should I approach a different way where a components folder and the specific pages components organized by other folders like (components/ui | components/login | components/sidebar) and do the same with apis? Today, I'm doing something like this, but I didn't start building the api stuff yet: - app -- (root) -- layout.tsx --- login ---- page.tsx - components -- ui --- button.tsx -- login --- login-form.tsx --- login-page.tsx -- sidebar --- sidebar.tsx
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: th-cam.com/video/W-Bd7nzzz3o/w-d-xo.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! ⚔
some great tips!!
Thank you! I'm glad you find it useful!
this was really helpful thank you!
You're welcome! Happy coding! ⚔
awesome! so easy!
That's why I love Shadcn :D
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
You have skipped a part in the Row Selection and I am having trouble implementing that part.
Oops, my bad! Let’s figure out that Row Selection together. Just hit me up with what’s wrong
Thanks for the tutorial, may I know the VSCode theme you are using ? It looks good
I'm glad you found the tutorial helpful! The theme I'm using is called "GitHub Dark Default" It really gives a sleek look to the code!
just what i needed!
Glad to hear that! Enjoy!
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: th-cam.com/video/-ajgYf9N68M/w-d-xo.html
Search: th-cam.com/video/kIy6F-VSTCY/w-d-xo.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)
Hello Orc Dev! Congrats for the channel, really helpful.
I'm wondering...following shadcn practices, it recommends to create components for the Data table, as data-table.tsx / data-table-column-header / data-table-pagination / data-table-search, etc...In that scenario, I would just have a column.tsx file on each page to send the columns I want and the page.tsx to handle data from API and pass the .
I want to know your opinion about that. In the Admin platform videos, you don't make it that way, You just create the data-table-users.tsx with the construction on the component.
In my project, the backend is in another projetct and I'm going to have at least 10 different tables. Do you think it is worth it to make as shadcn recommends (components + columns.tsx + page.tsx), or to create like your project?
Hi there! Thank you, really glad the channel is helpful to you!
Excellent question for the data table!
I would definitely recommend going with the Shadcn way. You can create columns.tsx and getData for each of your entities (users, payments etc) and just reuse the same data-table.tsx
Something like this one here:
github.com/TheOrcDev/easiest-advanced-table/blob/main/app/payments/page.tsx
That way you can keep all tables the same, making it consistent with your UI / UX.
For search filters etc you could also create a dynamic component that could work on all types of data. It can be little bit complex depending on the data.
One more thing I would recommend for filtering, pagination etc is to use your URL query parameters, so all filter links are sharable.
I hope I made it clear :D If you have any more questions I'm here!
@@orcdev Thank you for your reply! Actually, I think you can help me with another one :D
I'm building a frontend only static website with next js, using shadcn. I want to know which is the best project structure for that case, where I can easily find what I need, organize all api calls and components. Should I place the shared components (like shadcn) in the components/ui folder and create another component folder inside each page for specific components, and do the same with the api calls, errors, etc. Or should I approach a different way where a components folder and the specific pages components organized by other folders like (components/ui | components/login | components/sidebar) and do the same with apis?
Today, I'm doing something like this, but I didn't start building the api stuff yet:
- app
-- (root)
-- layout.tsx
--- login
---- page.tsx
- components
-- ui
--- button.tsx
-- login
--- login-form.tsx
--- login-page.tsx
-- sidebar
--- sidebar.tsx
Thanks bro❤
You're welcome! I'm glad you found the content helpful.
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!
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:
th-cam.com/video/W-Bd7nzzz3o/w-d-xo.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
Great video
Thank you! Glad you liked it!
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