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: 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 :)
Пікірлер: 39
thanks a ton for your content! You deserve to have a 1mi subs! Please keep the good work!
Keep up the amazing work bro!
Incredible! You're awesome! Thanks, bro
Thanks for the content , can you please do a tutorial on implementing server side pagination, filter and sorting
Thanks for showing the best way to create table... Amazingly
It helps me a lot brother, Thanks 🙌🏼
Very nice! This helped me a lot
You are awesome. Nice work. Thank you.
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.
You are the Superman! Thanks
Amazing video, Thx!
Could you create a tutorial on making the table dynamic? Ie, allowing the user to input values?
You should make the tutorial for manual srver side pagination please
thank you very much for your tutorial
thanks for sharing. is it possible to export only the filtered values?
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
Thanks for sharing.
@elliottchong
11 ай бұрын
Thanks for watching!
Is it possible to select multiple rows on different pages, without the same row selected on the next page?
what the select button do on that table?
thanks for this vidioooo!
After adding checkbox page is going unresponsive
how is your terminal suggesting commands? :O
Thankyou
what if we paginate the data with the backend, the sorting and filtering functions of shadcn wont work
@steinkuste3492
7 ай бұрын
yeah, kinda. But you could handle filtering by api
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
bro can u tell me what all things i should learn
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?
@KyXnline
8 ай бұрын
It's a browser specific issue. Only happens to me on firefox. But can't find any working code that fixes it in Firefox
thanks for the content but i have one question, can we add buttons like delete or edit?
@albertleog.maldonado5786
8 ай бұрын
Some answer you got in other side? I have the same question, please
Does someone know from where the white border on the table comes from? Normally it's gray.
@ninoverstraeten442
9 ай бұрын
I got it: forgot @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } }
Nice
I tried with 'id' and didn't work :(
u didn't explain how sort birth_date?
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
Somehow I have to use !bg-primary to get the button color right...