React-Table Tutorial - Beginners Tutorial
HTML-код
- Опубликовано: 29 сен 2024
- 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: pedro@pedrotech.co
Tags:
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
#reactjs #react-table
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.
Please when doing pagination, kindly use real data from API with paginated data.
yes please 😇
@@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.
Try to Play with examples from docs guys, IT can be confusing at first but its doable
Can you do it using axios.
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.
nice videio! would love a pt2 with more advanced stuff like column sorting, filters, pagination, etc
hey! cool video! thank you for posting.
what s the extension uyou're using to know the imports bundle size in vscode ?
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!
nice videio! would love a pt2 with more advanced stuff like column sorting, filters, pagination, etc
these advance things have so much complex and lengthy code to be understandable
This lib seems overcomplicated ...
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!
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...
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
library to reuse tables. sort and pagination. dont repeat your self
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
You know it's a good day when Pedro drops a new video!!
exactly
its a new react knowledge when pedro upload new video.
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"
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.
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.
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
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!
"Beginners Tutorial" proceeds to move at lightning speed for the whole vid
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
finally someone made a tutorial of this. haha. hopefully you can create more tutorial about this react-table
Looks a lot more complicated than simply making a table from scratch tbh.
Good Video. I'd be great to see a next one with more advanced features !
Hi Pedro.. Was just wondering @2:25 was that a VS code extension in the terminal providing intellisense & if so what is it called?
i think it's called fig, it's for mac users only
Buen vídeo. Los paquetes de Tanstack para React son muy buenos.
Great breakdown. The docs have gotten better, but this was a more helpful walkthrough!
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.
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
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
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
That's what I am looking for 🤠
My dear bro Pedro please upload a short video about Firebase HTTP requests using axios ❤️🙏🔥
Thanks for making this video, such a great explanation for beginners!
It is so good tutorial thank you
imagine using Tanstack React Table v8. Lol...no proper docs available.
A reminder to everyone that this is V7 and not react table V8. Still good content though
A great introduction to the react-table library. So clearly explained. Thanks , Pedro
{2023-09-05}
Hey, dude, what's the humblest number to request a salary in USD?
Thank You can you update your framer page transition? React router has updated their library
Can I have editable rows and cells with React table library?
how to make them editable?
You are the most inspiring and amazing tutor
We need morreeeee
HI Pedro Keep it up You never disappoint I learnt a hude deal from you
thanks for a great vid, can you advice any materials on table v8?
part II
👏
Is there any way to fix the table head?
Thank you
How do you solve the , key warning in the console ⚠️ ?
nice!
Cool project thank you very much. Please make it with typescript search, filters, pagination, etc. complete. Thanks.
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.
Heyy, i have a video on this if you are interested: ruclips.net/video/Q9n2mLqXFpU/видео.html
Thanks for the link Pedro. 🙏🏼
Wow, i really like your way of explaining!
Thank you for the great explanations! Very much appreciated!
very informative, well explained
how can i add rowspan and columnspan?
Great tutorial, thank you very much!
Nice work bro keep it up 💪👍👍
First to be here🎉😂
One
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
Use react card
@@Dadaadad268 i still want to use react tabe for it fonctionality sorting filters.. but insted of render rows render cards
great video, thx
Lovely Video. Please what vscode plugins do you use for code completion/suggestion and file info? Could you also touch on pagination?
Es7 snippets... (don't remember exact name)
Nice video Pedro! Is it possible to integrate it into Chakra UI?
Great video!!
How bored are u in class lmaooo