React Table Tutorial (TanStack Table)

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 84

  • @tannerlinsley
    @tannerlinsley Год назад +63

    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.

    • @nikita-dev
      @nikita-dev  Год назад +11

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

    • @emenikedaniel
      @emenikedaniel Год назад +12

      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.

    • @danielzitar8353
      @danielzitar8353 11 месяцев назад

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

    • @wishmeheaven
      @wishmeheaven 8 месяцев назад +1

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

    • @xyzabc-r4q
      @xyzabc-r4q 2 месяца назад

      You should do a tutorial.

  • @vvalekk
    @vvalekk 11 месяцев назад +23

    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

  • @norbusherpa3665
    @norbusherpa3665 Месяц назад +2

    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.

  • @nichaphatraithipphikun8098
    @nichaphatraithipphikun8098 Год назад +5

    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!

  • @giuseppet8345
    @giuseppet8345 Год назад +4

    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.

  • @real23lions
    @real23lions Год назад +1

    Best T Table tutorial on youtube.

  • @karinavenefica4034
    @karinavenefica4034 4 месяца назад +1

    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.

    • @nikita-dev
      @nikita-dev  4 месяца назад

      thanks for your feedback!

  • @KevinVandyTech
    @KevinVandyTech Год назад +1

    Nice, best TanStack Table tutorial yet

  • @yeranuhipetrosyan3914
    @yeranuhipetrosyan3914 11 месяцев назад

    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!

  • @davidamunga_
    @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

  • @shreysaini7800
    @shreysaini7800 8 месяцев назад +1

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

  • @PTBKoo
    @PTBKoo Год назад +1

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

  • @BadrudeenAbdul-hameed
    @BadrudeenAbdul-hameed 8 месяцев назад

    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

  • @omrifarkash3480
    @omrifarkash3480 Месяц назад

    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?

  • @landyjin8352
    @landyjin8352 10 месяцев назад

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

  • @jervx829
    @jervx829 Месяц назад

    Awesome! Can you do multiple column pinning (Sticky).

  • @42orbit
    @42orbit 10 месяцев назад

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

  • @lazygamer6249
    @lazygamer6249 Год назад +1

    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.

    • @nikita-dev
      @nikita-dev  Год назад +1

      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!

    • @lazygamer6249
      @lazygamer6249 Год назад +1

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

  • @balazsmolnar4315
    @balazsmolnar4315 Год назад +1

    Thanks. A have a question. How can i add new row to the table?

    • @nikita-dev
      @nikita-dev  Год назад +1

      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.

  • @shineLouisShine
    @shineLouisShine 8 месяцев назад

    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!

  • @mubashirwaheed474
    @mubashirwaheed474 11 месяцев назад

    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

  • @VetrivelanArasu
    @VetrivelanArasu Год назад

    how can i fix the each and every column width and my table's parent width is max 1250px. please clarify me

  • @franciscoizaguirre9069
    @franciscoizaguirre9069 5 месяцев назад

    Now that's what a call a tutorial

  • @mateusjsouza
    @mateusjsouza 11 месяцев назад

    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.

  • @snoweelpereira
    @snoweelpereira 10 месяцев назад

    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

  • @chhakulizingare9382
    @chhakulizingare9382 8 месяцев назад

    If I have name and email in one column called name now how to write search logic to search by name or email?

  • @rachitgupta4143
    @rachitgupta4143 11 месяцев назад

    18:00 - 22:36 => input

  • @nickpeshev9239
    @nickpeshev9239 7 месяцев назад

    i got some problem implementing row selection with server side pagination and using tanstack table without typescript.Anyone wanna help ?

  • @narekdanielyan8810
    @narekdanielyan8810 Год назад +1

    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.

    • @nikita-dev
      @nikita-dev  Год назад

      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

  • @achrafamellal
    @achrafamellal 5 месяцев назад

    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
      @nikita-dev  5 месяцев назад

      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?

    • @achrafamellal
      @achrafamellal 5 месяцев назад

      @@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()
      }
      },

  • @cornjulio4033
    @cornjulio4033 2 месяца назад +1

    the coolest thing a table could do is "fixed headers" when I scroll down. Can this thing do it ?

  • @John-gx8ur
    @John-gx8ur Год назад

    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

  • @judoScott
    @judoScott 9 месяцев назад

    Great tutorial. Thank you so much.

  • @mrFarzadM
    @mrFarzadM 6 месяцев назад

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

  • @taherr1341
    @taherr1341 10 месяцев назад

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

  • @hakanaki
    @hakanaki 9 месяцев назад

    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.

  • @RezaA-s1j
    @RezaA-s1j 4 месяца назад

    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.

  • @nightcrawl8100
    @nightcrawl8100 Год назад

    Can it also handle query parameters for pagination and filter search?

    • @nightcrawl8100
      @nightcrawl8100 Год назад

      because I was worried that the large amount of data would make rendering long.

  • @iacopocarlini
    @iacopocarlini Год назад

    Does anybody know how to test this using jest/react testing library?

  • @abhaypratapsingh6353
    @abhaypratapsingh6353 Год назад

    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 ?

    • @KevinVandyTech
      @KevinVandyTech Год назад +1

      Use CSS that targets tr > td

    • @nikita-dev
      @nikita-dev  Год назад

      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)

  • @hardia1666
    @hardia1666 Год назад

    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.

  • @apexyu164
    @apexyu164 Год назад

    thanks ! can you show how to merge cell if they are equal

    • @nikita-dev
      @nikita-dev  Год назад

      what do you mean by this?

    • @apexyu164
      @apexyu164 Год назад

      @@nikita-dev say if two cell (let assume in DUE) have same DUE date, merger them from span1 to span2 space

  • @OnlyJavascript
    @OnlyJavascript Год назад +1

    thanks for the content. can you please show us server side pagination and filter.

    • @nikita-dev
      @nikita-dev  Год назад

      what do you mean by that?

    • @asadmehboob1300
      @asadmehboob1300 Год назад +1

      server side searching, sorting, filtering and pagination

  • @alexandremendes2260
    @alexandremendes2260 9 месяцев назад

    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.

  • @wilfried64
    @wilfried64 Год назад

    This is legendary, thank you so much

  • @aleksey6151
    @aleksey6151 Год назад +1

    We gettin out of unemployment with this one 🔥🔥

  • @zzeebob
    @zzeebob Год назад

    This is really helpful! Thank you...

  • @SachinYadav-yx1rc
    @SachinYadav-yx1rc Год назад

    Thank you for this content really appreciate it

  • @cyberblitz
    @cyberblitz 7 месяцев назад

    this is great. However, it would have been better of you covered how you could create extra rows

  • @SanderCokart
    @SanderCokart Год назад

    Great video!!!

  • @SebastianK-d1m
    @SebastianK-d1m 11 месяцев назад

    What vscode theme are you using?

  • @haiderjaafer8164
    @haiderjaafer8164 Год назад

    Amazing tutorial... If used tailwind in styling Tanstack react table that's will be better 😊😊😊

  • @GabrielFelipe-x7u
    @GabrielFelipe-x7u Год назад

    Thank You!!

  • @salman0ansari
    @salman0ansari Год назад

    amazing

  • @hos7012
    @hos7012 Месяц назад

    thx alot but please make font bigger

  • @georgispeaking
    @georgispeaking Год назад

    Thanks a lot

  • @kemcadams7210
    @kemcadams7210 6 месяцев назад +1

    This would have been nore useful for me if it used standard html table markup instead of chakra components

    • @marcialabrahantes3369
      @marcialabrahantes3369 3 месяца назад

      it wouldn't look as neat

    • @DapperNurd
      @DapperNurd 2 месяца назад

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

  • @cameron5967
    @cameron5967 Год назад

    😌 Promo`SM

  • @snoweelpereira
    @snoweelpereira 10 месяцев назад +1

    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