20. Server Side Pagination, Filtering, Search & Sorting with Material Table in React js

[Music] hey guys welcome back once again in this video i am going to show you how to implement server side pagination filter search and sorting in material table all right as you can see here i have a material table and all these functionality have been implemented okay so here let me do right click and go to the inspect and from here select the network tab okay and now let's see i start typing something so suppose i want to search with this name michael okay so here i will type michael okay and now as you can see we got all the record whose name is michael only okay so from here let me show you how i am doing so here as you can see i am passing this michael okay and here this is the page limit here this this is the five as you can see here the pagination and this is the first page only if i click on this next here it is gonna to show me the another one page details okay and here as you can see we are on page two and here this is the five and here the question is michael only okay so now uh let me try to sort this one so here this is the age so i want the maximum at the top okay so let me click on this again so here as you can see we have 29 here we have 27 23 okay so that means it got sorted based on the edge so right now here i am passing this sort as a edge and here it has to be in descending order okay so now here if what if i want to make some search filtering so for that here what i have to do is type your 2000 okay and now you can see the only one record whose year is 2000 and name is michael i am having so i got this your 2000 okay so here let me show you so right now i am passing this year as a 2000 okay suppose i want to cancel this so cancel it and here we got all the records so now i want to filter all the athlete who got two gold medal so for that here i can write two in the gold medal okay so now i got here to record and both have the gold value is two here okay so now let's jump to the vs code and implement this server side pagination filtering searching sorting in material table so let's go to the src here and here the app.js okay and here as you can see i have all the column definition okay and here i have this heading and at the below i have this material table and here i am passing this title so let's call it as olympic data so olympic data and here we have this column definition what we have had coded here and now we have data here okay so we are not passing anything right now okay so here in order to achieve this server site rendering we need a api which should support all the functionality whatever we want to achieve from the front inside so i have created a fake api by using the json server so let me show you here so here as you can see the server and here let me go to the db json and here i have this all the value hardcoded here okay so here olympic and i have this as a one object okay so now let me come to the ui and let me start searching here so localhost and i am running on the port number the 3002 okay so here as you can see i got this resource as a olympic so now let me click on this and here i got this data so before jumping to the vs code let's have a look on the json server so here json server okay and go for the npm here the first link and you can find this link in description of this video as well so now here scroll down and as you can see we have to do npm install json server by using this we can create okay and here let me show you how we are managing so as you can see for the filtering how we can access so title dot and here the value what we want to provide so here this is how we can get all the access and now if i want to filter the year so for that here what i have to do is question mark okay and for the year i have to write year equal to and up here value so now so now i click into and now as you can see this is two thousand two thousand two thousand so i got all the record whose year is two thousand okay so now if i want to do the multiple filter so for that and and another one key here so let's call it as country okay and let's provide here value so here i will provide this value as a russia okay so now save it and here as you can see the year it 2000 and countries russia so let me scroll down here and here as you can see here and this is the russia okay so this is how we can achieve the filtering so now about the pagination so for that here we have to pass this as a page number okay so here and under score page and we can pass here the page number so suppose i want a second page okay and here and we need a page limit so for that here we have to pass this as a limit so i will call it as underscore limit and here i will pass it as a five so now save it and here as you can see we got here 4 record okay so here we have this 5 limit but we got only 4 record because we are in second phase and we have only total nine record i think so now let me set here one and let's go back so here we got this five record and if you are going to this page third we will not get anything okay so this is how the pagination is gonna to work suppose you want or this limit to be eight so here i can write it okay and now as you can see we got this eight record okay and if i will provide this page number as a two here i will get only single record in second page okay guys so this is all about the pagination and now what we have to implement another one thing is the sorting okay so for that here what we have to do is here let's come to the first page only okay so it's better let's sort based on the edge here okay so what we will do is here we have to pass another one property that is called sort okay so here under score sort and equal to here i will pass this edge okay and here in which order i want to be suppose i wanted it to be in ascending order so for that here under score order and here asc so now let me hit enter so now as you can see we have 17 first okay here we have 20 after that we got here 21 here we have 21 and at last here we have 25 so now let me go to the second page okay and here as you can see we have this 26 h okay suppose you want this one to be in descending order so for that here you have to pass this dsc and now you can see whatever we are getting the first at the last search here we are getting at the last okay so here we have seen how to implement the filtering and here we have seen how to implement the pagination and this is all about the sorting and the last is the searching okay so searching means it can search from any of the kpo so let's come to the first one okay and suppose i want to get the athlete name as a malia okay so for that here what i have to do is and q equal to here i will pass this one as a maria so now let me hit enter and now as you can see we got this record here okay so now as you can see our api is supporting all the server side functionality so before jumping to the vs code let's have a look on the material table official website okay so from here let's go to the remote data okay and now what they are saying is in data here this is gonna to take a function a callback function which is gonna to give me a parameter and that is gonna to be the query and this query will basically have all the information related to table okay and here we will be making a call and once our call is done here we will resolve this and we here we will pass our data this is gonna be our page size and here the total count okay so here let's copy this okay so copy it and let's come back here and paste it here okay so now i have pasted it and so before going to do anything here i will make a api call here okay so by using fetch we can make a api call so page and here i will pass a url so let me hard code this url here so let url equal to okay and we will copy this whole url and we'll paste it here okay and right now here i will pass this one so then and let's convert this response into the json so response dot json okay and now here then response okay and here copy this resolve and paste it inside and whatever the response we will get we will assign to this one so response and page number let's provide as of now 1 and here this hardcoded value so let's provide here 20 as of now so here we are missing the comma okay so now save it so now let's come back here and here as you can see we are getting here to record okay so that means it's working perfectly fine so now what we have to do is we can remove all this property from here okay so we will get all the records so here question mark okay and now save it and come back okay so you can see we are getting all the record here okay so now let's come to the inspect mode and let's go to the the console okay and what we will do is here i will do console log to this query what i am getting over there so here console.log and query now save it so here as you can see i got this information error undefined filters and this is a array and here we have this ordered by an order direction this is the page number and this is the page size search whatever we will write here and this is the total count okay so here what we will do is here all these information are related to table and we are gonna to make use of it first of all let's implement the pagination so for that here what we have to do we have to provide two things okay so here the page number and limit okay so you might have noticed this is the page size is the limit and this is the page is the page number so what i will do is here i will write the url plus equal so here under score page so for page number here equal and here dollar okay so i will write query dot and page okay plus one that means i am gonna to face the next record okay and the next one here is the limit so for that here under score limit equal to and here the dollar so this value we will get from the page size okay so here the query dot page size okay so now let's save it okay and come back here and let's go to the this network tab here okay so now let me select on this and here as you can see we have these two query params and here actually this is the wrong i need to add the end so here the and okay so now save it and let's come back here okay so let's open this and here as you can see this is the page one and we have limit of five okay so now if i increase your limit to 10 here this is gonna to make another one call and this is the page is one and we have limit of 10 here okay so now let me click on next okay and this is not going next because of here we have only 20 okay so now here we are not getting this total count from the our api okay so we will comment this but in your api if you have a realistic api definitely you will get this total count from the api itself okay so you have to assign that value to here and for this page number here i will refer to this query dot and here i will get the page so now save it and let's come back here okay so now here let me expand this one and here this is the first page okay and now if i click on this next here i got the next page here okay as you can see it's getting a start from 6 and here here 2 and thus 5 here that means the second phase and this is 5 is the limit here okay and this is the none of undefined so as of now here i will hard code a value okay and i will define your 499 because this is the total number of row but this is not a good practice okay so whatever the value you will get from the api you have to assign that value here okay so now here as you can see one of five here and this is the total if i click next here i will get the second page six of ten okay if i click another time i will get another one record and here as you can see the record are getting changed and here we are receiving only five record at a time so this is all about the pagination so now let's implement the searching here okay so let's come to the console here and let's start typing here something okay so here as you can see what we wrote here we got in this search here in this query okay and we know for the searching we have to pass this queue and we have to pass here the value okay so for that here what i will do is i will break the line here and i will write a condition so i will call it as if query okay dot search so here so query dot search that means if the value contains in the search what it have to do is it will append something on the url so here the url plus equal and what here i will write is q okay and equal to i will assign the value of the search query so here the dollar and query dot search okay so now basically what i am doing here is i will get the value and once i will have the hello here on search i will implement this if search don't have value this condition is gonna to get false and this is not gonna to apply anymore okay so for this year i will add here and okay so now save it and let's come back here so come to the network tab here and now as you can see this is the empty value so here in header we are passing only two params okay but here if i will write something so let's call it as swimming okay so here we got this swimming and here as you can see in queue we have this swimming okay so you might have noticed here s is missing while the writing it was making the multiple call okay so here we have to hold for a while and that can be achieved by adding a property that is called debounce interval so for that here let's come to the material table and let's add these options okay and this is gonna to take a object so here we can define this interval d bounce interval and this is gonna to take in millisecond so here i will call it as a 700 okay and now let's provide the padding as well so prior to padding and here let's call it as dense so that means our table will look much better okay so let's come back here okay so now our table is compressed okay and it looks better if i write here something i will get those records so swimming now you can see it have waited and at last it have make a call so here the swimming and now as you can see here we got all the record which contains the swimming so here we are passing the swimming okay so now let me search for germany so germany okay and now as you can see the country who is germany we got all the record here okay so here i passed germany right now so we are done with this search so now it's time to implement sorting so for that here as you have seen we have to pass two things so sorting edge and sorting order okay so now let's come to the console and here let me click on this export and let's come here so here as you can see in ordered by i got this title export and field export and here order direction is ascending if i click again here so here i got this as a descending if i click on this date here i will get the information about the date okay and i will get here direction okay so now here after this the search i will write another one condition so if here i will write query dot okay suppose i don't have anything here so it is going to be here undefined so i can search like that so if ordered by okay so ordered by don't have anything so you don't have to execute this if there is something what it have to do is it have to get the field name basically so here the url plus equal okay and here and under score sort so basically here i have to provide column name okay so here the field name as you can see we got here in this ordered by and here this field okay so what i can write here is the dollar okay and query dot okay and here i will call it as a order by dot and here i will get the field okay so now we are done with this field now we have to assign the property in which direction it want to order so and and here i will call now underscore order equal to and order information we will get in order direction okay so let's copy this and here dollar theory dot order direction so now save it and let's come back here okay so let's go to the network and here as you can see we have this eight six four one two so now let me click on this gold we got row i started with zero so now let me show you so we have passed here ascending and sorting is a gold here so now if i click again here i will get the maximum at the top now it's becoming decreasing order so eight six four four so here i am passing here descending order okay so for this what we have done is your query dot order by if this value doesn't contains it is gonna to give undefined and undefined means this condition will get failed and this is not gonna to execute if there is something so here i ask you to get the field here and here direction okay so as of now we have implemented the searching and the sorting and here the pagination so now it's time to implement the filtering so let's implement filter okay so for that here we have to add a property to enable the filter to the material table and that is called comma filtering okay and pass this as a true here so here now we will be having here the filter option so as you can see we have this filter option so let me go to the console and here if i type something okay i typed here a s and now as you can see here we got something in filters and if i expand here as you can see at the first position i have here column definition so let me expand more so here in column i got this title and field and this is the operator equal is getting used here and this is the value what i typed here okay so now here if i type here something so let me type here as well okay so now we we will get the multiple one in filters so here at the first position we have equal to the 2008 and we will have the column definition related to year and here we have this export and here we have this value okay so what we have to do is we have to modify this a structure and we have to convert like this so year equal to value and country equal to value okay so for that here let's come back and write a another one condition so if and here i will call it as query dot filters dot length okay so if length is zero don't go inside okay and if length is not zero that means the user have applied some filter so then it have to go inside okay so here this query dot filter is gonna to be arrayed so what i will do is console.log okay and here carry dot filters dot and i want to modify the structure so i will go with the map here okay so if you want to learn more about the map you can check the description of this video so here the map and this map is gonna to give me a parameter so i will call it as a filter okay and here the curly bracket and what i will do is i will return a text from here and here whatever the value i will get i will retrieve that so let me show you how so here right now i have this column so column dot field is gonna to give me this year so i will write here dollar okay and filter dot column dot field okay and here what i will do is i will assign this property that is called operator okay so here i will write dollar again okay and filter dot operator okay so now we have here operator and now we have to focus on the value so hello we will go get it here the filter dot value so here the filter dot value okay so now save it and here we are doing the console log okay so let's come back here so now here let's start typing so i typed here swimming okay so now as you can see we got this export and here we got this value as a swimming okay so now let me type here year so 2008 i typed here and now here i have this year equal to 2008 and here a spot equal to swimming okay and here as you can see we need to add this end here so for that here we will return and from here itself so now this set will have and as well so here 2009 so i type 2008 here and let's provide age 78 okay so here as you can see age is 78 and here and here is 2008 so now we are getting in a array okay so now here we i started getting like this but our task is we have to combine both of them okay so for that here let's remove this console log and create a variable const okay and called it as a filter okay so now we have stored in this variable and here i will do console.log so filter dot and i will use a function called join and here i will pass this one as a empty okay so now let's come back and let's see what is the result we are getting okay so here i have this country i typed here you so i got your country equal to you here the year so i typed here something and here we got and country you and year 67 and this is actually what we wanted okay so now we got our desire our text here so what we will do is now we have to update our url so here the url plus equal okay and i will paste this one okay so now save it and let's come back here okay so now let me type here it so here as you can see i got this eight okay that means the filter is working right now so now if i type here 23 this record will be here okay if i type here 22 this record is not matching so it will go away so now let me show you in network tab so here the so here as you can see this is the age and the value is 12 and gold the value is eight here okay so now let's clear the value okay so here what we have done is here we have checked for the length of the filter if length is zero that means user haven't applied any of the filter so this condition is gonna to vary okay so if not that means that he have applied any of the filter so i will get the field and i will get the operator and i will get the value once i will get it i will join them okay and i will modify the url okay and at last here we will send this url to the fetch and from here it is gonna to face the record and it is gonna to modify this data here we have seen how to apply all the functionality so let's verify again so here we have this pagination as you can see the pagination is working fine okay and from here we can do the filter so here as you can see the dara so here let me type this dhara okay and here we got two dhara okay so now here let me click on this so now this got sorted so now it is in descending order if i click again it is going to be in ascending order okay suppose you want to filter so from here you can type and it will get filtered okay guys so in this video we have seen how to implement surface site pagination filter search and sorting in material table so you can get the download link of this code in description of this video if you like this content do like share and subscribe if you have any doubt you can ask me in comment section thanks for watching

Channel: Codenemy

Views: 7,215

Keywords: server side pagination in reactjs, server side search react js, server side filtering, server side pagination, pagination, material-table, server side in react, react table, material table react, react datatable, server, side, sorting, search, filter, material ui table, Material table, material ui react, material ui react tutorial, material ui tutorial

Id: mYi2-UZHa6E

Length: 35min 12sec (2112 seconds)

Published: Fri Jun 25 2021