React Tables From Zero to Hero

hi everyone in this video we're gonna learn and master everything about react table and how to use this awesome library to render dynamic data from the api do sorting and filtering and much much more on all this video so after this video you will be able to basically go ahead use your api use react table without any complexities and you will understand every single piece about how react table works and how the state updates and how you actually can grab your data from the api and render it straight into tables using the help of react table so after this one this is we're going to create in the whole video so you can create this awesome black table in here with 101 css and we're going to do like filters in here it's clearly seen here for example price uh what you can put samsung it works there is actually sorting works in here on the description the pricing sorting works and we're gonna display this data it's gonna dynamically display from an api which is a fake store apis previously this is the clothing and everything so it's a store api as amazon and you grab the data data asynchronously and in real time grab the data just render it throughout the react tables without any issues and we can have all the awesome stuff in here plus we're also going to implement this hidden button here which of course a custom actions button that you can include and of course you can do it with all that so i hope you guys enjoyed this one and without further ado let's go ahead and get started [Music] so let's go ahead and get started and here i already actually set up the actual projects and created that i use as always create react upsiloid to basically set up the projects and you know just create that and one quick notice so i'm i'm using hilltay wind so i've already set up tailwind with this project with the queer react up projects and taiwan is now working with processing and you know the all the css and everything look all the properties are working properly and it's being processing properly so if you want to like use anyone as they do i'm not going to go cover that you can go and google out how to use cra or queryx up with 10 when you're going to find a lot of guides out there it's pretty simple basically so you can just look at it and you can you can figure it out okay so i already did that i'm going to use this in here with some components basically and we can just go ahead and get started with that so let's start by installing the new dependencies or what packages and libraries you're going to be needing throughout the whole video so first we're going to start with installing uh the most important part which is the react table so the react table is actually the library it's a hoax library it's not a it's not like a ui library or a framework or anything it's just like a hooks library that gives us the functionality to have tables and everything it's not going to render anything ui it's not providing you with you know already rendered ui or css or styling or anything like that nether so everything is just like a functionality hooks you can power up your table and this is where the power comes from it's just like so powerful because it just provides that one thing and it just like focuses on it and it provides you with awesome functionality and awesome hooks to use when you react components so first as i said install react table and we're also going to need axias of course you might also need stock components and as i said before we already installed tailwind i'm not going to go through the process again so that's basically what we're going to be needing throughout the whole video in here and most importantly is actually the react table now if we jump into the page for the react table in here we got react table attack or 10 stack dot com if i'm spelling that right and this is the main page this one is being used by tons of you know developers companies just relying on this for their table management because it's so powerful and it's super super flexible so you can use it however you want and in any way you want basically so that's the part about it and you can use it and to get started obviously just go ahead and get started or you can go to the docs and it's going to give you a plenty of stuff so this is a headless ui library which means it doesn't come with ui doesn't come with rendering it just gives you the utility set before it just gives you the the functionality inside of functions and hooks so you can use them right out of the bath okay pretty sweet now let's jump into installation and here now that's we already did the installation that's simply where it is and here on the quick start you can actually take a look on how to quick start that and you can see it's pretty simple actually so that's what we're going to be doing we're going to start actually creating something like this i'm going to create this pretty simple table and just like show you how to do that and of course we're going to make sure that we grab data dynamically and what i mean by dynamically is just go to the api uh fetch the data so pretty sure any application has to interact somehow or some way with an api so in this one we're going to interact with a free api a store api and we're going to grab the data format and we're going to dynamically render that data on the table without explicitly saying what the data has so that just like the api is going to tell us what the data is and what are the columns and the headers and all the sort of stuff and we're just going to directly render those kind of things okay so this is the reacts application i'm going to start with and let's go ahead and get started i already run beyond start so uh we are good basically to go in here uh there's no issues with that so let's start by creating a new components that takes care of rendering the products or you know the list of table or basically the table gonna be like having all the data inside so for this i'm going to do components and instead of i'm going to create another folder i'm going to name it products okay and this component is actually going to responsible for rendering the table of products so you can imagine this as a store as amazon store or ebay store or whatever that's kind of thing so i'm going to create a new one and this is going to be the index.jsx so as always we start by importing vx and what we need from react library and i'm going to export the main function for that so this is going to be uh products just as simple as that and it's going to have a couple of props which we'll probably not use anyway and that's it what we need um like what you can probably see already i've already created some styles in here so there's actually already a tailwind styles in here with like the app container and the tiny thing so in this video i'm not going to worry about much about the styles i'm not going to walk you through how to create the styles because i'm pretty sure 99 of you guys know how to basically set up a table and what the sound needed and these css styles so i'm not going to go into these details that's why i chose uh tailwind in the first place because it gives us you know all the utility you need and all the classes we need just hook and play and and that's it so that's what i'm going to do i'm going to probably just going to copy the components in here and and maybe what can walk you through but they are pretty simple uh so the components in here are just like you know the css components are the the styled tailwind components which is a table and the table head and table row table header table body and the table data and the bottom which all lock td and t body and th those kind of stuff those kind of uh you know bare minimum important elements for creating or setting up a table basically so that's that's what we need just to get started with and those are pretty simple okay now let's go ahead and get started and start by grabbing the data from the api so i'm pretty sure this is the first step i'll have an api and i want to grab the data from the apm so how am i supposed to start so first you need to hold the data on a particular state right so this is the most simple part is using a use state and i want to use use states in here i want to auto import this uh separately from react library okay this is used it starts as an empty uh array so that's what we want to start with now next i'm gonna go ahead and create a function that allows us to fetch the data that we want so i'm gonna name this like fetch products you can probably come up with a better name but yeah this this looks good already for me all right now let's go ahead and double check what is the api we're going to be actually not going to check in so there's this api called fakestoreapa.com and we're gonna grab the products from so this fake store api just gives you a fake api for accessing the store data and what i mean by store data is like um i don't know men's jeans or anything like clothing electronics like tvs and monitors and you know whatever just basically just like you can imagine this as the amazon uh api so i'm going to grab the other phone so if you send i'm using it here i'm trying to send a get request to the api there you go this is the response and it's coming up with all of these data so the data in here includes like the id the title the price description category image and rating of that particular products so this is just a dummy data we can use to render on the table so that's what we're going to be doing so we're going to try to grab this data and we're going to grab it dynamically as i said before from the api and directly just do some manipulation of this data save it on the state then directly from that state gonna use react table to render it on the table like pretty sick right so let's go ahead and try to do that and reactive is going to help us a lot throughout the process so for doing this um we need to know like what we exactly have in here so we just double check what it is so you can use postman or whatever other http client to check it i'm using here within decline from vs code so that's pretty good now let's jump let me go ahead and copy the url that i'm going to use like to send a request to and here i'm going to select start the response equals awaits axios and make sure to import axios of course and just put in the url you want now if there's any errors i'm going to catch up here with console.log pretty sweet right and also i want to make sure that if the response like if it valid we can say console log products uh our products and let me just go and extract the products on top of here so product equals response dot there okay and last but not least we need to populate this state so we can do set products equals products all right now let's go ahead and call this function on the use effect and if you're wondering why i'm using the use effect in here it's basically because it provides us with a hook on did mount so after the component is mounted this particular callback of the use effect is going to be called for us and we need to call the fetch product so the components knows that oh after it has been mounted and everything i want to go ahead and fetch the components or fetch the product and that's what's going to happen right over there all right now last but not least we want to render something so let's just render something dummy for now hello world or something and just to test if the api works or not and what data we're going to get all right so i'm going to go to the update.js i'm going to try to render products and i'm just going to put it right there that looks pretty sweet um taywin is not defined yeah because we haven't imported that so i'm going to use uh order imports powers of vs code and that's what's going to happen all right so if we access the console i'm going to do console products we got 20 different products and this is what we need to access and yeah already works with the api and everything so that's pretty good spot we're actually in a good place and now we can start actually manipulating this kind of stuff in order to get started with this okay so let's go ahead and put this kind of things in here and let's go ahead and use the react table so for the table api what we need to use actually go ahead and access and grab the table instance and this we can use the use table hook from the react table so remember this use table hook is being imported from the react table is this right here and this one needs to take an object of data that we want to like you know display and everything and the table system here is going to be returned for us then we can i use this table instance to access more data and actually provide our table and make it dynamic so let me explain in a second so i've got to hear a pretty good example so let's go ahead and try to put those this use table is going to need two parameters that are very important which are the data which is the data you graph from the epi the actual data objects or the array of the products basically that's where it is and the next one is actually the columns and the columns what they mean by them is actually what columns that you need to render in your table what columns is like the id for example the price for example an image of that product and those kind of stuff so the columns are of course like static thing that you want to render on your header and because we've got the api and everything so we try to put that in a dynamic way so for this i'm going to just go ahead and give you an example so let's say uh we want to have some data so you always always and this is a pretty good advice you always want to use memoized data and what i mean by memoize data is it's not like memorized it's memoized and reacts memorization basically it just provides you with a way to cache the data if the data didn't change so on every single render if the data didn't change from the previous render reacts won't worry about like go ahead and doing that process again it's just going to save you a couple of like seconds and processing time and it's going to skip it right off bat because the data hasn't changed in the first place so that's the point of all of that um so i'm going to try to access this i'm going to go ahead and copy that i'm going to copy this particular object and let's see how this does so we want to grab the data i'm going to do use memo which is the function that allows us to do memorization and for this i'm going to return an array which of course is going to represent the data objects i'm just going to return this one so i'm going to just not copy paste them i'm going to just like return three of those all right and you've got the data in here now let's go ahead and have the columns as i said before now const columns and what i mean by columns i said before i'm going to use use memo again and for use memo this should return an array so columns and the data both are arrays now for columns in here it uses a specific structure that the react table follows so if you're interested about the other fields i'm not going to cover all of them you can go and check out the react table documentations to check out more of these kind of columns that you probably need to manipulate if you want to go like into the advanced level okay so for the hitter here you got something like the hitter and the hitter here tells it like which or what is the the title of the column that you want to display you can display whatever for example an id and here the second one is the accessor now the action could be a function or could be a property so if you provide a string it's going to access the property from the data so for example here this is the id property so you need to provide the accessory in here the same field name in here or same uh key of that particular object or key of that particular field you can call it whatever but you got the points so we need to use the id in here in order to grab us the value of that particular id so let's say i want to do this id let me go and copy paste that real quick to i'm going to render just uh i think a couple i'm going to do id and i'm going to do second price now for price go ahead and grab me the price and last but not least i'm going to do title okay and title i want to go in and access the title because it's called title and this one is called tile price okay now for this i need to provide columns and data sweet now the table system here is going to give us everything that we need to work with we don't have to worry about doing any of that sort of stuff and we need to actually extract some data from that table instance so i can do table instance and first we're going to need like the get table props which is uh we're going to use later on to just like provide prompts to our airline so this is this is how react table works it doesn't care about like how you render it it just gives you the full flexibility and full freedom on how you render your table how you manage them and sort of stuff but what it takes from is actually just gives you like those inner props those in the functions so you can call these functions and it gives you the props and the problems going to be passed through this element and they can control the elements this way you can control the rendering you can control how elements behave but of course react table is going to provide you with all of that and just like a simple awesome api so that's what i love about it so the get table props in here pretty sweet i'm going to use also to get table body props i'm going to also do the hitter groups and the hero groups in here meaning that what are the groups of these headers and this is what the hitter groups are just like this this particular array for now we already got a single array but if you've got multiple arrays you're going to have multiple header groups if you want to use that and next in here we can have rows rows of data of course and we got this prepare row function which allows us to prepare it all for rendering and um yeah so we can use that for now there's tons of other properties we can access but for now this should do the job perfectly okay now it's going to render our table i'm going to use our custom-made components just to make it look absolutely good all right so i'm going to do in here table and first we need to provide the the first props that we need which is the get table props and this one should go ahead and return the props and of course make sure to use the three dots in here so you can extend these stable props and make sure this one this this particular expression in here this get table props should be the last one so if you want to add the props you can add them here and just make sure that you add this one last because you want to like react table to override whatever comes before that so make sure to do that um the next thing in here i'm going to have the table head and copilot here is helping a lot as always but yeah thank you co-pilot here i can use the header groups so for now we already single got a single header group set before because we have only a single array so we can do that mapping and header group uh yeah where is that okay this is uh this is kind of crazy so we can return the the table row now and for the table row for the table row we can we can also just go ahead and do like the hitter groups and the hitter the hitter group the single hitter group in here can get us the prompts for that particular hitter group so get hitter group props and this what we need as well so always need to pass in the prompts just to pass in the functionality from the table or react table down to the components and the next one here we also want to like do the hitter group mapping so i want to do header group dot map um so we can access that so we can access a column and i can go ahead and access all of these now for that we want to also access the table header so for the table header uh we can do it's basically like we can use the table header in here which is our data or where the table hands is going to exist so this is where we want to render the actual data so i can do table header and um here i need it needs some props i can do column dot get basically the table header so get hitter props okay and this is a function so you need to to do the three dots in here just to extend wherever comes afterward and here we can use the column so for this particular one what we want to do is actually go in and do column and there is this function called the render now the render function here provides you like what the type of field that you want to render and this is just like an agnostic thing from this and the render function is like you telling oh i want to grab this property so this is what the render means so for the rendering here you're passing the name of the property that you want to render for our case we got this header property you can basically have other custom properties and you can just like tell that custom property name in here and it would work perfectly the same all right so i want to go ahead and do header and make sure this is a capital because this is a capital so you want to match up this both of these to work fine and that should look absolutely gorgeous okay we got the table head now the next is the table body now for the table body we also gonna need to pass in some props for that so get table body props pass that down uh the next thing in here is actually when i'm gonna use rows now for rows i need to access the row and um yeah we need to access the row in here and for the row in here what we want is actually first to prepare the row so i need to get rid of these i need to replace them like that i can do prepare row and for this one we can call this function this what all it does is just prepares for us a row it adds like the missing data and everything just like prepares a row for rendering so you need just to make sure you call that before you render any any row data okay uh pretty sweet now we can access the row we can access the cells and the cells are these small teeny tiny details that we want to render you can like imagine a cell it's just like a that little column each cell that's what it is they're just like it's small cell so you need to access cells you need to use the map function in here and of course make sure to return that otherwise you won't render for us and i can do cell maybe you can access the index of that cell okay sorry and we can finally go ahead and render that so we can use the table data and for the table data in here we can make sure that we grab the actual props so as i said before table or react table is all about passing the right props to the elements so we would behave exactly how we want it to be all right and here for the cell you can just go ahead and call the render function as we did before and here you pass it the field that you want to render if we take a look on what is the field that we want to render for that it's actually the cell because for this columns it has a hidden default field that is or default property called the cell which is like this and it's a function it takes the actual row as a parameter and it returns whatever gsx that you want to render so this is by default but you can of course override that we will see how that works later on but for now we only want to just go ahead and render the cell property and we are good to go so remember this render function always works with the columns objects in it so whenever or whatever you define instead of optical objects you can use it with that render function right over there sweet now everything is working in here let's go ahead and see the page um the hidden group dot map is not a is not a function so there seems to be some some thing wrong with this uh so this is called the header groups so this should this should basically look as a hitter group then hair groups yeah i'm missing headers in here so you need to access the headers of the header group as we did accessing here the cells on the sales grip okay or basically otherwise there you go uh has already been rendered so let me just go and refresh that real quick and it gets cells uh update maximum okay something is wrong with this maybe you can we can go ahead and move this fetch method to the last one so we would work properly okay there you go now i can go ahead and refresh that and for the used memo in here we already we totally forgot about passing this as an empty array otherwise it just keeps triggering state changes that you don't basically want okay so just like of the house parameter you want to do like an empty array which means only do it once uh if if that changes but we don't have something that is gonna change obviously so we're not gonna do anything and there you go we've got our table and here we got the title uh we don't have anything else in here so that's why it just has nothing because we have defined nothing for the columns but yeah it works perfectly now let's go ahead and use this particular one and we're going to use it with our api the api you see in here that grips with data i'm going to do it dynamically on how to render all of these kind of stuff in a really good way so for doing this dynamically it basically only needs to happen is actually have to like pull the columns and the data in a particular manner so i'm going to create a new functions i'm going to keep those i'm going to keep those as they are so you can just not have them for reference for now i'm going to create a new one i'm going to call this products uh so products data and this one is going to be an used memo again so always want to use memorization and for this all it's going to return is actually the actual price because this is the data the real deal that we want to pass and yeah you don't want to play around with this so the data is pretty simple now when it comes to columns it's quite tricky so we need to just take care of that so we can do have products columns um for this we can use memo so yeah copilot is a little bit okay so let me let me go and disable copilot for now i don't know why it's being uh for javascript react okay so it has been disabled okay thank you co-pilot now let's go ahead and see what we actually can do for this now for this it's gonna basically return so what we're going to access is actually access a single product okay so we want to have this as a product so it changes whenever the products change so we can just have this on the dependency list right over there now what i mean in here i'm going to access the first product i'm going to grab all the fields of that particular product so if you imagine this one in here so it has a field called id title price and all this kind of stuff so what i want to do is actually look for these objects loop on every single key and we grab the first key name in here the field name as id and title and put them on objects as they are violated like this header it's called id and then access your called an id and you can you can manipulate that so that's what we want that's why we want to access the first one so i want to make sure if products first okay sweet then i can do object dots keys and i can do products zero so i can access the zeroth one first i can filter so i want to get rid of one thing uh this is gonna be called products so i'm gonna make sure that products dots um so let me just show you what is happening here so i want to do like products um or the key of that that should be key right that shouldn't be a product so i want to make sure key doesn't equal to rating because i want to get rid of the rating i don't want to use that it's an object and just going to make things complicated i completely ditch that now i can use the map one i can have key and for the map we can tell it what to return and what not to return basically now for this case in here i want to make sure oh when i use this i'm going to just go in and return header and the header is going to be the key and for the actual accessor the actual is just basically going to be a key too because that's what it does the accessor only needs the actual key of that and it's going to take care of all of this kind of stuff so we don't have to worry about this much um having a kind of i think i have an issue with this expression um so the map here uh the key should be returning that yeah we we do have some some weird issue in here now if products not ready yet just like returning an empty array or something and we shouldn't yeah i shouldn't do that here we should do that right over there uh i believe but uh yeah let me let me double check that so here it needs yeah it needs a parenthesis otherwise it won't work now let's go ahead and replace the columns with um the products columns and the data in here with uh products there sweet now we got both of these not gonna see what's happening uh there seems to be an issue already and basically here because we haven't we haven't we we're missing an s so that should fix it and also notice that on this table body we're actually missing a row so we're not returning a row which is quite bad thing to do so we don't want to do that we want to just like return a row then actually like after preparing that we want to go and do like return table row because we wanna every single uh row there should return a table row for it otherwise it won't work for us and um so i think we can just have this one right here remove that and for the table row as well we're gonna need some some props to get from so we can grow don't get row props so we need to pass in those props to the rows otherwise it won't work with us so that's what we do in there and yeah so that should be that should be pretty good enough uh if you do it there you go so we've got all the rows all the data and imagine this over there is being actually grabbed from the api so if you check that real quick this is the whole thing and the whole thing is happening dynamically so we're not touching much of pieces we're not caring about how the actual data structure is on the epi this kind of stuff it just works and it works absolutely perfectly so that is that is absolutely tremendous and we all have actually rendered all of that data in a dynamic way so i can add a little bit of just teeny tiny detail to look the table look a little bit better which is uh we can go ahead and have that so let me let me just gonna put this this table thing uh just yeah i think i can put it on the side here and that one i can put it from the other side and just just for you to see that in action pretty sure i'm gonna have this overflow thingy which sucks but we still we still want to see that in action so what i want to hear is actually have a class name okay so when i add the function just to double check if this is an even or not so we're going to show uh like two rows beneath each other's in a different color so this this would look absolutely cool just like something optional but that would be really cool so i'm going to do is even and then here i'm going to have like the index and for of course calculating any kind of even number or not so for for that particular function you have just to do the index and module um two equals to zero or not okay that's that the basic part here so i wanna check out if the index is even or not so i'm going to have class name after that so i'm going to do is even i'm going to pass in the index and the index from the top there so if it is even um what i'm going to basically do is actually pass it in sorry passing actually a class name to that so it would work perfectly okay so i'm going to do background green 400. so i'm going to change the background i'm also going to do a background opacity of something like 10 or something okay um and here if not i'm just not going to turn anything and there you go so if you notice that already just like every single one is is quite different than the other so we got this greenish kind of look to it and it kind of looks sick absolutely so i love i love that one uh it looks really good just to have this greenish look into it so you can might you might want to go and increase that a little bit if you want to uh maybe if you're not doing here like 40 or something there you go it looks a little bit more um i can have 30. yeah i think 30 will do the job so it looks absolutely great i love that so just like a quick css trick just to make the table look absolutely stunning now let's say for our case for our table i'm pretty sure a lot of you what we want is actually to add a custom action button on the actual table so what i mean by this imagine that you wanted like each row to have like an edit button at the end or a delete button or something that of course can the user can click and just immediately go ahead to the edit page you just click and delete that particular row so you might want to add that and table or react table in here provides us with an awesome functionality we can just easily add that using the table hooks so for that two works what i can do is actually go and create a new instance um or basically a new function i'm gonna name this table hooks okay and this function takes a hooks parameter which is like what what is included inside of the table hooks or all the other hooks that are initialized with the react table basically now what i want to hear is actually access all the hooks i want to access all the visible columns so i'm gonna just go and do visible columns all of them and when i push a new thing to these columns all right so for that it's gonna give us the previous columns as a parameter and here's gonna give us the opportunity to just push whatever comes afterward now first i want to have the columns because i want the columns to come first like from the right to left or basically from left to right so and the last thing in here on the right and one's actually the edit button so that's what i'm trying to do in here and after the columns in here you want to add a new button which is just a new object given an id for example edit and the header in here which is the button name which is edit which is going to be displayed on top in here all right and the last thing here i want to select sound and this is the property i was talking about the cell property in here takes an object and it can extract from it the actual row you can extract the value or something and for this one it's just actually what you want to render for the optical thing and here you want to return something that you want to render on that particular column or on that particular cell so for this i want to render gsx of course i want to enter the bottom so i'm going to use my button in there on top and i want to render that so for the button i want to do like for example um i want to render inside of that for example let's say edit so the user can click on it anyone have like an on click so once the user is clicking on that i can i can do for example a large uh editing and it can for example do uh for example access the row then you can do values.price so i can access the actual row that has been clicked and i can display the price of that particular product on that particular route that has been clicked so just just to make sure that that works and everything so to use this particular one to use this um this particular table hooks in here so i can provide it on the table instance after that particular object i can provide hooks so table hooks and i can just provide it right over there and there you go just by saving that we already got the edit button in here and there you go it works so if we try to click on that we got edits in and it's just not working because we need to do a plus button on alarms uh sorry for that guys and i do edit there you go we've got editing 22. uh it is another one fifteen dollars and yeah it works absolutely if you just look at it and everything yeah it absolutely works you can take a look on the values in real time in here just click in 59.99 it works so if you want to do this particular one you can do it using react table it's pretty pretty sweet now if you want to add sorting to the table so let's say we want to sort a table by column and what i mean by this you want to like for example i'm pretty sure you've seen a lot of examples like this a lot of tables around you know the globe and internet where you click on the actual hitter in here and you can just like sort ascend in order or in descending order you can just like get it or toggle it back to the default one which is you know as default they start from id one to whatever the last id it is so well that's what we want to do and likely for us for basically react table and it provides us with this awesome functionality without with actually much of overhead we can just go ahead and figure that out it's pretty simple to implement just using the hooks and that's what i use or i love using about react table because it provides you this hooks you can even use third-party hooks that you can basically it's blazingly fast and it's super cool just plug and play and you don't need to worry about that much so for this i can go in and use the use sort by hook just go ahead and make sure you import this from react table again i'm importing all of these from react table here like the use table and they use sort by all of them are hooks from the react table okay now this hook is going to provide us with a little bit of functionality that we're going to probably just go ahead and use now for this one we need to go to the hip table header and here we're actually rendering the actual table here so there is other stuff so if you take a look on this header props it takes actually a prop getter so what type of props we need for this i'm going to tell it oh let's go ahead and provide this with some actual sort props because we can do that so i can go and do column dot get and go ahead and get me get sort by toggle props there's other props actually but that's what we want to do in here and that's for this particular case that's all i'm gonna try to do in here okay um must have apparent elements i don't know why that is okay just a parenthesis now what i want to render as well so alongside the header alongside this for example category i want to render a carrot uh or an arrow basically just tells us what is the order either it is ascending or descending or just like by default if there is no error basically for that i'm going to use some emojis in here just to make sure that we do now i can access the column and the column here has a really cool property that allows us to check if that one is sorted or not and the type of sorting of course so i'm going to do like is sorted which is a boolean so if it is sorted i'm going to go and check that again i'm going to do is column is sorted descending so if it is sorted and descended what would i do i want to render this error so let me just grab this arrow real quick it's the pointing down air which means we're actually in a descending order and if it's not basically we want to make sure that we aren't in the ascending order all right so just make sure pass that in and last one is if nothing i'm not going to basically render anything just return an empty string there sweet now let's go and see if that works or not for those um make sure we going to return that there you go now it actually changes my mouse cursor into like the pointer and if i click this we see that and actually it has been sorted let me just going to show you that and the category we can just do that in a descending way or we can just toggle it back for the price you can check that out like start from 795 and it just goes all the way up and that means that has been sorted if you do that it's not from the highest price and it goes down and of course you can toggle it back it's the same with the id we can do it the title basically any column and that basically works as charm as it could be of course the idiot we can't do it because this is a custom button from us but yeah anything else it can happen and it can work as good as it would be sweet and one thing i noticed actually i don't want to just go in and display an image as just this url i want to display a real image so when we're actually mapping the data in here i can go and check if the key equals an image and this is of course you need to know the type of properties you're getting from the api otherwise you won't be able to handle that properly okay so if it is an image what we can do is actually return a custom object for us this custom object includes for example header is going to be the key the accessor is going to be the key and we can have a custom cell the custom cell here remember it returns to us whatever like the gsx you want to render for this one i would render a custom image so serve it as custom image with an src of the value and this value basically variable is actually this it includes basically the url so the url is the actual value okay sweet enough we got the src we got everything and um yeah we might want to also go ahead and do some maximum with there's also that so i want to make sure i want to do like oh i want a maximum width of the image just to be 100 pixels and not more of that okay or maybe maybe it's going to do this 50. uh yeah okay good now if we save that and this should load and there you go we got that i want to i want to have this a little bit bigger than than 50. uh if we refresh that i think yeah because this is responsive so that's why you see it right here but if you just like you know make that a little bit bigger it looks much bigger and much better now we got the images all sorted out for us so let me just get it back to the place now the last thing in here we want to do is actually introduce uh react table filters or global filters and what i mean by filters is you can imagine this as filtering the data of the table any way you want and this is the the most common way you can probably use this is actually using or throughout a search bar so if you're familiar with search bar on a reacts or any table you can probably use that in this particular case and you can use global filters to filter the table data and just show the data that of course the user has times on that input or search input so that's what i want to do in here and for doing this i want to do a globally of course so you can put anything and you can go ahead and search on all of the columns any columns anything that matches on any of the columns that are being rendered you're just basically going to search for that as you can like filter it out and it's going to show you that all right so that's what i try and do in here and i'm going to create a new component or basically i'm going to go in and select inside of the same components in here inside of the products i'm going to create a new file i'm going to name it global filter you can basically name it whatever but i'm just going to do it like as a global filter okay so for this it has a couple stuff as well it has some css i already created just to make the search bar look a little bit better but uh yeah that won't be that won't be a problem for us you see i'm going to copy paste this because we are not focusing on this kind of stuff and also we need to make sure that import 10 win from that and we are basically good to go all right sweet so i'm going to go and export global filter and this particular global filter is going to take a couple of props you're going to need so these props are i'm just going to increase the function so the props are basically uh you might want to like um okay just i don't know why this is uh just been going in red like that's okay so that should work um for these what we need is actually the pre global that already has been rendered so filtered rows so this is actually the rows are already being filtered and everything um also i'm going to like introduce the global filter and last but not least i'm going to do like set global filters so we could set and change the global filter settings and you know configuration and everything all the current filter that is going on okay so we can have that this way um for this we can actually basically access quite a lot of stuff now let's say i want to do first is actually access the counts of how many rows we already got before filtering so you can tell the user oh you are actually going to filter this amount of froze for us we got 20 just just a cool feature to have so we can access the global featured rows and we can access the length because this is actually an array sweet the next one i can go ahead and have this in a state and i can do value and set value i can do use state and i can make sure that this starts as an empty array or basically because we want to have this as a global filter so it can have this starts as a global filter passed in throughout the props already the next one we got another thing which is the unchanged now the unchanging here takes actually the the value that you want to do but it takes in a different way you want to de-balance this so you want to do this asynchronously you don't want to filter right over bats you don't want to like when the user types something in like right on the first crease track you go a filter you want to just like waste and hold down a little bit so let the user finish typing then you can basically start looking on the table this is much better it's much much better in terms of performance and user experience so you always always need to think about debunking and likely for us react table provides us with an awesome function or hoax that allows us to do exactly that so it can do use async debounce and this is just not already a function in here so you can go ahead and use it this way and just like it gives you like usual d bounce thing so it takes the value of course and you got that kind of like returned for you um yeah we need to return that because it's an object and it can go and call the set global filter so i'm going to set the value or in defined if there is nothing so if anything all of them value has been set we can do that and here you can specify the default way timing and for example when i wait 200 seconds or 200 milliseconds you can do like 300 i think that would be better sweet now let's go to render the thing i'm going to do search container first uh second in here i'm going to do the search text like what you want to type in as a label for example search and two dots and the search input or basically just the input that's what i've named it and for this one for example it takes the value or empty string um it takes for example okay sorry on change so you can pass that in three two um so it takes an e value and here you can you can tell it like what you want to do so for example we want to set the value right of the bat and why setting the value because we want to update the value of the inputs in here as soon as the user types but we want to also wait on the unchanged so that's why i'm going to do e.target.value and the next thing here i'm going to trigger the unchanged so we can change the filter data outside of that so i'm going to also pass in the same target value which is the value of that particular input sweet and last but not least in here i want to have a placeholder and i want to do uh on the placeholder let's say i want to go and do like something count records so like shows the user tells the user oh you got this many count of records that you're going to filter through sweet right now let's go ahead what left for us is actually just to call this filter and actually make it work for us so here we need to actually do a use global filter which is as well imported from the react table so make sure you call this before both of these because filters comes first then hoax comes after that on on the function function parameters sorry okay and here i want to render something so i want to go ahead and use react fragment in here just a container and before right before that i'm going to go and do global filter and it can do like passing everything so the pre global filter grows in here um i can go in and grab that and you can also grab the set global filter and i can grab the state now this states value or this state variable is going to tell us like what is the current state of the whole table so if you want to like know anything about the table or control anything this state is going to tell you the truth about the states or the actual state of that particular table okay sweet now we can access those so for this we can do um free uh what is that so pre global and the set global filter and the last one is actually the global filter so you can do states dot global filter sweet now after rendering this is going to render us um i think so yeah we should just like refresh that there you go we got here already so if you want to search i think we got a type on search uh that should fix it so we got search you can search 20 workers and yes we already got a 20 record so let me just give you that now let's say i want to search um let's say i want to search for a monitor or something do a monitor there you go we got a samsung 49-inch monitor here it's a curved monitoring electronics just search for that um let's say i want to search i don't know men and it's going to give us all men's stuff all men's clothing it's right here let's say i want to search a price which is like for example 22 there you go we got 22 and basically this is not a price maybe there's another number that is 20 too and it just like finds that and just shows you that so that's basically what's happening here so this is this is a 22 right here so you got the point because this is a global search filter you don't have to do anything if you want to have this specific to the price or something you can have it for that particular price you can basically like select from drop down and you can implement that the way you want it but the simplest way and the easiest way is actually this using global filters and imagine we didn't have like to type a lot of code or do a lot of configuration to do that react table gave us everything we need and all we have to do or all we did basically is actually provide it with the needed hooks simple right straight forward and pretty simple so hope you guys enjoyed this one has enjoyed making it and hope you actually enjoyed react table now you should actually be able to get started with react table you can just install the rack table and start actually rendering the data from a dynamic api without any issues so you can get started now hope you guys enjoy this one and catch you all hopefully in the next ones [Music] [Music] [Music] you

Channel: CoderOne

Views: 8,957

Rating: 4.9411764 out of 5

Keywords: React, Angular, Vue, Master React, Advanced React, React Tables, HTML Tables, HTML Table, CSS Table, Table component, react-table, React-Table, Create Table React, Advanced Table react, basic table react, Basic table HTML, Design Table, Dynamic Table, Table with API, Table sorting, Table filtering, HTML Table sort, HTML Table filter, custom action buttons table, React action button table, Table action buttons, HTML Table component, Table element, Vue tables, React.js, Table

Id: WRKEjPq75BY

Length: 49min 37sec (2977 seconds)

Published: Sun Sep 19 2021