Material Table: The most powerful table component for ReactJS

hello everybody uh today we will take a look at a really popular library a table library component library for react.js application the library is named material table and as the name suggests this table is built on top of material ui which is a very popular ui framework and as a table component this this library is hugely powerful today we will take a look at some of the features this table offers to us and see how to take advantage of those here on the left side of the screen you can see that i have already created a project with create react app uh and i have removed some unnecessary files from here so this is the current status of the application just an headline that says material table demo ah we will add some table components to this project later to use material table if you go to their documentation you can see that you need to install three uh packages one is material table itself one another one is material ui code we already talked that this table is built on top of material ui so you have to add that as well and if you want to use material icons you can install the material icons package as well you don't have to absolutely have to use material icons you can choose to use some other component library as well i'll show you how to do that but for our purpose we will add these three libraries one is material table material ui core and the material ui icons on the left side of the screen you can see that i have already this added these three dependencies so this will be your comment for that okay ah after you uh add this uh dependencies to your project we are ready to use material table let's first create a new folder and tables and create a new component as well let's give it a name of basic table dot js uh okay so how actually material table works material table works in a very simple way let me explain the code to you first you can see that there is a data obviously in your table you you will want to show some kind of data and this data is an area of objects currently we can see that there is a simple object which has name surname and birth here and two items in the data you can have as many items as you want and also there is a columns property this columns means uh which piece of data will map to which piece of ah into which column for example this name column the field name will be mapped to a column in the actual table with the capitalized name surname and birthday okay so ah let let's use this basic table import this basic table into our homepage and let's see what it gives us okay uh it's taking some time so let me show you the table okay here is our basic table we can see that the name is mapped here in the name column the surname is here the bar theory is here also we by default we have the search functionality in our table which is pretty nice and also looks like we have the pagination functionality here and so let's try to search something and see if it works yes it works if i search for fizer yes we can see that as well so this is very nice we already have a uh basic table which has the search functionality by default okay ah for viewing blazer i will we don't need i don't think this dies let's simplify a bit uh let's give a margin of 50px yes now it's much better okay so this is a basic table but if you look closely you can see that this table doesn't look all right for example here you can see the words s e here are some weird characters some weird characters here so what's happening i i'll tell you what is happening we talked earlier that material table uses icons separately it doesn't have the icons built into the table so we already installed the dependency for the icons but we didn't use the icons inside our table yet and if you go to their documentation you can see on the install page on the bottom part they have shown how to use the icons properly so the idea is if you try to import all of the icons at once it will be very heavy unless you have the support for tree shaking you should in in ideal world you should import each of the icons one by one and use them inside the tables but this can get very annoying because obviously you will have a lot of tables and a lot of icons and importing them one by one can be a bit challenging so to solve that issue what we will do we will create an icon provider uh that icon provider will have all the necessary icons for us and we will reuse that throughout our project okay so let's create an icon icon provider for example yes and put the code in here okay let's see what's happening here we have i we are importing the icons one by one and we are creating an object with the icons with with their appropriate names and we are just exporting the icons from this comp component this is pretty simple stuff ah earlier we i talked about how we can use a different icon library ah to be used with this material ah material table you can see that we are importing the icons from material ui here but if you want to use a different icon pack for example font or some or something else you can install that library import the icons here and you will just replace the icons name inside here okay we are not going to do that we will just use this table icons throughout our project so this is the icon provider file that we can reuse in all of the uh all of the table components basically so to use that you have a special comp special ah prop named icons and you can see its already suggesting us to use the table icons [Applause] we may need to import that [Applause] yes after importing you can see that oh it says stable icons okay now you can see that here is the search icon here is the down correct the forward and backward icons they are rendered properly so this way you can use the material ui icons in a clean and nice way and the way is to use a diff different icon provider as well okay let's see uh how we can improve our table for example ah almost all of the tables have some actions associated with for example some kind of row action so you may want to ah delete some of the row row data so how can you add that this is very simple if you use material table ah for let me first say that there are two types of actions one type of actions those will work for each row for example if you want to delete a row then you will need to have an action button or something like that on each row and there are some table actions for the whole table for example you may want to have add a record to the table in that case you have an action button somewhere on the toolbar to say that add a new record or something like that so we will i will show you how to use uh how to create these two types of actions and how we can modify those for that material ui a material table has a special prop named actions it's an array of actions you can see here ah we are adding two actions here the first one is the delete user action so you will specify the icon here you can see that this is the delete icon so you can change whatever you can use whatever icon you want ah that delete user tooltip for example when i hover it says that delete user to give the users a hint as this is only an icon and down click functionality so what do you want to happen if ah someone clicks on this so currently we are just uh showing an alert here you can say we can see the alarm okay so this is the row specific action so this is the default action so if you add an just add an action it will be a row specific action but here we can see a special action which is on the top of the table that means this step this action is for the whole table and to enable that we have added a separate action here there is a special property named is free action so its free action means this action will be uh applicable for the whole table so uh this is this way you can create two separate kind of so here you can you can easily understand that we can add as many actions as we want so we have had two delayed actions which is obviously stupid but ah this is how you will do that so this is very easy right uh okay so let's say uh you don't like this uh delete icon for example you want this delete icon to be something else your own component or something how do you do that well material table gives us the ability to overwrite some components and this is very easy to do as well to override some components the components can be the toolbar you can change the look and feel of the toolbar you can change the look and feel of the footer the headers the rows the buttons the actions there are many options i will link link the appropriate documentation page for that but for now our objective is to change this delete button we don't want just an icon here we want to have our own button here how to do that we can do that by using this components property so what this components property does this components property gives us the ability to override some things for example here we are overriding the actions component so earlier our actions had a delay button but now for example we don't want this attraction it will be easier to understand so we are overriding this action button and we are rendering our own button component here so now here we are saying that this is a custom delete button so here we are saying using this button component to be rendered instead of that icon so now it will do the same thing as before we do not have to do anything else the action will work as expected but now we have the ability to modify this for example we may want to add some styling to it for example something like that maybe we want a black border right okay so ah this is the ability this is a very nice feature that we can modify the action buttons here right next uh let's uh let's render some image to our table right now we can see that we are only passing the columns and the data and all of our datas are being showed here as text but do you always want that for example if in our data we have the image of the user as well for example let us add an image url for right we definitely don't want to add this image url for example do we want something like this [Applause] what will happen it will just show the url as a plain text but obviously we don't want that right we want to show an actual image of that user how we can do that this is also very easy to do we will just add a special render so what do we want we want this column to be rendered in a special way so we will add a special render property here here you can see we are adding a render property this render property is returning an image component this image component has the source property which matches with our actual data's key so the our key is image url and we are entering the image url here so whenever we want to modify some column we want to modify how a column looks we can use this render property of this columns array to render whatever we want so we can render a image a card or anything we want actually so this is very powerful for us right okay so now let's talk about uh another special thing about this material table this material table uh has a very very powerful prop uh powerful feature called options and with this options prop we can add a huge a multiple numbers of features just with turning them on and off right so there is a powerful feature of material table is it allows you to export data into excel or pdf uh i have never seen any other library doing that this is really really helpful in many cases i otherwise i will have to use some kind of special excel processing library like react excel or something to export the data but now to export data from this from our table what we have to do we will just add this export butter to true turn this on inside this options prop and now we have a special icon here which says export let's try to export it as a pdf and it will download a pdf for us where you can see that our data is being downloaded as a pdf this is really really nice okay but uh one thing you have to keep in mind that ah this export will not happen for this specially rendered properties so you have to turn them off i will link to the documentation so you have you can also turn on and turn off some of the ah columns that you don't want to be exported directly right so this image we don't want it to be exported like the url because uh that that's meaningless okay so this is the export button uh another nice option that you can turn on is the grouping button so what grouping does is it creates ads in another uh section in the table and now we we can drag and drop this columns you can see we can drag and drop these columns if we drag these columns here it will group the data by the name muhammad so we can't understand only by two piece of data let's add a similar maybe muhammad kashin and another may be muhammad right so if we want to group all of the users who has the first name as muhammad we will just group it here and you can see that under the name muhammad there are three person faysal kasim and hashem and under the name name raham there is only one person named so this grouping feature is really really nice and to turn it off you just need to pass these options you don't have to do anything else okay ah from the very beginning you can see that we already have a basic search functionality search per here but maybe sometimes you don't want the people to search we can easily turn it off here by default it's on you can just pass it as a fault and the search bar will go away so from this place you can uh actually do a lot of things also if you want to want the ability to sort data you will just add the sorting as true and here you can see that you can sort the data by by their name and uh one thing to remember this sorting functionality works lexicographically so if you want the your data to be sorted in some other way you have to do it manually and obviously you can do it from from the column that you want to sort in a special way for example we don't maybe we want this name to be sorted in a special way we can mod provide a function here named custom sort into the columns and here we can specify the function that is required for that is that we want to be used as a sorting function for this column okay so this is really easy so ah that is all uh there are many more features it's very hard to touch all of them you can check them here there are lots of lots of features it's very uh it's very very powerful library so you can easily use this in any of your react projects but there is a ah catch the catch is uh this material table is a really really heavy library so you can see at the 202 kilowatts it's really huge so if are already using material ui for your project then my using material table is ah the most logical choice but if you are not using material table material ui and you do not want some of the really customized functionality that we are seeing here then using this library might be an overkill so for those you can use some other table libraries there are lots of other libraries here for example our sweet uh table this is a table that i really like it's only 30 kilobytes it doesn't have all the features that material table provides us but it's it's it covers almost 80 percent of the use cases for you so you should really look out for those tables as well but ah if you don't care about the bundle size that material table is the champion table component for any reactions applications ah thank you thank you for watching ah see you in some other video i will link the github repository and an associated article for this that i have written uh in the description below thank you

Channel: Mohammad Faisal

Views: 567

Rating: 5 out of 5

Keywords:

Id: T4dtGAGCXVU

Length: 20min 4sec (1204 seconds)

Published: Sun Oct 17 2021