Tables in NextJs Using shadcn/ui and TanStack Table

This video will look at creating data tables in NextJs using the shadcn/ui and the TanStack table libraries. We'll implement pagination, sorting, filters, column visibility, and more.

👉🏼 The Ultimate NextJs Course

👉🏼 Project source code (Github)

👉🏼 shadcn/ui

👉🏼 TanStack Table

👉🏼 Work with me

Chapters
0:00 Intro
1:00 Project setup
5:20 Table component
16:50 Cell formatting
18:54 Actions
22:56 Pagination
25:42 Advanced pagination
26:58 Sorting
29:40 Filtering
33:20 Column visibility
36:05 Reusable components
36:26 Recap

[alexandrmeyer]

Wow, thank you very much. First I tried to do myself, but got stuck as documentation seemed to be too messy to me. You made it look so simple, so I not just followed your video, but actually made sense from the documentation itself. And you did it it all just within 37 minutes. Fantastic job, thank you very much.

[rayusaki]

Thank you, Hamed! Very helpful! More showcase of Shadcn UI, please.

[onlyheec]

This is super clear for next.js/react/shadcn beginners. Thank you so much!

[BooleanOperator]

Thank you for creating this tutorial. Your instructions are clear, concise and complete. I'm working on a data-heavy app with many tables and this is exactly the solution I have been looking for. Liked and Subscribe.

[gctvvxx]

Hamed sir, for a job challenge i was asked to build a table. I found your tutorial very very helpful. No matter if i get the job or not, it is a great learning. Liked, subscribed and shared. I will be following your other tutorials as well. Thank you so much for providing such content.

[victormustin]

Since shadcn put out this library I haven’t stopped using it it’s so clean

[HaiderAli-pbim]

Thanks brother you give us whole datatable creating process in detail, again thanks a lot
❣

[fncjgkj]

thank you so much boss Hamed! shadcn makes it fast. more shadcn ui tutorials.

[yantaosong]

Cool, thanks Hamed, it is very useful again .

[Anshumantiwarianstiwar]

Thank you, Hamed! It was very amazing tutorial, please share more videos on Shadcn

[xtn]

Thank you for another great tutorial! I really like the way you teach in your videos by explaining in details without complexity.
I hope you can make another one for a data table with expandable rows to show nested data and how to export it in excel or pdf.
Sorry, that sounds a lot of request haha!
But I think will be a great tutorial series content for your channel.

Thank you, Hamed!

[gyanjyotidas]

So helpful and explained in such a easy way!! You are the boss mate, Great job love it!!!🤟

[KjetilYtrehus]

Great intro. I wish the documentation just had a few more examples and hints and tips. But you completed it. Got a datatable up and running fetching SharePoint-data on a SharePoin site now. (Dont get me started on using tailwind and ShadCNUI on SPFX (SharePoint framework and React 17). Wow. That was the struggle. The DataTable part you fixed with this video!

[seethadeviv]

Hi Hamed Sir, Thanks for this video. This is help us understand better way.

[nandhusathish]

Thank you, Hamed Very helpful can you please do a video on implementing server side pagination, filters and sorting in shadcn table

[rammehar]

Great explanation, please also create an example with server side component pagination for this

[ricardoscarpim]

Very nice, I've learned a lot from you so far !!!, One question could you please tell us how you can select the number of rows per page? Thank you Hamed

[robert_k_sam]

Thank you so much. I'm blessed to see this today. I have a quick question...How do we add filter according to rows instead of columns. For example, we can have a dropdown to filter according to status

[johnpaul]

I need to choose a library to use and get comfortable with to deploy tables and charts. I watched your excellent video on NextJS UI and now I see this one. Both options are good. But which in your opinion is one you would use for a healthy sized project?

[davique]

Thi is an amazing resource, thank you so much. Just a quick questions, if I'm working with javascript instead of typescript, would this still work just removing the types?