React-Table Tutorial - Beginners Tutorial

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be teaching you guys how to use the reactable library in order to create really simple tables in a react application so reactable is a very famous Library it allows you to do a lot of very complicated stuff related tables in a very simple way so for that reason I wanted to introduce this video we're going to be building this very simple example app over here the CSS doesn't matter I know it looks kind of cool in my opinion but I won't be showing you guys how to write the CSS because it isn't the point of the video however uh we're just going to be building a simple table like this where you can generate uh put a bunch of items have columns rows whatever you want headers for each column that kind of stuff and we're going to be doing this entirely using the react table Library also the data we're putting over here obviously in your case you can use any kind of data the data we're using is actually a fake data that I got from a website I'm going to leave the link in the description if you want to use the same data as an example together with all of the code I'm going to be writing this video you can just check it out in the description so this is basically where we're going to be building before we get into the video if you could leave a like I would massively appreciate it so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so let's start the tutorial I have a very simple application already set up over here it's basically nothing all it has is an app.js and app.css and index.js and also have that data that I put in the description it's just a Json file with a bunch of like people's names and information again if you want to download this you can download it in the description or just use the data that you are planning to use in your project so all I've done in this project so far is I just imported the fake data over here at the top and that's basically it you'll see we do have the CSS this is our app over here we do have the CSS because I already put the CSS like I said before and we're going to be adding like class names and stuff attributed to the CSS however um it's basically starting from scratch so the first thing we want to do is we want to install the library react table so I'm gonna open over here another terminal and I'm going to say yarn add react table just like this if you're using npm it's just npm install react table so it finished installing I'm also already running the app as you can see over here um so you should probably start running yours too so what I want to do is first of all I want to see if if I can just like just look at this data over here this fake data right so some way I can do this is I can just console log the fake data just so we can analyze it a little bit so I'm going to come over here I'm going to open up our console log and you'll see that it is an array with 500 elements right it's divided in this certain way where as you can see um we have an ID we have a first name we have a gender and we have a last name email and University those are the pieces of information that I want so those will be The Columns of our table um and to set this up we have to first uh import something from the react table Library so I'm going to say import for from react table just like this react table and I'm going to import a hook called use stable so this is uh a very cool hook because it will basically control the entirety of our table using react table and this Hook is basically set up as follows you need to pass to it two pieces of information the first piece of information you want to pass is basically a list of columns you want to have in your app and the second one is the data that you want to fill up inside of your table so we're going to first set up the data we're going to say data is equal to and we can just set it equal to fake data but as per the documentation in reactable they recommend using they recommend memoizing um the both the data and the columns you you get so I will just follow what the documentation recommends to memorize you can just say use memo you don't have to say react.us mean or you can just import USB move over here as well and then we're just going to return from uh this function the fake data and we're going to put an empty dependency array over here because it doesn't depend on anything it's just the fake data that is returning so this is the data that we're getting um then we also need to define the columns The Columns will be a little bit harder than the data because the data we already have it done if you were fetching data from an API or something like this here is where you would do this um but since we already have it's just a file it's way simpler but for the columns all we do is we just Define this variable called columns we set it equal to react dot use memo like we've done before and this will return an array because the columns are actually in a format of an array so how exactly would the column of our table look like well in reactable you define a column as something that has a header just like this and the header is basically what you write oh I don't have the example running over here but it's just the text that actually appears in the table when you render it and it will be uh for example if I'm rendering the the ID um column I can write it either like this or like this or I can write identifier you know it doesn't have to be exactly like the data looks like because if you look at them the data ID obviously looks like this right but if you want to put a different name you can just set it up over here in our case I'm just going to write ID just like this and then to explain how like which specific part of the data we're going to get for this column you have to put exactly what is over here right exactly how it looks in the data and this is called the accessor so the accessor has to look exactly how it looks in the data so just to make sure the header is for labeling purposes the accessor is for getting the data and this is how a column would look like so we're going to have a couple columns in our project so I'm going to set up one for the ID one for the first name one for the do you have a last name yeah we do have a last name uh one for the email and one for the University no we have we also have gender so we have a bunch right it's giving me errors over here because it didn't put commas so we have to put a comma between all of them and then save it and we have to change the name for each of them so I'm going to do the first one over here I'm going to put first name and the accessor is how it looks over here so it has to look like this and I'm going to cut since I'm going to do all of them and be back in a second okay as you can see I finished setting up all of them um and they look exactly like I said they would look uh so this is pretty much it for setting up our columns it's not that complicated and now we are able to use the use table hook now the use table Hook is really cool because what it does is it takes in this two things which is the column and the data so I'm going to say use table then you have to pass in an object with both a column and with the data and then it gives you back this thing which basically all it is is a bunch of functions that you can use to define your table so you can either set it equal to an object like this or a variable like this or you can directly restructure them over here so this will return a bunch of functions so you can grab those functions by the structuring them through this object so what is an example of a function that it might give us well the get table uh props is one of them there's also the get table body props there's the header groups there's the rows and there's the prepare row function now you might be looking at this and you might be thinking okay what does this mean what are all these functions supposed to do well they are the primary and fundamental functions that you have to use in order to to set up your table in the react table now after I write them I'm gonna go back and explain to you guys exactly what each of them mean because they are a little bit confusing in the beginning the Syntax for react table in my opinion used to be a way simpler before especially because they used to provide components already directly made for you however the library decided to change their approach in order to make it more versatile and allow people to customize their their tables in a much personal way so now it may look a little bit more complicated when you set this up however in the long run it is extremely important because you will be able to customize your tables to whatever you want and you will get used to the syntax really quickly so don't be scared if you get confused by the syntax I'm about to write right now so the first thing I want to do is create a div which is going to contain the um the table and since I am using CSS I'm just going to put the CSS class name that I used in my CSS file then over here we have to obviously set up a table now a table is just a table element like this and in order to describe your table you have to have two parts of it you have to have a t hat which is the head of the table and you have to have a tea body which is the body of the table right so for the t-had which is what we're going to be working through first we have to set up the headers of our or The Columns of our table now you see over here we have this thing called header groups and this will be extremely important to make this work we also have this thing called table props and this is actually just props that might exist inside of your table like I said I'm going to explain to them after I'm finished writing the code just because it will make it simpler for you guys to understand when the code is already written however to use this get table props you just destructure it like this you say three dots and then get table no just get table props and it's just a function and this should work like this now for the T head what we do is we Loop through the header groups because header groups is actually an array and we Loop through each of them by saying headergrips.map and we're going to grab each header group just like this and for each header group we're actually going to return back a TR which is a a tag that exists in HTML you might be used to it it's common in every table then for each gr we want to destructure the header group props for that specific header group so we're going to say three dots header group dot get header group props you might be seeing a pattern right we're putting props to each element specifically depending on where they are in our table uh then inside of our TR we obviously have to um Loop through every single header so we're going to say header groups or header group dot headers dot map and this is where we're going to get each specific column so each specific column that we need in our app then inside of here I'm actually not going to use curly braces I'm going to use parentheses again so inside of here uh this is where we return our th which is another tag in HTML and similar to what we've been doing so far we have to destructure the header props for this specific column so we're going to grab the column and say get header props just like this now over here we're just gonna display the header for that specific column so we're going to say column dot render and then header okay this is probably super confusing for you guys and it's fine because this is just how the syntax looks and I'll explain to you guys right now a little bit of what we wrote so first of all the get table props this method just is an object it returns an object of props that can be spread out into a table uh element and uh it can includes like a bunch of attributes that you might have in a table such as like class name style ID anything that you might want to apply to your table element and you have to do this just in case uh you add those attributes and when you add those attributes they will be displayed over here make sure whenever you put uh when you destruct your stuff like this uh props like this like we're doing you make them the last prop that you add so I could technically come over here and add a prop um I don't know an ID or whatever I want to put as a prop but it has this has to be the last one right so then what we did is we looped through header groups but what exactly is header groups well this is an array of object 6 that represents the header groups of each table which might sound a little bit redundant but it basically just corresponds to each object containing or corresponding to a specific header group that contains information about the columns in that group such as like their table that their labels or maybe like how they are shorted right so it's it's you're just grouping all of your headers and by headers you know what I mean like this kind of stuff um and you're looping through each of them to then display um your TR right and your TR like always you'll have to get the props because in case you have props you would have to destructure them like this so we do this for the TR and then we Loop through each header group we grab the headers and now we have access to the columns uh then obviously we have to display the th uh which is a table header and then we just structure the props again like we've been doing so far and in you the reactable library you have this thing called render and you can specify what you want to render from that specific column so if we were to I don't think I can see anything right now right but I'll show you guys uh what this does after we have a table because I'll manipulate this a little bit so you guys can get a clearer idea but for now uh all we're doing here is when we say column.render header we're just telling it to display whatever each column has on this value over here the value with the key called header so now we have basically the columns in t hat of our table done and I know it seems like a lot but don't worry like I said it will become easier as it comes now we have to do something that's going to be very similar on the tea body but it will display the body of the table so what we have to do is we have to first of all destructure the body props and we do have a table so you might be getting used to this because of what we do with the with the t-had but we just destructured the table body props then we come over here and we actually have a we actually got something called rows from the use table hook and Rose is just the rows of the table so I'm going to say Rose dot map and we're going to grab each specific row just like this now we do have to return it like this with a curly brace because before we render our row we do have to do something called prepare row just like this prepare row and I'll explain in a second like I said what prepare word does uh but after we prepare the row we can return the row um as a UI just like this and what we're going to return is a TR write a table row and um over here in the in HTR you do have to get the props so how do we get the props well you just say row dot get row props just like this then inside of here we have to get each row look for their cells and loop through each of them to get their specific cells and for each cell we're just going to return right or we can actually we don't know how to return it like this we can just return it um with some parentheses right uh so for each cell we'll return is uh a TD just like this and in htd we do have to get some props now what is it called here it's cell dot get cell props and instead of the TD this is where we render this cell so we say we say cell the render so just like this and this is basically it actually I believe it should actually be displaying everything uh or not let's check it out is it displaying it's not displaying let me check out why uh there's some errors oh I figured out uh the error I accidentally forgot to um put a dependency list for the columns so if you want to do that you just come over here and you put an empty array over here and yeah now you can see our table is being beautifully displayed which now I looking at it I think if I hadn't even put anything for our tea body uh it would have shown something yeah I could have just shown you guys this before but if you don't put anything for the body you do get the table headers just like this like I said before so this is how we're displaying the header but if we want to display the body this is exactly how we would do this and you can see all of our body is being displayed now again all the CSS uh to make this look cool to make this look scrollable and not uh display everything at once it's all just CSS has nothing to do with react table um but I'll explain to you guys right now uh what all of this functions and and syntax over here actually meets so for the get table body props uh it's just like before you're just getting the props like we've done a bunch of times in the table header as well now the most the coolest one over here the the most different I think is the prepare row function so this method is used to prepare a row for basically just rendering it is called in each row uh so whenever you Loop through the rows array it will be called each for each row that you're rendering and it basically just takes the row as an argument it can be used to perform any necessary calculations on like how to format the row before it is actually rendered so you might not actually need this as a beginner if you're not making any complicated super complicated stuff but it is a necessary step in the react table Library syntax to actually render your rows in your table um then most of what comes after after this is just uh similar to what we've been doing so far uh you just get the props then you get the row and then for each row you do have a cell and a cell is just uh you know what I mean like a specific cell uh because you're you're kind of getting when you say roll dot sales you get the list of cells in each row right you get all the cells over here this is a row this rectangle over here is a row I need to sell specifically you get them you map through them and then when you say cell.render cell obviously this over here is part of the cell object which we don't we didn't create it's just part of how the library works and this value over here is basically the text that you're putting inside of your cell this is what it's rendering so this is basically it for um creating a simple table using react table now what you might be thinking is why did I have to do all of this it seems way simpler to just uh maybe even handle this on your own or use a pre-made component well let me go through it by steps well creating this on your own yeah it might be simple for a beginner table for a simple table uh but as you scale your tables up or as you have to add more and more complicated functionalities to your table it will become harder and having a library such as this one will come very handy Now using a pre-made component well yeah that could be cool if you're making a project that will need a table that basically won't be customizable at all then yeah it's fine but you won't be able to make a lot of changes to match whatever you want and being able to use the flexibility of this library is really cool especially because it's one of the most common libraries out there also there are a lot of benefits specific to react table the main one in my opinion is performance because reactable is built with performance in mind so it basically just uses a virtualized rendering system that will only render the rows that are currently visible in the viewport which makes it very fast when dealing with a large number of rows which is really cool and it will be will make your project just way scalable I've talked about virtualizing lists before so this is something that I think is really cool not to mention like I said it's highly customizable it also has built-in features that I didn't include in this video because I just wanted to show the basics but if you're going to see a little bit more of an advanced tutorial on this you can actually do a lot of sorting filtering pagination all that kind of stuff with this lab library and that's what it differentiates because it's it might be a little bit complicated as a simple table but as you scale it up it will make your life way more easier and finally it is a very small library to be honest like I I you can see over here it's like it for whatever it does it doesn't take a lot of space it doesn't increase your bundle size by that much it is known to have a very small footprint and this is important because usually tables are used in applications like big tables are used in applications that are already big so I don't want to add a library that is going to increase the bundle size a lot when your application is already big so yeah that's those are the positives of this Library um I really hope you guys enjoyed this video If you enjoyed it please leave a like down below and comment what you want to see next subscribe because I'm posting twice a week and I would massively appreciate it and yeah that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] thank you [Music]

Channel: PedroTech

Views: 77,881

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react table, react-table, react table tutorial, table in react, tables in react

Id: A9oUTEP-Q84

Length: 22min 43sec (1363 seconds)

Published: Tue Jan 24 2023