React-Table Tutorial - Beginners Tutorial

In this video I will teach you all the react table library.
Code: github.com/mac...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/mac...
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #react-table

[@panapok]

I appreciate this video a lot! I've been trying to integrate table views for the front-end of my application for a while now. It's been hard to find an up-to-date tutorial for this, however. Please do make a part 2!

[@OnlyJavascript]

can you please make a part-2? pagination, sort, filter, search filter...I know I am asking too much. But, It will be complete if you can teach us all these stuff. Half cooked food is of no use. It will be nice if you make a part -2. Thanks in advance.

[@jamesnelson174]

Please when doing pagination, kindly use real data from API with paginated data.

[@noelanthonyrdiaz143]

yes please 😇

[@jtaylor8606]

@@jamesnelson174 Agreed. And to be truly valuable it should be with pagination, with data taken from an api using axios, using react-query to manage state changes/data re-fetching (i.e. not using useEffect, which is not what it's for per Pedro's video on react-query) and using the latest version of react-table (v8, not v7 as this vid covers). There are no videos covering all of that, and the react-table documentation is poor/incomplete, but it is by far the most commonly needed use case.

[@infisspablo8602]

Try to Play with examples from docs guys, IT can be confusing at first but its doable

[@rax7147]

Can you do it using axios.

[@stonecomstock]

You know it's a good day when Pedro drops a new video!!

[@faizanahmed9304]

exactly

[@jkpz10]

its a new react knowledge when pedro upload new video.

[@GuilhermeHallmann]

nice videio! would love a pt2 with more advanced stuff like column sorting, filters, pagination, etc

[@muhammadabbaskhan4114]

these advance things have so much complex and lengthy code to be understandable

[@OnlyJavascript]

Haha..it's not a paid comment. Damn true, I was searching for React Tables an hour ago. Looks like I am blessed to have an updated one.

[@ryanquinn1257]

Great breakdown. The docs have gotten better, but this was a more helpful walkthrough!

[@rodrigo.martins]

Good Video. I'd be great to see a next one with more advanced features !

[@smartjefreycoca5425]

finally someone made a tutorial of this. haha. hopefully you can create more tutorial about this react-table

[@snotsnot666]

Great tutorial! How about following up with an advanced version? Sorting and pagination (server side of course), show an image if the content of a specific column is a URL and so on

[@bugatess]

Thanks for making this video, such a great explanation for beginners!

[@LigiaKiesling]

I loved the tutorial, it's awesome as all your tutorials, however when trying to follow it with the use of more modern Tanstack Table, it is not really easy as the syntax has changed, would you be able to prepare a tutorial with the use of Tanstack Table? Much appreciated.

[@manavshah1844]

You are the most inspiring and amazing tutor

[@karthi2065]

That's what I am looking for 🤠

[@tiMONIC100]

Wow, i really like your way of explaining!

[@jtaylor8606]

I just get an error when copy-pasting this code: "Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app"

[@nobuo_uematsu]

hey! cool video! thank you for posting. what s the extension uyou're using to know the imports bundle size in vscode ?

[@TarunYadav-dp1id]

Instead I created my own gridMaker(dataTable) function, as my data is raw and needs so computation too, after seeing I got some idea of changing it and making function in less line or divide the function in two, first which will arrange the data into An object as final data which will be just then entered into Table. I will give second thought to made any changes or not. But I like this idea. This way my code will be cleaner and more understable and less lengthy at one place

[@SchoneTier]

if i wanna display the real data that fetching from mongodb what should i do to fetch them the way we render the fake data into table body? i mean, create a react form, submit some data and send them to mongodb and then want to get them and display in react table. thank you for the useful vid by the way!

[@nahuelposdeley5323]

when would you make a video of a crud with a form with react query? no one puts out those types of videos they always use react-router or don't finish the Edit part

[@mohitashliya8750]

HI Pedro Keep it up You never disappoint I learnt a hude deal from you

[@sdfsfsfd437]

Buen vídeo. Los paquetes de Tanstack para React son muy buenos.

[@wesosdequeso8360]

I had an issue and solved it with: const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({columns, data: retrievedDataFromAPI}); it has to be explicitly called data

[@joanheguy7577]

Thank you for the great explanations! Very much appreciated!

[@KevinVandyTech]

Hey just letting everyone know, `react-table` is the old legacy version of the library. `@tanstack/react-table` is the newest version 8 of the library. This is pretty outdated information.

[@Pareshbpatel]

A great introduction to the react-table library. So clearly explained. Thanks , Pedro {2023-09-05}

[@d3v1t07]

"Beginners Tutorial" proceeds to move at lightning speed for the whole vid

[@ayazirshad3370]

very informative, well explained

[@thenriquedb]

Great tutorial, thank you very much!

