React Material UI Table with Paging Sorting and Filtering

hi all welcome to coder fiction this is my fifth video in this series of complete react material ui tutorial in previous videos we have discussed the basics of material ui and we have designed the form and done the validation and finally submitted the form corresponding requests are inserted into local storage now in this tutorial we will list all of zero codes that we have inserted previously into this material ui table here along with that we have implemented paging sorting and filter operation we have discussed everything in great detail from scratch so i hope you will find this tutorial helpful for your upcoming react projects so please watch till the end of this tutorial all of the video links in this series will be given in video description and inside the first comment of the video before starting this video i would like to thank for your paypal donations for my previous works in order to make more helpful and quality tutorials like this you can also support me through paypal donation have given the link in video description and inside the first comment of the video without further ado let's get started with the topic so here we have the same project that we have left from our previous tutorial in which we have discussed how to validate a react material ui form and we have inserted a new employee inside the form submit event as of now with this form submit event we have inserted 8 employees into local storage now let's look how we can show this list of employees inside material ui table with paging sorting and filtering as you know for the demonstration purpose inside the series we have been using this employee context basically here we have two components employee form for designing the form that we have done in previous tutorials and here we have the parent component employees where we have to work with list of employees so this employee from component tag is responsible for the form here now let me comment that here now let's look how we can show material ui table here inside this material ui documentation here you could see various examples on using this component table here first of all inside this application here i will show you how you can show a list of employees inside material ui table after that we will be adding rest of the features like sorting filtering and paging if you have watched our previous videos on form design you know we have been using a lot of usable components for designing form and form controls for example here we have the use form component function inside that we have defined various reusable components and functions which can be reused in future like that we are going to create a reusable component for material ui table so i will create the component here use table here we have the functional component for this component we have only two parameters a course and head cells list of records can be passed with this parameter a course and with the second parameter here we will be passing an object containing column configurations for now from this function will be retaining an object empty object like this inside this component first of all i will define a child component tbl container so this will be a wrapper for the under material ui tablet so basically this will be a function with single parameter props from this function we just need to retain a table component so we just need to have this pair of parentheses and inside that we have to return this table component which is the inside material ui so this is the pattern component for the endeavor material ui tablet now from this use tablet component here we'll just return this child component tbl container now back to this employees component here first of all let's import that reusable component here now let's call the component here use tablet from this function we have returned this tbl container here now we can access that with the constant here so we'll be using this destructive syntax here in order to access that child component tbl container we just need to do this now we can use the component here tbl container so this is basically a table like we have returned from here inside this component we have to have the head and body part of the table first of all let's add list of employees inside the table body for that we can have this component table body from material ui we have stored list of employees inside the application local storage that you can see if you inspect the web page here just go to the application tab here so here we have the list of employees that we have inserted through the form now let's look how we can retrieve those records in order to work with this list of data we have created a separate file here under this folder services employee service inside that we have already defined a function get employees now we just need to call this function get employees inside the employees component here so first of all let's add the import statement here there are a lot of functions inside big file so i will import all of them with this alias employee service in order to show these list of employees i'm gonna define a component state object here records and the corresponding function will be set records now let's call the react hook function use state inside the function we can initialize this array records here for that we just need to call the function here get all employees from employee service now inside this records array we have all of the employees that we have inserted now let's show all of those records inside this table here for that we are going to iterate through the array here records map function can be called inside that we have this callback function with the single parameter item from this function we just need to retain a single component table raw which is from material ui now let's add td cell for each informations of employee so corresponding to td cell we have this component tablet cell first of all let's show the full name of the employee so item dot full name now let me duplicate this two times this is for email and this is for mobile in react when we render a list of components like this inside an iteration we have to have this attribute key it should have a unique value for that inside this employer code itself we have the id property which is corresponding to the primary key so item dot id now we have an error here use state is not defined so let's import that here use state so for inside this table container here we have added this table body here in order to show this table body inside this table that we have inside the reusable component here we have to add this attribute props dot children so which refers to all of the elements that we have inside the table container here all of the elements inside these two tags table container can be accessed with this property children inside this props parameter here now let me save this and back to the application boom so here we have the full name email and mobile we can add the table header in a bit before that we want to show the department in order to show the department we have to do some additional works because inside the form here employee form let me uncomment this corresponding to the department we have shown a select control when we select a department from this control corresponding department id is saved into the data storage in order to show the department title we have to do the reverse operation let's check that inside this employee service here we have populated this department control with this array for department here and the actual employer codes are saved inside local storage as an array in a practical application we'll be dealing with these two tablets employees and department and will be having a foreign constraint in between them here we have to find the corresponding department for the department id that we have saved inside the property department id that we can do inside the function get all employees while retrieving all of the records so first of all i will store the employer code inside an object employees here now here we have to map the department id to department title for that first of all we will retrieve all of the departments here for that we just need to call this function get department collection now we are going to iterate through this employee array here so employees.map function can be called here here we have the callback function inside that we just need to retain an object so we will do this so basically inside this parameter x we will be having an object corresponding to the employee so first of all i will be using this separator operator here and then i will add this extra property department here now into this department property we have to save the corresponding department for the department id that we can access from this department's area here inside this we have to pass the index of the object in this particular case there is a relation between department id and the index of the object inside the array index will be less than one that of the department id so i will do this employee department id minus one so this will return the corresponding department object from this array from that we just need to have this title so dot title this will return the updated uh list of employees with the new property department now we just need to return that here return so by calling this function get employees inside the employees component here we have also included the department here now we just need to add one more table cell for department here department so here we have the corresponding department for the department id now let me comment this form again here in next video we will be showing this form in a pop-up dialog or model pop-up now let's show the table header for that inside this reusable component i will be adding a new child component tbl head so this is also a react component function with single parameter props from this function we are going to retain the double head component from material ui so let's return that here double head this material ui component is similar to the t head that we used to have in html table before showing head cells we have to have a row so we will add this double draw here now inside this row we have to have tablet cell component for each column head before that we have to pass values for these parameters records and head cells inside this employees component function the first parameter of course can be passed from this same object records here the second parameter head cells actually expect an object with column configurations so i will define that object up here head cells actually it is an array of objects for each column we will be having an object here so first of all we have full name column so i will be adding this id here full name so this label will be shown in table header and the id is used to identify the column uniquely employee name like this we have to have three more columns email mobile department for now this is an array of objects with two parameters id and label so as per the customization required we'll be adding properties inside this array of objects for now this is enough now let's pass that here head cells now back to this component tbl head here to show the table header cells here we just need to i trade through the list of array that we have passed inside the property head cells so we can do this head cells dot map function can be called inside that we have a callback function with single parameter head cell from this function we just need to return this component table cell now inside this we just need to show this property label from this array of objects here head cell dot label since we are rendering these collections of tablet cells here we have to add this key property with the unique value that we can provide from this id parameter here so head cell dot id now from this component we can return this tbl head here let's access the same while calling the function here tbl head now just about this table body we just need to show that tbl head back to the application boom so here we have shown the table header now let's add some custom css to this table here that we can do inside this usable component table container tbl container here so first of all let's define the css here in first and second video we have discussed how to deal with material ui component customization so first of all we will be defining this function use styles and we can call this function make styles from material ui inside that we have this function with single parameter theme from this function we just need to return an object like this for now i will paste the css rule for the table here here we have applied some top margin here we have customized the table heading changed font weight inside the table data and finally here we have the styles when we hover on table rows now inside this component let's call that function classes is equal to few styles function can be called to apply this rule table into this table here we could do this class name classes dot tab now we can make use of this usable component across our application tbl container and thereby we can have these same styles across our application now let's look how we can implement paging inside this material ui table for that first of all inside this reusable component let's add some state variables first therefore we have this constant array pages inside that we have number of requests that we are going to display inside the table based on our paging configuration now we need a component state property page and corresponding function set page and we can initialize that with this function use state in order to use this function first before we have to import that here that's done inside this page property will be having the index from the current selected page so i will initialize this property with 0 here now we need one more property rows per page and corresponding set function set rows per page inside this property we'll be saving the value of the option selected from the array 5 10 and 25 will be saved inside this property ros per page so let's call the function use state here and inside that we can pass the index from this page property for showing paging controls we can have this child component tbl pagination and from that we just need to return this component table pagination into this component we have to pass these properties rows per page options so here we have to pass the array with a paging configuration which is here inside the pages array so pages we want to show this component as a div so we can specify this property component is equal to div with this count property we have to pass the number of requests inside the table so records dot length then we have to pass rows per page that we can pass from the state property here rows per page then we have to pass the selected page option from the drop down that we can pass from this page property now let's return this component here now let's retrieve the same here let's add the same after this table container here let me save this back to the application so here we have the controls for page nation with these controls here we can change the current page back and forth during that time we have to change this property page here that we can do with this event on change page event for that here we have the function handle change page let's define the function here for this function we have two parameters event so the new page index will be the inside this property now we just need to update the state property by calling this function set page inside then we can pass the property new page now we have to update this property value ros per page when we change the option from this drop down here on change rows per page so here is the corresponding function handle change rows per page let's define the function here here we only have one parameter event inside that let's update this property value rows per page so we can call this function set rows per page newly selected option value will be the inside this even parameter here so we can do this pass in function can be called into that we can pass this event dot target value since we use decimal numeric system we can pass 10 as a second parameter here to this function parseint inside official material ui documentation they already have an example with paging and sorting inside this tutorial we are explaining how it works in a practical project after selecting an option from this drop down here we have to show the first page so we will update the page property like we have done here let me copy this and pasting here so index will be zero now with these controls we can change the paging configuration in background these properties page and ros per page will be updated at the same time we only have to show the request here as per our configuration here for that i will define a new function here records after paging and sorting so inside this function will be handling both sorting and paging so this function is expected to return the request as per our current paging and sorting so we can do this return so as per the current configuration we only have to show the five records inside the first page here inside this request property we have all of the records from that we can call this slice function so this slice function retains a copy of the array or subset of the array with the start and end index to understand how this paging works you can check this out so basically we have a drop down with these values 5 10 25 and corresponding selector option value will be saved inside the property rows per page and we will be having two controls for changing pages back and forth and corresponding page index will be saved inside the property page so currently we are inside the first page so page index will be 0 and we have selected this option from the drop down so cross per page will be 5. in our example here we have eight employees so here is the corresponding array representation from starting index 0 up to 7. now using slice function we are going to select the current page request from this array here into this function we just need to pass two parameters start and end index so there are calls from start index up to n index will be selected without including this n index record now the start index can be find out from this equation here page index into rows per page count in this case 0 into 5 so 0 the equation for this n index will be p plus 1 into a course per page so 0 plus 1 into 5 so 5. so inside the first page so here we have the first page static index is zero so from zero up to five so without including the record at fifth index so records from index zero to four will be the inside the first page and that of second page will be something like this one into five so five then one plus one into five so two into five ten so so we'll be having 8 9 10 for now we only have a course up to 7 index so this will be p2 this will be p1 so let's do the same inside the function here page into rows per page and for the end index page plus 1 into rows per page so after this slice operation will be returning the course inside the current page now let's pass this function here now let's access the same here now instead of iterating through all of the requests inside the array we can use the return array from this function request after paging and sorting let me save this and back to the application here currently we are inside the first page so we have shown the first five records now let's move to the second page so we have shawn zero course sixth fifth and eighth so this is what happens during paging sorting or filter operation there will be corresponding state properties here we will be updating that property and when we update the state variables or object the under react component will be reordered and thereby this function the course after paging and sorting will be called so that's how the view is updated after changing paging configuration all right now let's discuss how to deal with sorting in material ui table for that inside this reusable component use tab let's add two more state variables so first of all we have order and the corresponding set function set order so inside this property will be saving the order of the sorting whether it is ascending or descending we'll be saving the abbreviation ascc and the esc and we need one more property order by and the corresponding set function set order by inside this property will be having the column id on which we have made the sorting recently as you know in order to sort these records based on any of these columns here you so want to click on any of these column header here currently we have shown this column header as a label directly from this label property here if we want to enable sorting for these column headers we have to use the component table sort label we have shown the table header with this component tbl head so let's enclose this column header inside table sort label component table sort label component now we have shown the column header inside the table saw label component that's why you could see these sort directions here now let's add on click event to this component here here we have to call a function with a parameter so we have to do that inside another function like this a function without any parameter inside that we can call this function handle sort request into this function we have to pass this id property in order to identify the column and now let's define this function inside this style component here with one single parameter cell id inside the function first of all we have to update the column on which we are going to sort this table so we can do this set order by column function can be called into that we have to pass this column id and then we have to change the sort direction for that first therefore we will have this boolean property is assigned to check whether the current sort direction is ascending or not for that we have to check two conditions we'll check whether the sorting is based on current column id or not so we can check that inside this cell id here and then we have to check the current sorting direction whether it is a sync or not if these both cell ids are same and the current sorting is in ascending and then we will set this property as true now we can update this order by property by calling this function set order if currently we are in ascending order we will toggle that to descending else we will update that with ascending so initially if we click on any of these columns for the first time so then it will sort these records on this column in ascending order that's what we meant by this condition along with this order ascending now let's set the direction of sorting here by this property direction first therefore we will check the order by property with the current column id if both are same then we can set the order of sorting from this property order by default it will be in ascending order let me save this back to the application inside the click event we have updated the properties order and order by in order to identify the column on which we have currently sorted these records we can use this active property here so active will set this property as true if the current column id if it is equal to the id that we have inside the property order by and thereby we can highlight the column on which we have sorted these codes here inside the click event we only have change the properties order and order by now we have to do the actual sorting on these tablet records here that we can do inside the function that we have created here a course after paging and sorting so before this paging functions lies i will call another function sort into this function as a first parameter i will pass this array of records as a second parameter i will pass another function get comparator into this function we have to pass these two properties order and order by now let's define those two functions here first of all we have the function sort with these two parameters first of all we have the record array and then the function for comparison comparator actually i'm using the same function that is mentioned inside the material ui documentation i will just define how it works here so first of all let me paste the function here we have created this array from the request array that we have passed to this function sort we will call the map function from that here we have returned the tuple with the record object and the corresponding record index here we have the default array function sort since we have two functions with same name so i will rename this function as stable sort let me update the same here so this is a default function for javascript array which is mentioned here basically sort in ascending order with this utf code system in our case we have used a function here because the default sort won't work with an array of objects that's why we have the provision for passing this function compare function so that's what we have done here so both of these a and b represent a tuple that we have created here and inside the tuple first index we have the object or the record object that's why we have pass the index 0 to the comparator function here this comparative function can retain three values minus 1 0 1 minus 1 means we have to switch the topics that we are comparing right now 0 means both of them have the same value and if it returns one zero cos are in proper order so far we have not yet defined this get comparative function that is passed to this parameter here so first of all let's define the function here along with that we have to define this function descending comparator from these if statements will return one if b is greater than one otherwise minus one if they are equal it will return zero so the exact value will be returned to this function call here otherwise we will return the value with minus 1 so we will change the sign of the number so the sorting order will be in opposite direction order that we have returned from this comparative function is not equal to 0 then we will return the value from this function here so basically it will be either one or minus one if it returns minus one it will swap those uh tables otherwise it will keep as it is if it is zero then the sorting will be done in the order of tuple index and finally here we have returned the original array without the index or the tuple in order to fully understand this function you have to work on your own if you have any doubt please ask that in comment box below so first of all we have done the sorting and then we have to do the paging now let's look whether this sorting works or not boom so the sorting works as expected along with passing this direction into this sort level component here we also have to pass the same for the parent component table cell here so saw direction is equal to we will check the columns for the current sorting if they are equal we will set the current sorting order here otherwise we will pass false here so this is how we can implement sorting in a material ui table there might be some column in material ui table for which you may need to disable sorting for example a column with action buttons like edit or delete we will be adding such a column in next video so for such columns we have to disable sorting in order to do that we can do this inside this head cells array here for such columns we can pass this property disable sorting we will set the property here true for such columns without sorting we don't need this component table sort label we just need to show the label inside the header cell so i will add this condition here we will check the property disable sorting if it is true then we only have to show the label from the object otherwise we can pass this component table so label now we have disabled sorting for department so this is how we can implement sorting in material ui table sorry to bother you guys in middle of this discussion let me show you what we are going to discuss after this material ui table in next video we will be discussing how we can work with material ui pop-up window or model pop-up we have customized this component to add this title and this close button here currently we have opened this first form here we could use this form to insert a new employee with this submit button after inserting the record this pop-up window will be automatically closed it will use the same pop-up window for update operation also to update a record you can click on this pencil icon here and thereby we have opened the form with corresponding employee details after making required changes with this submit button we can update the employee record let's look how we can implement search of filter operation for that we need an input control for the search operation so i will add that just about this table here so back to the employees component first therefore we will have this toolbar component here now we have to have an input control for search we have already defined reusable components inside these controls here so first of all let me import that up here so first therefore so i will add this so i will import this object controls here inside that i have already imported all of the form controls so let's import all that object here controls now we can do this controls dot input inside this input control we have all of the properties that we used to have in a normal input control so first of all i will pass the label here so the label will be search employees now we have a normal search text box here into this i want to add a search icon for that we have to use the property input props from this text field component here so from this object props all of the values for these parameters will be assigned to these properties here we can add additional properties by having this property here first of all i will have this separator operator and other object so all of the name variables from the component will be assigned to these properties here and rest of the properties will be the inside this object other and then we just need to separate that here in one of my previous tutorial i have discussed the same for this button component here we can pass the extras here other actually it is an object here we will pass the property input props inside that we can have this property start adornment and here we just need to pass the component input adornment i will set the position as start inside this component we can pass the search icon now let's add the impose statement for this search icon up here sorry here we don't have to pass the extra properties inside another object here so all of the extra properties other than these properties will be there inside this other object because of this separator operator and then the same will be extracted here now let me save this back to the application now we have shown the search icon here i want to increase this control width for that i will create an extra css rule here search input width is equal to uh 75 percentage we have already defined the use styles function here and we have called the same and the object classes will be there now we can assign the same here class name is equal to classes dot search input let's do the real filter operation inside this material ui tablet we can do that inside this control on change event we already have the event here so here is the on change event we will call a function handle search now let's define the function up here here we have the default event parameter inside this on change even we can retrieve the values from this input control from target property inside the event parameter e here so first of all we'll define a variable target here e dot target for filter operation i will define a state object here filter function and here is the corresponding set function set filter function for now i will initialize that by just calling the function use state inside this property i want to save a function for filter operation actually in react state object we don't have the privilege to store functions so instead of that i will do this and call the function here set filter function inside that we will save an object instead of function and inside that we have this function for filter operation so this function has a single parameter items through this we will be passing all of the requests from our tablet inside that we will do the filter operation so first of all we will check whether the search textbox value is empty or not in that case we'll return all of the records otherwise we have to do the filter operation so we'll return the filtered array here items dot filter function can be called here for now i will just look for the full name of employee here so full name and we will call the include function with the value that we have inside the text box search text box so inside this control on change event we will update the filter function accordingly now we can pass the same filter function into this reusable component here now inside this use tablet component we can access the same here filter function now we will call this filter function inside this function records after paging and sorting so instead of passing all of the records into this sort function here we will do this we will call the filter function here so this is an object inside that we have this function fn into that function we'll be passing all of your codes so this function returns the array after filter operation and the return array will be passed for the rest of the sort and paging operation now we have this error cannot read property f and of undefined it's because we have not yet initialized the state variable filter function here so we will do this we will have an object inside that we will have this function f and for this function we have a single parameter items through this we will be passing all of the requests required for the tab inside this function we will return all of zero codes that we have received through the parameter so no filter operation initially when we end the search value inside this text box this handle search function will be invoked and thereby the function will be updated here sorry here we have passed an extra pair of calibrates let me save this back to the application now let's try few entries here sorry we have a typo with the function includes let's correct that here actually this includes function is case sensitive so i will call the function to lower case here yes now it works as expected so inside this input control on change even we will just update this state here and when we update this state the component will be reloaded and thereby this function will be called again the codes after paging and sorting inside the function we will be calling all of the three functions search sort and paging in order so that's how this page is rendered here so that's it guys in this video we have discussed how to deal with material ui table paging sorting and filter operation you can download this project source code from the github link given below in video description in next video we will discuss how to work with material ui popup window or model popup if you found this video helpful please thumbs up this video and for more awesome videos like this please be subscribed to this channel called affection please share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 55,009

Rating: 4.8905358 out of 5

Keywords: react material ui table, material ui table with paging sorting and filtering using react hook, material ui table with example, material ui datatable, material ui table to list an array, material ui pagination, CodAffection, react tutorial, material ui tutorial

Id: jnQ1-XW7KNY

Length: 44min 4sec (2644 seconds)

Published: Wed Aug 12 2020