Simplest way to build Data Table (Next.js, Shadcn, React, Tanstack)

Here is the repo:

Next video to watch:

⚔️ Join The Horde

Some of the projects to check:

00:00 Intro
00:30 Data Table Component
02:09 Installation
04:00 Table Init
05:16 Components Creation
09:01 Cell Formatting
11:21 Pagination
12:19 Sorting
15:25 Filtering
17:05 Row Selection
18:25 Tips
19:14 Outro

#webdevelopment #orcdev #shadcn #tanstack #datatable #react #nextjs #typescript

[orcdev]

Hope this tutorial was helpful! ⚔ Join the Mighty Horde! Become a true web dev WARRIOR! ⚔

[kafukai]

Awesome! My method is much complex... 😁 This method simplier and faster, thank you 🙂

[damianmartin]

Hey Orc, are you aware of a way to make shadcn data table row's "drag and drop" able? Thanks

[steelo]

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?

[princereyes]

do you have idea how to make a dynamic table? i still thinking about it, i'm using postgre

[devijv]

can you make tutorial for filtering array nested column using multiple faceted filter
i trying filter a tags/roles column with nested array data

[ThinhBuiGiaMark]

is there a possible way to pin the first or last column of the table sir ?

[forktrader]

cumbersome if its included on the form😂