[@brunobueno2183]

Hey Pedro, can you make a video about fetching an api from rapid api? love your channel!! Voce eh brasileiro? obrigado pelos videos e ensinamentos

[@paradoxx55]

Nice work bro keep it up 💪👍👍

[@sonamohialdin3376]

It is so good tutorial thank you

[@AminSani]

Can I have editable rows and cells with React table library?

[@134nithin]

Hi Pedro.. Was just wondering @2:25 was that a VS code extension in the terminal providing intellisense & if so what is it called?

[@haidarezio]

i think it's called fig, it's for mac users only

[@ahmetaydn4416]

part II

[@NurbolNygmanov]

thanks for a great vid, can you advice any materials on table v8?

[@EgoistPlatinum]

great video, thx

[@sherlockholmes3316]

How do you solve the , key warning in the console ⚠️ ?

[@calvinwilliams729]

Thank You can you update your framer page transition? React router has updated their library

[@Dhanushsaji]

Is there any way to fix the table head? Thank you

[@bark205]

This method does not work for me, because it is allegedly no longer supported, and the structure has been changed in tanstack and it is not possible to do it normally. I have a table displayed, but when scrolling, the scroll starts to twitch and the table also starts to twitch and the rows at the end of the table may even disappear

[@gercilisboa3456]

nice!

[@pedromanuelcamargomendez6520]

Cool project thank you very much. Please make it with typescript search, filters, pagination, etc. complete. Thanks.

[@anuvette]

how to make them editable?

[@Trazynn]

I'm looking for a tutorial that exclusively uses a styled component (not a css stylesheet) to style a simple html index with a bunch of lorem ipsum divs. IE, the css and the html both rendered in the component. I guess I'm asking for something so stupidly simple that nobody has a tutorial for it. But trust me, there aren't any. It would be insanely useful because no-code platforms like Framer don't allow custom html and css unless you include it all in a react styled component.

[@paulocesarabudfilho5309]

Great video!!

[@PedroTechnologies]

How bored are u in class lmaooo

[@rromagnoli1]

how can i add rowspan and columnspan?

[@jamjam3337]

👏

[@mrmistyeye7076]

For the poor, foolish, souls that like me have tried to replicate this code in nextjs: be aware that data fetching part can be done server-side only, whilst columns && data-table MUST be client-side components (even without useMemo()), this because useTable() method is using useRef hook under the hood which is not possible on server components. Super helpful video though, thanks a lot!

[@henyadose]

Hey, dude, what's the humblest number to request a salary in USD?

[@bouzie8000]

Lovely Video. Please what vscode plugins do you use for code completion/suggestion and file info? Could you also touch on pagination?

[@kashmirtechtv2948]

Es7 snippets... (don't remember exact name)

[@fabioleonam]

Nice video Pedro! Is it possible to integrate it into Chakra UI?

[@harmanmuhammad3696]

My dear bro Pedro please upload a short video about Firebase HTTP requests using axios ❤️🙏🔥

[@zakidzz]

hellow is it possible to render cards insted of table with react table??? exaple one card with all data from row insted of table row

[@Dadaadad268]

Use react card

[@zakidzz]

@@Dadaadad268 i still want to use react tabe for it fonctionality sorting filters.. but insted of render rows render cards

[@angladephil]

This lib seems overcomplicated ...

[@mpotane]

We need morreeeee

[@TwistedFate123]

A reminder to everyone that this is V7 and not react table V8. Still good content though

[@mikejnrr]

First to be here🎉😂

[@OnlyJavascript]

imagine using Tanstack React Table v8. Lol...no proper docs available.

[@kamichikora6035]

Just to make a table, developers need a library?.... Are you kidding me... I don't understand what's going on in the JavaScript world...

[@PedroTechnologies]

This is an intro video, so I am just introducing the basics of the library. This library allows u to do super complicated things in a much simpler manner. The stuff i showed in the video is just the beginning, to fully understand how useful it is you need to try doing more complicated things

[@YonatanVigilioUsa]

library to reuse tables. sort and pagination. dont repeat your self

[@obidkenjayev7062]

One

[@ygaaaoo]

Good vídeo Pedro. I’m just thinking about you make a video about how to deploy a react app to GitHub from scratch. I think that is difficult to find a good tutorial, I tried everything here and didn’t work for me to deploy an application to GitHub.

[@PedroTechnologies]

Heyy, i have a video on this if you are interested: kzbin.info/www/bejne/h2rRY6CCpr15prc

[@ygaaaoo]

Thanks for the link Pedro. 🙏🏼

[@kafeinfaita6715]

Looks a lot more complicated than simply making a table from scratch tbh.

[@sanatan8091]

nice videio! would love a pt2 with more advanced stuff like column sorting, filters, pagination, etc