Learn Material Table with React JS in 1 Hour | Material Table Tutorial for Beginners

hey guys welcome back once again this video is a crash course of material table for beginners with react.js in this course we will talk about how to use material table in your project and how to implement some features like pagination sorting filtering selection and export in different files and how to perform card operation grouping and how to customize the styling and many more so for this course you don't have to have prior knowledge of material table if you are a beginner that's fine so first of all let's have a look on material table official website so for that here let's open a browser and in search bar just you type material table dot com so here material table dot com okay so you can find this link in description of this video as well so here as you can see the material table and here get us started so below as they have mentioned what are the feature material table contains so here as you can see action component overriding that means whatever the component already they have predefined we can override those component custom column rendering suppose we want to render our custom component we can do that detail panel editable export that means here we can export the data into the csv and pdf filtering fixed column grouping localization remote data that means we can face the data from the server side searching and here the selection sorting a styling tree data and here validation okay so these are the features material table contains so first of all let's click on this get us started okay and here let's go to this install option in order to use this material table in our project we have to install couple of packages and the first package is material table okay and the second package is material ui core and this material ui core we have to install because the material table has been designed on the top of material ui core only okay so we can install this package by using the npm or yarn okay the next for the icon we have to install a different package and that is called material ui icons okay suppose you don't want to use this material ui icons or install in your project so you can do this by using the link as well so for that here you have to copy this and paste this one inside your html file okay so now let's jump to the vs code okay so here as you can see i have a simple project and let's click here on src and here on app.js so here as you can see this is a functional component and from here i am returning to heading tag first is the react app and second is the crash course on material table okay so now just save it and let's come back here and open a new tab and localhost 3000 so here as you can see our application is running fine okay so now in order to use this we have to install these packages so for that here let's copy this okay and install here so here open a new terminal and paste this command and hit enter okay so it is gonna to download and after that here we are gonna to import this one so npm install material ui core so let's copy this one and open a new terminal here and let's paste this one okay so now it is getting downloads in meanwhile here let's import the material table from the material table so for that here import material table from material table okay and now let's come back here and here material table okay so now here we have to pass some basic props to this material table so columns okay which is gonna to take the column definition of all the columns so here columns and this variable doesn't exist so let's create this variable at the top here okay and these columns is gonna to be a array and here object and this first object is gonna to denote a column so here i have to provide two property in object and first is the title so here name and second is field okay and here the name and this field is basically gonna to refer to the data so for other column let's break the line here curly bracket and title okay and i am gonna to pass your email and filled as a email so here email so now let's copy this and paste here and now let's modify it so now we have defined the column definition name email phone number age gender and city okay so now we have to pass a props that is called data so here data and this is also gonna to take a array okay which contains the data so now here i am going to call it as table data and this variable doesn't exist so let's create a state here by using ug state so const table data and here set table data okay and here use state okay and here it's got auto imported from the react and now here let's pass initial value as a array and this is gonna to be empty array so now let's save it and here as you can see we are getting this name email phone number age gender and city we have this default pagination enabled and at the top here we have this title table title okay so now let's come back here and we are not passing anything here that's why here we are getting no record to display so now let's pass some data here so for that here object and i need to pass your name and this is the basically the field what i have provided here email so now here as you can see i am having a single row and now let's come back here and here as you can see i am getting this name email id phone number here i am not getting this edge here gender and here city so now let's come back and here we have written h equal to 25 so it might be we have done mistake in field and here i wrote r instead of e so now it have been fixed now let's come back here so here as you can see i am getting this edge as well so now let's add couple of data so for that here i added four record and let's modify this record okay so now let's get back and here as you can see we are getting all four record here okay so now let's provide the table title for the title we have to provide another one props here and that is called title okay and from here we have to pass this value so here i am gonna to call it as student information okay now save it and let's come back here so it is gonna to refresh automatically and here as you can see i got this heading what i fast there okay so now we are done with the basic setup okay and for this what we have done is here we have imported this material table from the material table and we are passing these three props first is the column definition and for this here we have created this and we are passing second is the data what we are having here and third is the title what if i want to align a column here suppose i want this phone number to be on the right side so what can i do so for that here we have to come to the column definition okay and here add comma and add another one property that is called a line and default property is left so here we can provide this property as a right so now let's save it and let's come back here so here as you can see now this column has been aligned right okay so we do have value here center left and right okay so now let's make it center here center so this is how we can align a column so now let's talk about the lookup okay so here as you can see i have a column gender and i am having the value here m and f okay so i know very well that m is male and f means female so suppose here i want to show the whole text whenever i am getting this m i want to show here male and whenever i am getting this f i have to show female so how can i do that so for that here we can use the lookup concept in material table so for that here let's come back and we want to apply that lookup to the gender columns so here let's add comma and lookup and this lookup is gonna to take a object and now here in object i can define the value and the key name is gonna to be the same whatever the value i am gonna to get from here so here first i have given this m and the value is going to be male and for the second here capital f female so here we have added this new property lookup and this is going to take a object and here we have this value m so here we are passing this m equal to this value as a male and for the f here we are passing this value as a female so now let's save it and let's come back here and here as you can see right now i am getting male and here i started getting as a female and this is happening because of our lookup value so now what if any of the column value is null there okay so suppose i got this record here raj and email id this phone number and age value i don't know that means i got a null so how can i do that so here let me remove and pass value as a null here and save it and let's come back here okay so here as you can see i am not getting anything that means i don't have value so we have a way to render our custom component okay for the empty value so for that here let's come to the edge okay and here we need to add another one property that is called empty value so here empty value and this is gonna to take a callback function which is gonna to return a jsx so right now here let's define a callback function and return a jsx from here i want to return here something like null so here em and i am passing inside the null and returning this so now let's come back here so here as you can see i got this null in italica style okay so if in future if i am getting this value as a null here it is going to apply here as well so now let me show you so here i am going to pass this null and here as you can see i am getting this so basically you will design a custom component for the null value and you will be passing to the all the columns so now let's think we have another one column that is called school fee so here let's come back and add another one column and the field is going to give fee okay so now let's add this fee here so fee and the amount is gonna to be like this so now we have added this new column school fee and here we are referring to this fee okay so now let's save it and let's come back here so we do have a extra column school fee so now as you can see this is a currency this is not a number anymore so for that here we have another one type okay currency so let's come back okay and here we can provide that type of the column so here i am gonna to call it as a currency so now let's save it and let's come back here so here as you can see the school fee column got right aligned and here the dollar symbol got added so now for the type we have different property so you can pass the type as a boolean numeric date time and currency okay so now what if you want to modify here you don't want this dollar to be here you want rupee as an indian rupee so for that so we have to add a new property here so comma currency setting okay and this currency setting is gonna to take a object so here object and here i have to provide currency code so here currency code so for india it is gonna to be inr okay so now let's save it and let's come back here so here as you can see right now i am getting rupee here so now what if i want to modify this one means i don't want to decimal at the last year okay so for that here we have to add another one property inside this currency setting object so here comma and i need to add this property minimum fraction digit and here the default value is 2 if i don't want any of the decimal i have to provide this value as a zero okay so now let's come back here so here as you can see i am not getting this zero anymore okay so now if i provide here only one so i am gonna to get one decimal point okay so here as you can see so now let's talk about the sorting so by default sorting is enable in material table okay so in order to sort a column you have to click on the title of the column so here as you can see i got this symbol so right now this is in ascending order if i click here again this is going to be in descending order as you can see here okay so now what if you want to disable it so for that here we have to pass another one property and that is called options okay and this option is gonna to take a object so here object and here i have to define the sorting equal to false so now let's save it and let's come back here so i will not get this sorting anymore so if i am passing sorting equal to false here it is gonna to disable the sorting for the whole table okay so now what i want to disable the sorting for certain column so for that here let's come to the column definition okay so suppose i want to disable it for the name so i have to add a new property here called sorting okay and here i need to pass this value as a pulse so now let's save it and come back here okay so here as you can see i can sort it from the phone number but i cannot sort from the name because we have disabled this so now what if you want to provide default sort that means once the table is getting rendered you want particular column to be in particular order so suppose i want to edge to be in ascending order so for that here we have to modify our column definition so here h and let's add another one property that is called default sort so here default sort and here we have to pass the order so i am gonna to provide the ascending order so if you want you can provide the descending as well so now let's come back and here as you can see first of all i got this null value after i got this 20 and here 35 that means this is in ascending order so now what if you want to pass custom sort okay so you can do that so for that here you have to add custom sort okay and this is gonna to take a function which is gonna to return the sorting so basically you can write this custom sort and here you can write your custom functionality so here as you can see at the top right corner i have this search bar and the default value is true that's why we are getting but if you don't want this search to be here for that here you have to write another one property here in options and that is called search and you have to pass this value as a false okay because this default value is true that's why we were getting but now this value is false so we are not getting this search bar anymore so now what if you want some value to be there as a default search okay so suppose i want rails to be searched at the first time whenever i am rendering the table so for that here we can provide a search text okay and from here we can provide the value so now let's come back okay and here we don't have enable but still you can see i am passing this search text so here it's got searched okay so now let me enable this so true and let's come back again here so here as you can see we are getting this raj by default okay if i cancel i will get all the row so now what if i want to disable the search for the particular column so suppose i don't want search in this name column so for that we have to modify the column definition so here is and i am going to add here so search able okay and i am gonna to pass this value as a pulse here so now let's come back so now let's clear this and let's write 20 here okay so here as you can see it's saying no record to display and if you have noticed the 20 is here so we have disabled the search for the age column that's why we we are not getting this record so this is how we can disable the search for particular column so now what if you want to align this search component onto the left side so for that here what you have to do is here you have to add another one property and that is called search field alignment so here search field alignment and the default value is right so here you can provide this value as a left so now let's save it and let's come back here so here as you can see now it has been shifted to the left so there is another one property here which can be very useful so search autofocus so here search autofocus and let's pass this value as a true okay so now if i come here search box have to be selected one okay so immediately i can start typing here so this is gonna to be autofocused okay so default value is false here so if you want to change the style of the search you can do that so for that here you have to pass another one property and that is called so search field variant so default value is a standard here so if you want to provide field or outline you can do that so let's select outline and save it and let's come back there okay so here as you can see this is the outline so now if you want to modify to the field you can do that so field and now let's come back so this is how you will be getting the field so right now i am okay with the standard so i am gonna to provide this as a standard only and i am gonna to make the alignment in right side let's remove this search text from here let's talk about the filtering so here as you can see the filter is not enabled by default so we have to enable it so for that here let's come back so we have to add another one property that is called filtering and by default the value is false so here we have to pass this value as a true here okay so now let's get back here and here as you can see we have this filter option okay so here i can search raj and i got this record and from here i can select this male or female okay so we can do this because we have already added the lookup value okay so if you want to clear it click here it got clear so now what if you want to disable the filtering for the certain column so for that you have to add a extra property here so in name i am going to disable it so here i have to write this filtering equal to false okay so now let's get back and here as you can see i am not getting this filter anymore here so now what if you want to define the placeholder so here as you can see i don't have any placeholder okay so i want to show a placeholder there so for that here we can do that so we have to add another one property that is called filter placeholder so place holder and this is gonna to take a string and by default value is empty here so here i am gonna to call it as filter email or filter by email okay so now save it and let's come back here so here as you can see we have this nice placeholder filter by email so now let's talk about the pagination so here as you can see at the bottom we have this pagination and the pagination is enabled by default in material table so here as you can see we have this couple of page size option 5 10 20 and we are on this first page itself okay and we have total for record so now what if i want to disable this pagination so for that here we have to add another one property to this options and that is called here paging okay so this paging and here we have to pass this value as a false so we will not be getting this pagination anymore and here as you can see it has been gone okay so as of now let me enable this so paging equal to true okay what if i want to overwrite this number here so here as you can see i have this option 5 10 20 but i want something like 5 10 20 25 after that 50 100 so how can we do that so for that here we have to add a another one property and that is called here page size option okay and this is gonna to take a array so here i want 5 10 i want 20 to be there 25 i want 50 and 100 so now let's save it and let's get back there so here as you can see initially is the five and here i have this 10 20 25 50 and 100 okay so if i select 100 so here 100 row will be loaded because i don't have here 100 row that's why we are not getting it so suppose you want here something like 2 you can do that so here let's come back so now if i click here i am getting this option as a 2 5 10 20 so if i select here two so here as you can see i am getting two record okay and here i have to page and total for record so if i click on this here it is gonna to take me to the next page okay so here you might have noticed so let me refresh this page and here by default i am getting this five row selected so what if i want 2 rows selected on the renderer so for that here we have to add another one property and that is called page size and from here we have to provide this value as a 2. so now once our table will be getting rendered it is gonna to apply this automatically here so initially the two is got applied here as you can see what if you want to change the pagination a style here so for that here let's come back and here you have to pass the pagination type so pages nation type here and the default value is normal so let's select this step and come back here so now as you can see here i am having this step option so here i can click on this second and first okay so i don't have to go by clicking on next page only so if you want to change this style you can easily do that so now what if you want to disable the first and last page button here so for that here we can add another one property okay and that is called so first last page buttons so here the default value is true so i am gonna to set this value as a false okay so i will not get this pagination option anymore so now as you can see i have this option only i don't have first and last option that has been gone so here as you can see we are getting this pagination at the bottom of this table so what if i want to change the position so for that here we have that option so we have to add another one property to this options and that is called pagination position so here pagination position so we got here three option both bottom and top so by default the value is bottom here so now let me select your top and save it and let's come back so this time we will be getting pagination at the top here and here as you can see we have this pagination information so we are getting at the top so now if you want at the both place that means that at the top and at the bottom as well so here you have to pass this pagination position as a both okay so now let's save it and let's come back here okay so here as you can see we are getting at the top and here we are getting at the bottom as well and here i change and it's also got changed so this is all about the pagination so now let's talk about the export option okay so by default the export is not enabled in material table so we have to enable it so for that here let's come back okay and here we have to add another one property and that is called export button so here export button and let's pass this value as a true and now let's come back okay so here as you can see i got this export icon at the top right corner okay so now let me click here and it is gonna to give me two options so export as a csv and export as a pdf okay so now let me click on this export as a csv so here it is asking me to share so here i clicked on save and it's getting downloaded so now let's click on this and open it here so here as you can see we got our record here so we are getting this name email phone number and we are not getting this age because we don't have this value in age here this is the null and here gender city and school fee okay but wait so here we are getting only two record but our table contains four record so by default the material table is gonna to export the current page data only okay so now if you want to export all the data you have to write another one property and that is called export all data true so now let's come back here and here export all data okay and let's pass this value as a true here so now i clicked again export so it is gonna to download i clicked on save and here now let me open this file so here as you can see right now i am having whole data here and i got this edge value as well here because for this record we have this edge value so now what if i want to disable some particular column while export that means i don't want edge to be in export file so for that here let's come to the edge okay and here we can add a another one property to this column definition and that is called export okay and here we have to provide this value as a false so now let's save it and let's come back here and here let me export this me open this file and here as you can see i am having name email phone number gender city school fee so i don't have the age column anymore because we have disabled it so now what if you want to change the file name okay so by default whatever the table title is it is gonna to pick that name as a file name so now let's add another one property that is called export file name okay and let's provide this name as a table data and save it and let's come back to the ui okay and now let me click on this download and here the export as a csv so here as you can see i am getting this name table data that means i am not getting the student information the table title anymore so this is all about the export so now let's do the card operation here so for that let's come back here and we need to add a another one property to this material table so before that let's select all do right click and here format document so it is gonna to format whole code here so now we have to add another one property and that is called editable and this is also gonna to take a object so first of all here we want a option to add a new row so here we can enable by writing on row add and this is gonna to take a callback function which is gonna to return a promise call so here function and here this is gonna to return a promise call promise okay so now this will give me the new row information so i am gonna to call it as new row and this promise is gonna to take again a callback function and here it is gonna to give me two parameter so first is called resolve okay and second is called reject so now save it and let's come back to the ui okay so here as you can see at the top right corner i have this option to add so on click of this year one row got added at the last here as you can see so if i click here cancel it got cancelled so now what if i want this row to be added at the top here at the first position not at the last so we have to add another one property to these options and that is add row position so here let me break this line okay and here let me take here and let me break here so we can see at a time everything okay nine so now comma and here at row position okay so default value is last so we want at the first so here i will save this first and now let's come back and here let me click on this ad so here as you can see this time i got this information at the top only okay but you might have noticed there is another one issue so i have this name filled here but i am getting this name here email here but he email is getting here school fill here and this is shifted by one column and this is happening because we have here action button by default okay so now what if i want to move this action from left to right so we can do that and for that here we have to pass another one property and that is called actions column index so for that here let's come back actions column index and default value is zero so that's why it's being aligned into the left so right now i am gonna to pass this value as a minus one so now let's save it and let's come back here and now let me click on this ad so here as you can see i got this one at the last here so here as you can see i am getting this name into the name column email phone number and everything okay so right now here let's come back to this edit table and let's do the console log to this new row whatever the data we will be getting there so new row so now let's save it do right click go to the inspect okay so let's expand this one and let's go to this console here let's delete everything and click on add here so this new row got added so let me provide this information and here age is gonna to be something like this okay and here i'm gonna to call it as a mail and here let's give some data so dalton guns and school fees something like this so now let me click on save here so here as you can see i got this data onto the console so ah ct email fee gender name and phone number but the problem is here it's not getting added so now we have to write our logic to add into this table okay and here as you can see this is keep processing because we are not resolving this because this is a promise call okay so right now here we will get all the information in neuro okay so let's break the line and here i am gonna to update the state so here set table data and whatever the data i am having i am gonna to spread here so table data and right now i am gonna to add my new data here so new row and once this got added now i want to resolve this promise so here resolve this promise so now save it and let's come back here okay i clicked on add and here let me fill this information okay so age is 25 male city dalton and here let me add this okay and i clicked on save here so i think it has been added so right now let's make here pagination 5 and here as you can see because kumar and this is the email id and here is the phone number age mail and tartan branch and this is what we i have entered so now we have added a row successfully so for this ad what we have done is here this editable and this is gonna to take a object okay and inside that here i am having a property on row add which is gonna to take a callback function and return a promise call so here this is gonna to give me the whatever the data user is trying to add so neuro okay and here i wrote this promise and inside this year i am adding a new data to this table so whatever the data i got i am spreading and with that i am combining my new data as well and once this is done i am resolving the promise for the processing if you want to give some time you can do that so here set timeout okay and this is gonna to take a callback function and here is the timing so i want to wait till 500 milliseconds for the update and delete we have to add another one property here so let's separate by comma here and let's add another one property that is called on row update and this is gonna to take a callback function and gonna to return a new promise call okay so here i am gonna to get two parameter so first is called new row and second is fault row rowdata and the promise call so new promise and here this is gonna return a callback function and right now here the resolve and reject okay and at last here we will be resolving this promise so resolve or it's better to copy this and paste it here so now let's print whatever the data we are getting so console.log and here new row comma old row so here as you can see one column got added at the last and that is called actions and here i got this icon edit so now if i click here the value got copied to the input box as you can see here so right now provide edge and here let's come to the index okay and let's come to the console here and now let me click on this save icon so here as you can see for the first one we got this edge value as a 12 because this is the new record and the older one i got here is equal to null okay and here you might have noticed we are getting another one table information so that is the table and here we are getting the id so index is the zero here okay so now here what we have to do is we have to get the id and we have to replace the particular record so for that here let's come back so i am gonna to create a variable here so let's call it as updated data okay so whatever the data i am having in table data i am gonna to hold here so right now i am having data here so updated data okay and right now i am gonna to update the particular index data with the new one so index value i can get into the row dot table data dot id so here as you can see this is the index value so for this one here old row dot and here the table data dot id okay and now i am gonna to replace that object with the new data so here new row okay and once it is got up to date here i am gonna to up-to-date this updated data to our state so here finally set table data and i am gonna to pass here updated data so now let's save it and let's come back here okay and here let's click on this record so here as you can see i don't have this edge value so now let me write here some value 45 okay and let me click on save here so here as you can see we are not getting that record here because because already we have applied sorting to this edge so now let me click here and here as you can see the raj and here i have this edge as a 45 so let me select this five okay and here as you can see i am getting this edge as a 45 that means our record got up to date successfully so now let me show you here as well so for this i don't have any value so i wrote 12 and clicked ok so here as you can see it's got up to date so for this what we have done is whatever the data i am having in table data i am spreading and holding in this updated data and here by using this old row table data dot id i will get the index so i am going to that index and replacing with the new record okay and again i am updating my state here so now we have to handle the delete operation so for that here let's add comma and now on row delete so we have to do the same and this is also gonna to take a callback function and return a promise call so here the callback function and promise call so here resolve and reject and this is the callback function here okay so now here this is going to give me the selected data so here i am gonna to call it as selected row okay and let's print the record here so console.log and here selected row now let's resolve the promise at the last year so right now i am gonna to change to this 500 2000 that means the one second so now let's save it and let's come back to the ui okay so here as you can see i got this icon delete so now let me click on this and here it is asking for the confirmation so i clicked here save and here as you can see i got this record information okay so here edge city and all the information i got for the particular record and now we have to write a logic to delete this record okay so for that here let's come back so already we have data here so right now here const and here updated data equal to and i am gonna to explain the table data okay and right now here i am gonna to write a logic to delete the data so for that here update data dot and here a supplies okay and right now i am gonna to pass the index here okay so here the index is gonna to come from the selected row table data dot id and i want to delete only one record so once it is done let's print the updated data so remove this selected data and now let's come back here okay so right now as you can see we have this raj information and i am gonna to click on this delete icon and here as you can see we are having only three record and raj information we don't have anymore because that has been deleted okay so now let's come back here so here we are passing this index number and here we are passing we want to delete a single record okay so now instead of doing this console log we need to update our state so here set table data and now save it and let's come back here okay so let's close that one and let's click on this delete okay so right now let me expand this to five and here as you can see i am having only three record so now let me add a new record here 45 and from here we can select this okay and now i clicked on save so here as you can see this new record got added so now let me click on this update and here i make this one as a 25 and click on save and here as you can see this got up to date so now let me click on this delete and here on click of this confirmation the row got deleted successfully so here we have seen how to add a new row how to update a row and how to delete a row so here as you can see this is the action button export here this is the add and this is the edit and this is the delete but these are the predefined okay so now you want to provide your custom something okay so how can we do that so for that here we have to add another one property to this table and that is called actions so here let's break the line and provide these actions okay and this is gonna to take a array object and this particular object is gonna to represent a action button so now we have to provide some property here so let's call it as icon and this icon is gonna to take a function which will return a jsx so now i am gonna to render a button okay so here click me now we need to pass another one property that is called tooltip in order to handle the event here we have a property on click which is gonna to take a callback function so as of now dot log and whatever the data i will get here i am gonna to print into that data okay so now let's save it and let's come back here so now as you can see we are getting this button click me and on hover over it's saying click me so that is basically a tooltip so now let me do this inspect and here we are printing something on click of that button so go to the console and here let me click here on button so here as you can see i got something so this is the event and right now for the data let's pass your second parameter so this is the first parameter event and this is the second data so now let's get back here and here i clicked on this here click me and now as you can see we got a object and which is holding the whole data here so that means here we are getting the data for the particular row so i just before i clicked on sweetie row and here as you can see i have this information for the sweetie age city email id fee gender so we do have all the information about the particular row okay so suppose you want to do something you can easily do that okay so now what if you don't want this action button to be here you want to add this action button here that means you want to show that particular action button only once so in that case here you have to add another one property to this action object and that is going to be is free action so default value is false so here i added true and now let's come back so here as you can see we are getting this click me at the top here we are not getting into the row anymore okay so now if i click here i am getting this empty because i cannot get the row information there so now you can use this button as a many way so suppose you want a button to browse a file that can be imported to the material table so here you can have a button and on click of that you can open a file and allow user to select any file just like a csv pdf or excel and import the data to the material table okay so there it is a very handy function so now instead of rendering this button you can render your custom icon as well so instead of returning this button from here we can return our icon so for that let's come back here and let's get to the material table and we have to install this package material ui icons so let's install this one so it is gonna to take some time in meanwhile let's go to the material ui website and let's choose our icon so here material ui so you can find this link in description of this video so right now let's click on this here hamburger icon and now a scroll down and here you will be able to see one option called material icons so now let's click on this and here we have multiple icons so thousand plus icon we do have so we want a icon for the import so here as you can see this is how the import icon is so now let's type your gate app so now let's click on this and here we have to copy this okay so from here you can select your icon which one you want and let's come back and let's close this one and here let's paste this one and we have to copy this get app icon let's remove this one and import our get app icon so now let's come back and here let's come back to the react app and here as you can see we are getting this hour icon and this look perfect isn't it so this is how we can add a custom action button so now let's talk about the selection so for that here let's come back okay and first of all let's pass this pagination as a bottom only because i don't want at the top and we have to enable this selection so here we have to pass another one property and that is called selection and the default value is false so that's why we are not getting so here we have to pass true now let's save it so here as you can see i am having the check box in all the columns so right now let me select here five and here we do have all the records okay so by clicking on this we can select the particular row okay so as you can see this is how we can select so from here by clicking on this header we can select the all the row at a time so if i click here again the all row got deselected if i click again here all row got selected so now what if you don't want to show this header check box means you don't want to give flexibility to the user to select all the column at a time so for that here you have to add another one property to these options and that is called so select all check box so default value is true so here right now let's pass this value as a false so now let's come back here so now as you can see we don't have this select all check box here anymore so now let me click on this and here as you can see i am getting this row so two rows selected okay so what if i don't want this band at the top here so we can remove this one as well so we have to add another one property and that is called so text row selected so here so text row selected and we have to pass this one as a false so now save it and let's come back here so if i select here you can see i don't have that band at the top okay and you might have noticed so whatever the action button we do have here we are not getting any more if i deselect here i will get those action button here but if i click here i am not getting those action anymore okay so if you want to get a action button so for that here you have to remove this property each free action okay so now i commented this and let's come back here so for the first time here as you can see i am not getting that into the each free action and i am also not getting into the column row wise and this is happening because selection mode is enabled here so if i select here any one of them so immediately as you can see i am having this click me icon so on select right now i am getting this one so this is the behavior you will get once you will apply the selection mode this is gonna be very useful when you want to export only the selected row so here as you can see i have selected only two row and i want to export only to recall so in this case this is going to be very handy one okay so you can do that so now if you want to do something logical on selection change you can do that so we have a event here so here before the option i am gonna to call a event so on selection change okay and this event is gonna to take a function so right now i am gonna to do console log okay so whatever the data i will get here so i am gonna to print that so here selected roach and i am gonna to do console log okay so now let's come back and let's do right click here go to the inspect and here go to the console so now here i clicked on first record and as you can see here i am having this record information if i select here too i got this information in a two so here i have this first record and here i have this is the second record and this is basically a array so this is gonna to be very handy if you want to trigger some event on the basis of this row selection change so that time you can use this one so now what if you want to do the conditional rendering for the selection that means for the raj you want this selection to be enabled but for the sweetie you want this one to be disabled okay so for that here we have to add another one property okay in option we have to write here selection props okay and this is gonna to take a callback function so here this is gonna to give me the row information and from here i am gonna to return a callback function and here i am gonna to write a condition and based on the condition i am gonna to return something so from this object i am gonna to return a property called disable and here the value is true now comma and here if you want you can change the color let's provide this color as a primary so now let's save it and let's come back here so right now as you can see here this is disabled one and this is happening because i wrote this condition here the disable equal to true that means it have to disable for the whole row so this row data is gonna give me the particular row information so here so row data dot name equal to and right now here i am gonna to compare with the name value so raj okay so if the name equal to raj disable it otherwise don't disable so now let's get back here so here as you can see for the raj this checkbox is disabled and for sweetie this is enabled okay so now from here let me select this five okay and here i am getting raj only disable and other are enabled okay so now if i change here condition equal to not okay that means the raj is gonna to be only enable and other is gonna to be disabled so let's have a look so here let's provide this page size default page size as a five and now let's come back here so here as you can see raj is enabled and other are disabled okay so now what if i want to disable the check box whose edge is null okay so for that here we can make a condition like this so row data equal to h and if this value equal to null okay so disable it so now let's get back here so this is the null value and here check box is disable and for the second row as well this checkbox is disabled okay so this is how you can do the conditional rendering so now on click of this here as well you can see this is the primary color so now if you don't want this primary color to be here just remove this line so you will not be getting checkbox as a primary color anymore so here as you can see this is the secondary color of material ui okay guys that's it for selection so now let's talk about the grouping so by default group is disabled in material table so in order to enable it we have to pass this value grouping equal to true in options so let's do that so here let's come back and comma here grouping and i am gonna to pass this as a true so now let's come back here and at the top here as you can see we got another one area okay and here it's saying drag header here to group by okay so now if i want to group this header by yes so i have to drag here and now i dragged and now as you can see the age is null age is 35. so with the null value of the age we have to record so let me expand here so here as you can see i am getting this to record and for the others here i will be getting a single record so now let me cancel it and let me group by the gender so here for the male i will get the theory record okay but if i go to this female i am gonna to get one record so this is how we can enable the grouping so now what if you want to apply a default grouping that means once you are rendering this table the grouping have to be there so for that here you can apply this default grouping order into the column definition so here i want this default grouping to be into the gender so here i am going to add another one property and that is called default group order okay and here i have to pass value like 0 1 to 3 okay so this is the first grouping default grouping i want to provide so here i am going to provide this value as a zero so now let's save it and come back here and now as you can see our table got reloaded and here we have default this grouping and suppose you want another one grouping to be there by default so for that here let's copy this okay and if you want in h so let's add this property here and here we have to pass this value as a one here so now let's save it and let's come back here so i got this mail and here as you can see is null 20 and 35 this is the second level of grouping we do have so if i expand here i am going to get a record whose age is null and gender is male so now what if you want to disable the grouping for the certain column so in that case you have to pass this grouping equal to false so suppose i want to disable the grouping for the phone number so i am gonna to write here grouping equal to false okay so now let's come back here so now if i try to group by this phone number so it is not gonna to be there okay it will come out of that so here let me try with the city so i tried and city has been gone there because the grouping has been allowed with the city not with the phone number so this is all about the grouping so now let's get back and here let's remove this order from here so grouping order i don't want by default okay so let me remove this now save it and let's come back here so now what if you want to remove some of the column from your table for time being so you can do that we have this function in material table okay so we have to add this property columns button to the options and we will get one option so now let's get back here and let's come back to the options and here we have to add this property column buttons okay and now we have to pass this property as a true so now just save it and let's come back here so here at the top right corner you can see we have another one action button that is called so columns so let me click on this so here as you can see at the top i am having this message add or remove column and by default everything got added here so now if i click here on name as you can see we are not getting this name column anymore so email phone number h so by unchecking this check box we can hide the particular column so suppose i want name to be shown so here i click on this name and right now i am having this name here okay so which one you want you can do that so now if i rephrase here i am gonna to get all the columns okay so this is just for the time being so now what if you want to do a custom rendering here we have this edge column and where the edge is less than 18 we want a background color to be in red okay and whose edge is greater than 18 we want into the green color so we can do that okay so for that here let's come back and we want all these things to be applied into the edge so here let's break the line and we have to add another one property that is called render okay and this render property is gonna to take a callback function and which is gonna to return a jsx so right now here console.log and here i am gonna to pass row data this row data is gonna to come from here so here as you can see in edge column we are getting here null null but the record which is having value i am not getting here anything okay and this is happening because we are not returning anything from there so now let's go to the console here and here as you can see i am having this object here because and this is the because and let me expand the last one and here as you can see name is mohan so now we have to return something from here so instead of doing this console log here i am gonna to check the condition so from here i am gonna to return a div and i am gonna to return the data so here i can write row data dot age so right now i will be getting the data so let me show you here so here i am getting this 20 and here 35 so right now here i can add a style tag so here i can provide a style so background color and here i am gonna to provide this red so now let's save it and let's come back here so here as you can see we are getting this one in a red color okay so now we have to do the conditional rendering so here i am going to check the value of the eighth so right now here row data dot h okay so here if the value is greater or equal 18 so it have to return here the color is green otherwise return here red color okay so directly i am using here jsx so right now let's break this line from here okay and save it so here i wrote this background color so here we can pass this text as a green or red but right now i am doing based on the condition so here i wrote row data dot h is greater than or equal to 18 it had to return green color otherwise it have to return red color okay so now let's come back okay and here as you can see i am getting this one in green color because both the record are greater than 18 so now let's set a record edge is 17 so here the value was null for the sweetie and i have changed to the 17 so now let's come back here and as you can see here we have this 17 in red color this is in 20 in green and 35 in green so here we are ending our custom component based on the condition so now what if i don't want to show the edge value there means just like a number right now i want to show in a category that this person is 18 plus or 18 less okay so for that here what i am gonna to do is i am gonna to use the same condition so if greater or equal to 18 this is 18 plus otherwise here the colon and here i am going to return 18 minus so now let's save heat and let's come back here so here as you can see for the sweetie i got this edge as a 17 less for because and mohan i got age as a 18 plus so this is how we can render a custom component in material table so now it's time to talk about the styling let's talk about the row a style first so first of all let's come to the options and here we can provide a another one property that is called row a style so this is gonna to take a object and so inside we are gonna to define a a style so here let me define this background color so background and right now i am gonna to provide the background color as a so here f5 f5 f5 so now save it and let's get back here so here as you can see the background color of the row has been so we are getting in a different color okay so now what if i want this one to be in strip effect means for the first one i don't want to apply for the second one i want to apply so for that here we will get a parameter okay so we can convert this one as a callback function okay and now here we are gonna to get theory props so first of all here we will get data index and label so right now i am gonna to call it data comma index okay and i am gonna to check the index value so if index is divisible by 2 return this a style otherwise don't return any style okay so now from here i am returning this null and let's come back here so as you can see here for the first row this a style got applied for the second one not and for the third one it's got applied so now if you want to apply a row a style based on the gender you can do that so for that here you have to write data.gender and you can return your a style based on the condition so this is how you can style a row so now what if you want to a style header here so for that here you have to add another one property and that is called headers a style okay and right now from here we can return a style so let's say background color and i want this color to be something different so let's call it as green okay so now let's come back here okay and here as you can see the background color is in green so i want this header in a italic so for that here i have to add another one property and that is called font a style okay and here i need to return so now let's save it and let's come back here so now as you can see the font a style of the header has become italic so now let's apply this a style based on the cell okay so what if i want to apply this a style to the cell into the different color so for that here let's come to the column definition and here we have to add this property called cell a style and this is gonna to take a object inside this object we can define our style so here let's change the color to blue so color blue and now let's save it and here as you can see the color of name has been blue that means we are able to apply our styles so this is how we can style a certain column in material table okay so now what if i want to a style this header only for the name column i want to style this header so for that here we can add another one property okay and that is called header a style and from here we can set other colors so here let's provide a style color as a white so now let's save it and let's come back here so here as you can see for the name column the header is in okay and for the others it is in black color so now what if i want to change the material ui icon by our on icon so here as you can see we have this add icon so i want to replace this icon with the different icon so how can i do that so for that here let's come to the material table okay and let's add a property here that is called icons equal to and this is gonna to take a object and for here i have to give key name as a icon name so here i want to replace add icon so this is gonna to take a callback function which is gonna to return a jsx so here the callback function and instead of this add icon i want to return here button icon button and here i want to display add so now let's save it and let's come back here so here as you can see i am getting this add icon as a button okay so if you want to render the some of the icons so here the material ui icons and i am gonna to search for add okay and here this is the add icon so let's copy this and let's come at the top and paste this icon here and let's call this icon here okay so now let's save it let's come back to this react app so here as you can see we are getting our custom icon okay so this is how you can modify other icons too okay guys so in this course we have seen how to implement the pagination sorting a styling selection export and how to perform the card operation and many more things so you can get the download link of this code in description of this video okay guys so if you want to learn more about the material table i do have a playlist on my channel material table please have a look okay guys that's it for this video if you feel this content was useful to you please do like share and subscribe see you in next video thanks for watching you

Channel: Codenemy

Views: 14,581

Keywords: react material table, material table in react, material-table react, material table react, material table, material-table, codenemy, material ui table tutorial, material ui table react, material ui table data, material ui table in react, material ui table, table in react js, mui table tutorial, react datatable, mui crash course, data table crash course, mui table header, mui table cells, material ui react, material ui, Table header react mui, Material ui react tutorial

Id: 4TOONPrrlKY

Length: 82min 59sec (4979 seconds)

Published: Sun Aug 08 2021