How to add Pagination, Sorting and Filters in Ant Design Table component using ReactJS app

hello guys welcome back so in this video we will be exploring the table component from and design a bit more we will be seeing how we will be fetching the data from the server side and populating in the table and also we will be seeing how we will be adding the pagination to their data and how we can navigate between different pages also we will see how we can set uh different page size also we will add uh sorting on different columns and will sort the data based on that also in last we will be adding filters on some of the columns and we will be filtering the data based on those filters all right so let's get started so we have empty ref.js project and showing nothing right now so for the table data we will be using uh getting data from a server for that we will be using json placeholder and from the json placeholders we can use and if it's data sets maybe we can use to do's 2.0 will be enough for showing pagination sorting and filtration etcetera so if you go to to-dos so this will be the url for on which we will be calling and getting the data from the server and it has four fields in each object user id id title and computer and maybe we can use we can show three columns one may be for id and second one maybe we can use user id and later on on the user id we will be sorting it's on the user ids so some of them will have you ready to three this type of and also we have we can show a status column and we can filter based on the status so we can add the filtration of this column and sorting on this column all right so let's add a table component and for its columns let's define it cost columns is equal to suppose the first column we can say that its title is id and its data index is also this id and let's copy it for other columns suppose this is key to key three and here we can show the user id and the data list will be user id this one this is is capital and the third column we can show the status and its data index will be completed and for that we can do a custom renderer and it will we will be getting a completed variable and suppose we can return a p tag and saying that if it is completed uh we can show that status is complete otherwise you can show that it is in progress right so here are the columns we can add this to columns and for the data source so let's define data source above so for that you guys get that in front of state so it is it should be data source and by default empty let's fetch it uh using an effect so nothing returning and we will be fetching the data on this component load so making a fetch call to this url it will be great by default and then it will return as a response and we can say response dot json and after that it will return master data and what we can do is you can set data source to that data and let's also catch for any errors for now let's only console there and finally uh what we can do is let's add some loading while we are fetching the data and and finally we can search the loading to false so let's add a state for uh the loading and barcodes where it's false so here we will be set loading files and before we start fetching we'll start loading to do all right and let's import use state and use effect from object and we can add the loading to the table component as well so while we are loading the data it should on the table component it should so okay that source is not different let's save it save it here so here you go the id column user id column and status column and edition in progress and complete also the user id and by far it is showing the pagination as well so you can move between different pages and actually that is the pagination prop of the table and if you if you pass a false it will just hide the pagination and will show all of these records so we have to record 200 records so let's add pagination to two so by default the space page size is 10 and we have 200 records so it makes it showing 20 pages and we can also change the page size from here as well so if it is 100 pages per column and it is 100 records per page so it will be showing two pages so if it is 20 showing 10 pages 10 to 20 is 200 again right so also uh but it is showing the first page if we want to show suppose the third page uh we can pass here as that its front page will be supposed third so here you go it is showing the third page and also if you want to set the page size programmatically we can make it suppose it is 15 pages 15 rows per page so here you go if it is 15 per page right and right now if you click on this these ones it will not affect because we have hardcoded this content base size so for that if you want to make it two-way so changing it from here it should change it here and if you change it here it should change it here so for that let's add two more states so for that you state you can say a page so the first page was one and then the page size suppose default page size we can say 10 and here instead of 3 and 15 we can see it a page and this is a page size and there is another method on change we will be getting page and page size okay and here we can set page to the page with whatever is passed and set page size to the page size so what will it will do is if you will change the page size from here it will set it here and if you change the page numbers here it will set it here and that will but for 10 page 10 records whatever we have defined here and first page is showing here and if you move no it will reflect right and if you change the page size here as well it should also reflect and also suppose right now we have all of the records here so if you want to fetch the records from the service page by page so what we will be doing is we will be showing uh there is another parameter called total so we will be showing suppose we can say the total is suppose 500 it will show that the pagination accordingly so making 50 it is saying that 50 records per page and 10 pages so that makes it 500 records and on change of any of the page it will call out this method on change and here we have set the page to states page and page size and also if we want to make stretch the records according to the page size we will make the ap call here with page and page size and we will update the data source accordingly so that the so that the table is updated according to the the selected page and page size and it the data is coming from the server side right so that is on the pagination so let's continue and add some sorting on the user ids so for that what we have to do is only we have to do is add a sorter function here for that particular column and it will give us two records suppose we can say record one and record two so we have to return uh which of the required record is greater than the other one so what we're doing is we will be returning record one dot uh we can say that user id if that is greater than record two dot user id right save it here you go it has added the sorting uh this icons and if you click on it it sorts so right sorting for the current page go to the first page sorted again 1 and 10 second page sort it right so 8 towards 6 and if you sort it to the ascending it will ascend three to five right so it actually what it does is it sorts all of the data and load the second page from that okay so let's add uh filters on the status column so we will be filtering based on the in progress and the complete status so for that we will be adding [Music] the filters key here and those will be two filters the text will be supposed to complete and it's for the complete its value was m2 and if the text is in progress it's very was false right so let's save it so it has shown the filter icon and if you click on it it shows complete and in progress right but it will doing nothing right now because we have not added any logic on that so let's add that logic here so on filter what we will be doing is filtering the data so sorry so it will give us uh the value and also the record i got filtered so what would be doing is you can record dot if the record dot completed is equal equal to value we want to show it otherwise do not want it to be shown right so now if we filter on this was the complete it was only the complete data and if it is in progress it will show only the in progress rows and if you want to show both it will show both in focus and complete in progress only in progress sorry complete only complete and in progress only in progress and if if you reset it will reset to the default will be showing all of the values right so that was the pagination sorting and filtration so if you have any questions please let me know in the comments below and if you like the video please hit like and subscribe to the channel and also let me know in the comments how you find this video and thank you for watching see you next video

Channel: CodeWithAamir

Views: 3,550

Rating: 4.9148936 out of 5

Keywords: antd, ant design, reactjs, website ui development using ant design and reactJS, ant design components in reactJS website, how to use Table component of ant design, how to show list of data in reactJS via ant design, sorting, filters, fetch data from server, populate table from server data, paginations, add pagination, how to filter table data, how to sort table data

Id: ieXE39FAOU8

Length: 16min 42sec (1002 seconds)

Published: Sat Jul 17 2021