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/shadcn-table-yt
My GitHub: https://github.com/Elliott-Chong
Shadcn UI: https://ui.shadcn.com/

— Connect With Me 🔥🚀 —
GitHub: https://github.com/elliott-chong
Instagram: https://instagram.com/elliottchong_
Website: https://elliottchong.tech
Email: elliottchong16@gmail.com

— 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 🙂