I Never Want To Create Tables Any Other Way

Today I will show you how to build the perfect table in React with Typescript and tanstack/tables

Beautifully styled with shadcn and tailwindcss, also featuring a dark mode toggle :)

-- Resouces --
Project Demo: https://shadcn-table.vercel.app/people
Project Code: https://github.com/Elliott-Chong/shad...
My GitHub: https://github.com/Elliott-Chong
Shadcn UI: https://ui.shadcn.com/

-- Connect With Me 🔥🚀 --
GitHub: https://github.com/elliott-chong
Instagram: Instagram: elliottchong_
Website: https://elliottchong.tech
Email: [email protected]

-- Chapters --
0:00 Intro & Demo
3:08 Generate Mock Data
4:36 Setup Nextjs Project
6:10 Install shadcn
9:10 Import Mock Data
11:20 Setup Table Component
14:00 File Structure
15:50 Column Definitions
19:20 Create Data Table
32:25 Custom Cell Formatting
36:30 Actions Menu Column
42:20 Pagination
45:36 Sorting Functionality
50:31 Filter by First Name
55:00 Column Visibility
1:00:00 Column Selection
1:07:45 Styling
1:09:08 Dark Mode Toggle
1:13:06 Add Custom Colour Theme
1:14:00 Export To Excel
1:19:55 Outro :)