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: shadcn-table.vercel.app/people
Project Code: github.com/Elliott-Chong/shad...
My GitHub: github.com/Elliott-Chong
Shadcn UI: ui.shadcn.com/
-- Connect With Me 🔥🚀 --
GitHub: github.com/elliott-chong
Instagram: / elliottchong_
Website: elliottchong.tech
Email: [e-mail]
-- 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 :)

[@ebratz]

thanks a ton for your content! You deserve to have a 1mi subs! Please keep the good work!

[@mateusjsouza]

Incredible! You're awesome! Thanks, bro

[@TheGrandChieftain]

Keep up the amazing work bro!

[@Noot-ev9bs]

Very nice! This helped me a lot

[@kyawsanmaung8325]

It helps me a lot brother, Thanks 🙌🏼

[@taherr1341]

You are awesome. Nice work. Thank you.

[@prstm8981]

Thanks for showing the best way to create table... Amazingly

[@meka4996]

You are the Superman! Thanks

[@higormonteiro8314]

I have a bit of perfectionism when it comes to responsive layouts, so I still need a bit of practice to achieve the results I want. However, the video gave me a good foundation to create beautiful tables. I liked of the video. I hope to see more videos like this, practical and to the point.

[@tomydevogelaere]

Amazing video, Thx!

[@user-kf7sc3vf3m]

Thanks for the content , can you please do a tutorial on implementing server side pagination, filter and sorting

[@vanla7676]

thank you very much for your tutorial

[@ommiputera8742]

thanks for this vidioooo!

[@maxmurakami-moses4728]

Could you create a tutorial on making the table dynamic? Ie, allowing the user to input values?

[@EnriqueMunoz-no1fq]

You should make the tutorial for manual srver side pagination please

[@prashlovessamosa]

Thanks for sharing.

[@elliottchong]

Thanks for watching!

[@OnlyJavascript]

thanks for sharing. is it possible to export only the filtered values?

[@treyrader]

I dig the really straight forward design. The functionality is confusing tho. Not sure why there's a copy n paste action, for example, when that's built into the computer already and only requires one event to accomplish. Maybe show an icon instead? I still love ya tho

[@himanshu6897]

Thankyou

[@MrAtomUniverse]

How do i refresh the table if i have an advance option that allows me to e.g. choose status of a row data. I'm using server components to call the update

[@user-bp3mw4nv2x]

Nice

[@mfion1]

Is it possible to select multiple rows on different pages, without the same row selected on the next page?

[@lkmthelegend4872]

thanks for the content but i have one question, can we add buttons like delete or edit?

[@albertleog.maldonado5786]

Some answer you got in other side? I have the same question, please

[@fikriilhamarifin96]

what the select button do on that table?

[@omarkraidie]

how is your terminal suggesting commands? :O

[@baptiste6436]

what if we paginate the data with the backend, the sorting and filtering functions of shadcn wont work

[@steinkuste3492]

yeah, kinda. But you could handle filtering by api

[@shivamy3091]

bro can u tell me what all things i should learn

[@ninoverstraeten442]

Does someone know from where the white border on the table comes from? Normally it's gray.

[@ninoverstraeten442]

I got it: forgot @layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}

[@Kyle-hf2hk]

I know it's a longshot, but does anyone have a fix for the checkbox moving up when selected, and back down when de-selected?

[@Kyle-hf2hk]

It's a browser specific issue. Only happens to me on firefox. But can't find any working code that fixes it in Firefox

[@igihara2662]

I tried with 'id' and didn't work :(

[@aballahsameh3597]

u didn't explain how sort birth_date?

[@yasserhy]

Thanks for this .. but I think it would have been really cool not to load all the data at once and only load the page that we need

[@meka4996]

Somehow I have to use !bg-primary to get the button color right...