React Table Tutorial (TanStack Table)
HTML-код
- Опубликовано: 14 сен 2023
- 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.
Starting Files: github.com/OneLightWebDev/rea...
Finished Files: github.com/OneLightWebDev/rea...
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
TanStack Table: tanstack.com/table/v8
Chakra UI: chakra-ui.com
React Date Picker: www.npmjs.com/package/react-d...
Github: github.com/nikitapryymak
Support Me: www.paypal.com/paypalme/nikit...
Contact Me: onelightwebdev@gmail.com
#react #javascript #programming 
Наука
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.
Thanks for your feedback, Tanner! I’ll look into adding a Part 2 to show the benefits of functional column accessors. I definitely should have read the docs a bit more haha.
PS: I love the work you’re doing with TanStack and can’t imagine building apps without it! Keep it up! 🤜
Alot of people would appreciate including myself, if you can lean into doing a couple of industry standard tutorials on using tanstack tables. I have had to do a fair share of research before getting the juice out of it. Please and please if you cant do the tutorial then, try adding more examples to the documentation or a step by step follow through. Appreciate your works.
@@emenikedaniel yes I agree, especially editing table data in the rows or adding new data entries to the table with tanstack I have a hard time implementing this with tanstack
@tannerlinsley, considering your comment, and due to the inevitable conclusion that tools that you've built - don't get their full potential, and while I failed for too long to implement your suggestions - I think that it's just a pity that either you (just the same as you interviewed for podcasts), somebody else from your crew, or some Tanstack official production - upload official tutorials.
Thanks for the hard work.
I deeply wish that I was able to appreciate the practices as much as I appreciate the vision, and this comment's bottom line is that it feels like you do have something to do about it.
Hopefully...
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
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!
Nice, best TanStack Table tutorial yet
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
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!
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.
Great work and thanks for helping us!
This is legendary, thank you so much
Very nice video, helps a lot on getting started with this nice library !
Best T Table tutorial on youtube.
Great tutorial. Thank you so much.
Enjoyed it. You are genius. It was very helpful.
This is really helpful! Thank you...
Thank you for this content really appreciate it
Awesome video, would love to see how to optimize performance with large datasets using memo, use memo, callbacks, etc.
Great video!!!
Awesome, You said hard topic like this very easy, Thanks brother
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.
Thank you! There are some good examples in the docs on this.
Column Visibility: tanstack.com/table/v8/docs/examples/react/column-visibility
Input Filters: tanstack.com/table/v8/docs/examples/react/filters
Awesome explanation ++++++++++++++++ Thank You 🙂
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!
Thank You!!
amazing
Amazing tutorial... If used tailwind in styling Tanstack react table that's will be better 😊😊😊
Thanks a lot
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
Great tutorial! But in the next tutorial, could you please change the font size to be larger and slightly enlarge the code editor view for visual viewing comfort
Great tutorial! I have a question,
How would I go about, so that filter actually gives me everything except the searched value
Thanks so much for the video. I'm wondering can we remove/hide the table header some how? Thanks again!
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
this is great. However, it would have been better of you covered how you could create extra rows
This is an excellent tutorial, really easy to understand.
I have a question tho, I followed your tutorial without a paginator and used infinite scrolling instead, and I noticed that when I update a cell the entire list re-renders. Is there a way to just update a cell or row without re-rendering the entire list?
Thank you.
One of the best tutorial, I've ever seen on tanstack table since last several months. Now, I have some questions.
How can I submit the table data to the server after editing the table cells. As I can edit the table cells, that means I need to send those edited data to the server right?
How can I persist the sorted or filtered state when I redirected to this table.
Thank you so much for your amazing tutorial.
I'm glad it was helpful! To send your updates to the server, you could add more logic the `updateData` function that we passed in the `meta` object. First, add a taskId to each object in your table data (this ID would uniquely identify the task record in the database). Then you would have to take in the `taskId` as a parameter instead of the rowIndex. After you update the table state, you would just make an API call and pass the updates in the request. For example:
updateData: (taskId, column, value) => {
setData(...);
API.patch(`/tasks/${taskId}`, { column: value });
}
To persist the filter/sort state, I would recommend storing it in local storage. Then initialize your filterState with the value stored in local storage (if it exists). Hope this helps!
@@nikita-dev Thank you for your response. It really helps a lot. I will definitely try your instructions. It would be more helpful if you made a video on those processes.
18:00 - 22:36 => input
How can we pass extra prop the cell? Basically I want to pass the path as prop to the cell and want to redirect the user based on the path when cell is clicked. I can't use usePathname in columns is an array
Seeing JS instead of TS is a bit painful. At some point, you go back and forth between files to check what are the arguments your updateData() function takes etc. You'd get a much better experience with TS, because you'd get hints telling you, as you type, without going back to the file where you defined this function. Other than that, this was probably the most complete and interestng Tanstack Table + React example on YT.
We gettin out of unemployment with this one 🔥🔥
Hi, this is an amazing tutorial for beginners like me.. But when I tried to apply column resizing when using Tailwind CSS, it doesn't work.
Great Tutorial. Can you share some resources to know how the react table works under the hood. Documentation is not very detailed
Thank you! The Tanstack Table library is open source, so you can see how it's working under the hood: github.com/TanStack/table
how can i fix the each and every column width and my table's parent width is max 1250px. please clarify me
Thanks. A have a question. How can i add new row to the table?
You would have to store your `columnDefinitions` in state, and then add a new object to that array. This will rerender the table and show the new column.
thanks for the content. can you please show us server side pagination and filter.
what do you mean by that?
server side searching, sorting, filtering and pagination
Does anybody know how to test this using jest/react testing library?
Can it also handle query parameters for pagination and filter search?
because I was worried that the large amount of data would make rendering long.
How we can adjust the row height to some constant value. I have a tanstack table in which data is coming live from server. The issue is if I have only 4-5 rows in a table, then row height is automatically adjusted to fill the table height. I tried setting it to constant value using css in elements but somehow it is getting overwritten. Do you have any idea how we can fix this ?
Use CSS that targets tr > td
Is there a fixed height set on the table? If there are only 4-5 rows being returned, then those rows should automatically determine the height of the table (without growing to fit some fixed height)
Dude, I'm having a problem here. I'm trying to render a delete modal that's inside the actions of my table. But the modal isn't opening and I don't know why.
i got some problem implementing row selection with server side pagination and using tanstack table without typescript.Anyone wanna help ?
If I have name and email in one column called name now how to write search logic to search by name or email?
What vscode theme are you using?
Atom One Dark
thanks ! can you show how to merge cell if they are equal
what do you mean by this?
@@nikita-dev say if two cell (let assume in DUE) have same DUE date, merger them from span1 to span2 space
Can anyone tell me which features is paid and which is free in this
This would have been nore useful for me if it used standard html table markup instead of chakra components
😌 Promo`SM
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