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

-- Connect With Me 🔥🚀 --

-- 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 :)

[ahmedzakaria]

Thank you so much bro, this video very helpful, appriciated

[ebratz]

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

[higormonteiro]

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.

[maxmurakami-moses]

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

[kfscvfm]

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

[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

[prstm]

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

[mateusjsouza]

Incredible! You're awesome! Thanks, bro

[EnriqueMunoz-nofq]

You should make the tutorial for manual srver side pagination please

[taherr]

You are awesome. Nice work. Thank you.

[baptiste]

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

[varadareddy]

After adding checkbox page is going unresponsive

[mfion]

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

[fikriilhamarifin]

what the select button do on that table?

[lkmthelegend]

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

[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

[OnlyJavascript]

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

[KyXnline]

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?

[omarkraidie]

how is your terminal suggesting commands? :O

[shivamy]

bro can u tell me what all things i should learn