React Table Tutorial (TanStack Table)

In this video you'll learn how to create a complex, customizable table using the TanStack table library. The table will include lots of cool features like column resizing, custom column cells, sorting, filtering & pagination! You will learn about TanStack Table concepts such as: ColumnDefinitions, FilterState, FilterFn's, PaginationState & more! Lastly, you will learn how to build various UI components using Chakra UI.

0:01 Intro
0:42 Starting Files Walkthrough
1:43 useReactTable hook
2:50 Column Definitions
11:58 Column Resizing
15:40 Editable Text Column
22:33 Status Column
27:59 Date Picker Column
34:03 Filtering
52:33 Sorting
55:54 Pagination

#react #javascript #programming

[tannerlinsley]

Loved it. I think if you were to show off functional column accessors as opposed to the accessor keys, many things would have been easier or automatic. You can avoid writing custom sort and filter functions, get sorting to work out of the box for the status column, etc. I also like that you showed how to hoist state out of the table, but many times this isn’t even necessary, since the table has a built in state manager. Try passing initial state instead, then using the table instance to manage it. All in all, better than any tutorial I’ve ever done (I haven’t done any lol). You rock.

[vvalekk]

For future reference
Intro 0:00
Setting up table 0:44
Resizing 12:25
...
Status input 22:37
Datepicker 28:01
Filtering 34:05
Status Filter 39:54
Sorting 52:36
Pagination 55:54

[nichaphatraithipphikun]

This is very helpful. I find it difficult as a beginner to go through Tanstack doc and apply each features to the table. Thank you so much for making this video. Hope you have a next episode on pagination and filters!

[davidamunga_]

Loved this video. After so many years i finally learnt react-table. Thanks for your explanation. Would like to see another verison with a table fetched from the network + using Typescript

[KevinVandyTech]

Nice, best TanStack Table tutorial yet

[giuseppet]

Hey I want to say I watched a couple of videos on React Table and yours is the best. I am all new to using frameworks and I like your video the best because you go through the documentation.

I just don't want to follow along people's code and memorize it, I want to know the why behind the code and the documentation helps but for someone who is encountering such things for the first time, a documentation is quite hard to read. Watching your video gave me an idea on how to dissect the documentation so pls continue doing so in your future videos. You earned a new subscriber today.

[yeranuhipetrosyan]

Easy-to-get explanation of a really complex topic! Thank you! Would appreciate to get a hint on how to combine this with server side pagination!

[nikoden]

Very nice video, helps a lot on getting started with this nice library !

[franciscoizaguirre]

Now that's what a call a tutorial

[wilfried]

This is legendary, thank you so much <3

[taherr]

Enjoyed it. You are genius. It was very helpful.

[PTBKoo]

Awesome video, would love to see how to optimize performance with large datasets using memo, use memo, callbacks, etc.

[mrFarzadM]

Awesome, You said hard topic like this very easy, Thanks brother

[SachinYadav-yxrc]

Thank you for this content really appreciate it

[narekdanielyan]

Thanks a lot for this content. You did a great work. It also would be very usefull to know how to do column toggling(hide/show) and add input filter under each column.

[shineLouisShine]

What a great approach, and enriching video.
I appreciated it a lot and subscribed to the channel.
I only wish that you were already familiar with the concepts that Tanner pointed at - in order to achieve best practices.
Other than that... awesome!

[shreysaini]

Great tutorial! I have a question,
How would I go about, so that filter actually gives me everything except the searched value

[landyjin]

Thanks so much for the video. I'm wondering can we remove/hide the table header some how? Thanks again!

[BadrudeenAbdul-hameed]

This is really awesome. Please I would love to know the various extensions you installed on VS Code for automatic imports of Chakra UI components. Thanks for the tutorial

[hzmgdzo]

Hi really nice tutorial, can you provide/update the starter or main branch with your prettier and eslint/tslint config . That would be really helpful. Find it really frustrating when my code does not format like one seen in the video