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

  • @ebratz
    @ebratz10 ай бұрын

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

  • @TheGrandChieftain
    @TheGrandChieftain11 ай бұрын

    Keep up the amazing work bro!

  • @mateusjsouza
    @mateusjsouza9 ай бұрын

    Incredible! You're awesome! Thanks, bro

  • @user-kf7sc3vf3m
    @user-kf7sc3vf3m9 ай бұрын

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

  • @prstm8981
    @prstm898111 ай бұрын

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

  • @kyawsanmaung8325
    @kyawsanmaung83254 ай бұрын

    It helps me a lot brother, Thanks 🙌🏼

  • @Noot-ev9bs
    @Noot-ev9bs10 ай бұрын

    Very nice! This helped me a lot

  • @taherr1341
    @taherr13415 ай бұрын

    You are awesome. Nice work. Thank you.

  • @higormonteiro8314
    @higormonteiro83148 ай бұрын

    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.

  • @meka4996
    @meka499610 ай бұрын

    You are the Superman! Thanks

  • @tomydevogelaere
    @tomydevogelaere2 ай бұрын

    Amazing video, Thx!

  • @maxmurakami-moses4728
    @maxmurakami-moses47283 ай бұрын

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

  • @EnriqueMunoz-no1fq
    @EnriqueMunoz-no1fq10 ай бұрын

    You should make the tutorial for manual srver side pagination please

  • @vanla7676
    @vanla76766 ай бұрын

    thank you very much for your tutorial

  • @OnlyJavascript
    @OnlyJavascript10 ай бұрын

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

  • @MrAtomUniverse
    @MrAtomUniverse9 ай бұрын

    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

  • @prashlovessamosa
    @prashlovessamosa11 ай бұрын

    Thanks for sharing.

  • @elliottchong

    @elliottchong

    11 ай бұрын

    Thanks for watching!

  • @mfion1
    @mfion12 ай бұрын

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

  • @fikriilhamarifin96
    @fikriilhamarifin963 ай бұрын

    what the select button do on that table?

  • @ommiputera8742
    @ommiputera87427 ай бұрын

    thanks for this vidioooo!

  • @varadareddy8645
    @varadareddy86457 күн бұрын

    After adding checkbox page is going unresponsive

  • @omarkraidie
    @omarkraidie11 ай бұрын

    how is your terminal suggesting commands? :O

  • @himanshu6897
    @himanshu689711 ай бұрын

    Thankyou

  • @baptiste6436
    @baptiste643610 ай бұрын

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

  • @steinkuste3492

    @steinkuste3492

    7 ай бұрын

    yeah, kinda. But you could handle filtering by api

  • @treyrader
    @treyrader9 ай бұрын

    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

  • @shivamy3091
    @shivamy309110 ай бұрын

    bro can u tell me what all things i should learn

  • @KyXnline
    @KyXnline8 ай бұрын

    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

    @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

  • @lkmthelegend4872
    @lkmthelegend48728 ай бұрын

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

  • @albertleog.maldonado5786

    @albertleog.maldonado5786

    8 ай бұрын

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

  • @ninoverstraeten442
    @ninoverstraeten4429 ай бұрын

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

  • @ninoverstraeten442

    @ninoverstraeten442

    9 ай бұрын

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

  • @user-bp3mw4nv2x
    @user-bp3mw4nv2x11 ай бұрын

    Nice

  • @igihara2662
    @igihara26625 ай бұрын

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

  • @aballahsameh3597
    @aballahsameh35978 ай бұрын

    u didn't explain how sort birth_date?

  • @yasserhy
    @yasserhy9 ай бұрын

    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
    @meka499610 ай бұрын

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