Shadcn UI Data Tables in Next.js! Learn how to build a fully functional, customizable table with vertical/horizontal scrolling, dynamic cell components, column visibility toggling, and sorting—all powered by Tanstack Table and styled with Shadcn UI.
Chapters:
00:00 - intro
01:42 - Setup test data
03:18 - Visualizing table
07:18 - Fixing scrollbar
08:51 - Sorting Table
11:18 - Column visibility
13:16 - Drop down column
Useful links:
Github repo: https://github.com/TheDevLogger/shadcnui-table-example
Shadcn/ui Table: https://ui.shadcn.com/docs/components/table
Tanstack table row model execution: https://tanstack.com/table/latest/docs/guide/row-models#the-order-of-row-model-execution
🔥 Subscribe: http://youtube.com/@TheDevLogger?sub_confirmation=1
Instagram: @thedevlogger
email: [email protected]
#ShadcnUI #NextJS #WebDevelopment #React #TanstackTable #Frontend #CodingTutorial #UIDesign