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...
I was using a very old version of react table in my very old project, I was recently involved in a new project which uses these new version of dependencies. I was scared of all the utilities and methods of react-table at my first glance, But you really made in simple.
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!
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.
Thank you very much for the really very well made video :-) It was super structured and very well explained and comprehensible. But what particularly impressed me was your very easy to understand language. English is not my native language and I have a very hard time with it (nothing works without google), but your video was the first video ever that I could fully understand without subtitles.
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
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
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.
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.
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!
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
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.
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
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
I'm using Tanstack table in my react application, this table has a column Action that let user to edit or delete a row, the current issue is that when I try to delete a row it updates the table but when I navigate to another page and go back to the table page, it shows me the table with the deleted row!
@@nikita-dev I update the table state after performing a DELETE request as shown in the code below. I've used a console log to check the table state and it ends up showing me the state with deleted row, meta: { removeRow: (rowIndex: number) => { setFetchedData( prevData => prevData.filter((_row: TData, index: number) => index !== rowIndex) ) console.log('Updated data: ', fetchedData) refetch() } },
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
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.
great work. I think It only use when you have data locally. If some have thousands of records then we will get data from server. and server will just serve max 100 per page. and if some one search than we need to go to server and same for sort.
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 ?
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)
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.
@@marcialabrahantes3369 It basically ends up being the same. He just uses Box components with the classNames of what would have been the standard tag (Box className="th" as opposed to just ). I'm not sure why he's using at it all for this tutorial.
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
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...
You should do a tutorial.
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
I was using a very old version of react table in my very old project, I was recently involved in a new project which uses these new version of dependencies. I was scared of all the utilities and methods of react-table at my first glance, But you really made in simple.
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!
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.
Best T Table tutorial on youtube.
Thank you very much for the really very well made video :-)
It was super structured and very well explained and comprehensible. But what particularly impressed me was your very easy to understand language. English is not my native language and I have a very hard time with it (nothing works without google), but your video was the first video ever that I could fully understand without subtitles.
thanks for your feedback!
Nice, best TanStack Table tutorial yet
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!
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
Great tutorial! I have a question,
How would I go about, so that filter actually gives me everything except the searched value
Awesome video, would love to see how to optimize performance with large datasets using memo, use memo, callbacks, etc.
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
How can I make the last column state in its place and only the other columns resizing between themselves in the fixed space the table has?
Thanks so much for the video. I'm wondering can we remove/hide the table header some how? Thanks again!
Awesome! Can you do multiple column pinning (Sticky).
Very nice video, helps a lot on getting started with this nice library !
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.
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.
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!
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
how can i fix the each and every column width and my table's parent width is max 1250px. please clarify me
Now that's what a call a tutorial
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.
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
If I have name and email in one column called name now how to write search logic to search by name or email?
18:00 - 22:36 => input
i got some problem implementing row selection with server side pagination and using tanstack table without typescript.Anyone wanna help ?
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
I'm using Tanstack table in my react application, this table has a column Action that let user to edit or delete a row, the current issue is that when I try to delete a row it updates the table but when I navigate to another page and go back to the table page, it shows me the table with the deleted row!
It may be that the table state is not being updated. Are you able to log the table state and ensure that the row removed and you delete it?
@@nikita-dev I update the table state after performing a DELETE request as shown in the code below. I've used a console log to check the table state and it ends up showing me the state with deleted row,
meta: {
removeRow: (rowIndex: number) => {
setFetchedData(
prevData => prevData.filter((_row: TData, index: number) => index !== rowIndex)
)
console.log('Updated data: ', fetchedData)
refetch()
}
},
the coolest thing a table could do is "fixed headers" when I scroll down. Can this thing do it ?
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. Thank you so much.
Awesome, You said hard topic like this very easy, Thanks brother
Enjoyed it. You are genius. It was very helpful.
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.
did you find out
@@mujtabadustoxali6872 No I wasn't
great work. I think It only use when you have data locally. If some have thousands of records then we will get data from server. and server will just serve max 100 per page. and if some one search than we need to go to server and same for sort.
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.
Does anybody know how to test this using jest/react testing library?
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)
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.
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
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
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.
This is legendary, thank you so much
We gettin out of unemployment with this one 🔥🔥
This is really helpful! Thank you...
Thank you for this content really appreciate it
this is great. However, it would have been better of you covered how you could create extra rows
Great video!!!
What vscode theme are you using?
Atom One Dark
Amazing tutorial... If used tailwind in styling Tanstack react table that's will be better 😊😊😊
Thank You!!
amazing
thx alot but please make font bigger
Thanks a lot
This would have been nore useful for me if it used standard html table markup instead of chakra components
it wouldn't look as neat
@@marcialabrahantes3369 It basically ends up being the same. He just uses Box components with the classNames of what would have been the standard tag (Box className="th" as opposed to just ). I'm not sure why he's using at it all for this tutorial.
😌 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