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

#reactjs #antd #table #sorting #pagination #filter
In this video tutorial I have explained How to add Pagination, Sorting and Filters in Ant Design Table component using ReactJS app
This video focuses on
- How to use antd Table in ReactJS
- How to populate antd Table component with data fetched from server.
- How to add pagination in antd Table
- How to navigate between different antd table pages
- How to update page sizes, adding callbacks for page and page size changes.
- How to add sorting on different antd Table columns
- How to sort antd table data based on user sort actions.
- How to add filters on different antd Table columns
- How to filter antd Table data based on user filter actions.
If you are new to ant design, I have already added an intro video on ant design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
In this video we will be using different available props of antd Table component to see the possibilities for different use-cases. More details on antd Table component can be seen in this video ( • Ant Design Table compo... ).
For more details on ant design, please visit its documentation at ant.design/components/overview/
Happy Coding!

[@selfdirectx4934]

Thank you for this Pagination tutorial! I was stuck until I watched your video.

[@CodeWithAamir]

Glad it helped!

[@leechurn7758]

thank you for this tutorial. Ant Design tutorials are few and far between. Thank you for the good work

[@CodeWithAamir]

Nice to hear that, thank you @Lee

[@danielfarkas8951]

Thank you so much for the video, Amir!

[@0xLife]

You are my hero, you should continue with the Antd series, honestly you are the best resource available for exploring and learning it! Keep it up!

[@CodeWithAamir]

Thank you so much @0xMusic for the encouraging feedback, surely I will have more videos on antd.

[@user-hb7nj1ti2y]

@@CodeWithAamir Hello Great video. Help me please. how to change the name of the sorting buttons?

[@CodeWithAamir]

Hi @Кама Пум, To change the sorting buttons etc. you need to customize the table cell title and return your custom react node which includes both column name along with sorting icons/buttons etc. something link below const columns = [{ title: (filters, sortOrder) => Title , }] You will receive current sort order like ascending etc. and you can show specific icon bases on that. Please let me know if you need any more information on that. Thanks

[@nelsonjo14]

Thanks you so much, it really help me with a project!!!!!

[@castiliOR]

Thanks bruh, ur literally saved my life. Like it

[@shubhamambhore5707]

Thanks for the wonderful video 🔥🔥🔥🔥

[@iMhyunaey]

Thanks. you made my day!

[@QuadDrums]

Thanks for this video, I really needed this

[@CodeWithAamir]

Glad it was helpful!

[@apnafoodpk5690]

Amazing

[@user-tg3bj1vu9i]

Thanks you so much, it really help me with a project! а раскрытый код есть?

[@nszack4468]

thank you

[@BhushanChandak]

Hey Amir, You are doing a great tutorial on ant. one question about this tutorial is, how do we get filter data from remote data? currently it is not getting by API call its only that page data which it filter ?

[@CodeWithAamir]

Hi @Free Voice, You are correct, its filtering only the local data, but to filter data based on API call what you can do is you can make API call in your onFilter function passing the the selected filtered value into your API payload so that you get filtered data from server. So it will look something like below onFilter=(value, record)=>{ //Make api call here passing this "value" as filtered value to your API call and in response of API call update the dataSource state variable so that table renders the updated/filtered data return true//Do not filter local data } Please let me know if you need any more information on that. Thanks

[@Learning-king210]

Very well 👍

[@CodeWithAamir]

Thanks 😊

[@GraubiGames]

Hey Amir. I have a question for regarding the "filters". As I can see from the antd document, the filters-function takes an object and you have hardcoded that. How would we proceed if we have a dynamic list where there may be added some more values for the filter? Right now im working with a Set, so to make sure that each value occurs just once, but now I want to add those values as objects to the filter and I cant get it to work. Any suggestions?

[@CodeWithAamir]

Hi @Ibn Al-Ghrawbi, For dynamic list you can loop over those list/Set values and display or add to the filters prop so it will be an array of object which contains text and value for each filter(value from dynamic set). And because it will be for a single column so the onFilter function I guess will work the same as it is right now. Please let me know if you need any more help on that, I can even code it for you if you share your code snippet with me on codesandbox or on email [e-mail] etc. Thanks

[@backyardmayhemusa]

Great tutorial, do you have any idea how to use a state variable and use it to set the filter for a column?

[@CodeWithAamir]

Yes @Sawka's Backyard , You can link your state variable to antd table column filters in two ways. To save what user has typed in filter into a state variable you can do that on line#53 at 15:07 onFilter:(value, record)=>{ //You can save this value as filter value in state and use it wherever needed } on the other hand if you already have a state variable and want to apply that as a filter then you can pass that state variable into the defaultFilteredValue prop of column to make a column filtered by default. So it will be something like below const columns = [ { title:"Name", defaultFilteredValue:, ...other props } ...other columns ] Please let me know if you need more help on that. Thanks

[@backyardmayhemusa]

@@CodeWithAamir Thanks for the reply. I actually just figured out the way I was thinking of. I ended up using the setFilter function. That way the filter / controls do not need to be in the table header. Thanks again.

[@FariaAfrose]

this activation happens when you click the table header. What if you want the sort icon to activate according to the default table data without requiring a click on the table header? Is it possible to achieve this behavior in Ant Design?

[@kaze01234]

How do you add boilerplate code for react hooks?

[@sapna5455]

Can you please create one video on crud operation using antd4 APIs like (create update delete edit), it should be completely dynamic.

[@CodeWithAamir]

Hi Sapna, Today I have created a video on antd table CRUD operations at this link kzbin.info/www/bejne/r2XCn4Z7YsaNnsU Please go through that and let me know if you still have any question. Thanks

[@codewithad]

hey, Amir thank you for your nice work, can you please create a video on how to paginate with firebase (on page change we call the firebase function to fetch new data).

[@CodeWithAamir]

Great Suggestion! Hopefully I will create a video on getting data from a server with pagination using public APIs so you can get an idea and replace public API with firebase library functions/APIs to fetch the documents. It is in my future plans to create a series of firebase related videos containing authentication, firebase realtime database integration etc. Thanks

[@CodeWithAamir]

Hello @Code With A.D, Today I have created a video kzbin.info/www/bejne/d4mxoZKlipaEbpI particularly for this topic of fetching data from server using antd table pagination. Please go through it and let me know with your feedback on that. In the video you will see that I have created a function "fetchRecords(page)" to get paginated data based on selected page so in that function I have explained how to fetch the data using Fetch or Axios so in a similar manner instead of using axios you can use firebase/firestore APIs to fetch the data. Hope it will help. Thanks

[@codewithad]

@@CodeWithAamir Thank you so much, I will see the video you created (mentioned one), appreciate your hard work. Regards

[@sangharshmishra4511]

One doubt how to show no of rows in a table after filter lyk it should show 3 rows or 4 rows after filter plzzz make a video on it sir. I request u to plzzz clear my doubts and make a video on it

[@CodeWithAamir]

Hi @Sangharsh, After filter, it will show only the rows which fulfills the filter criteria. So suppose there are total 10 rows and if no filter is applied then it will show all 10 rows. And if filter is applied and only suppose 3 rows fulfills that filter criteria then only those 3 rows will be shown. You can see this in video at 15:33 where you will see that after filter it is showing only the Row IDs which fulfills the filter criteria. Hope it clears your doubts, still if you have questions feel free to ask. Thanks

[@burakilhan5014]

Thanks for the video! How can we change the size of FilterOutlined icon?

[@CodeWithAamir]

Hi @Burak, To change the icon size you can give it a class or style and change the font size it will increase or decrease the size accordingly. For detailed video on antd Icon please visit following video tutorial kzbin.info/www/bejne/nJK4ipSIabOVZ6c

[@charlesobasi1991]

How do you make a default sort? For example when the data gets loaded you want it to be sorted by UserID as default?

[@CodeWithAamir]

Hi @Charles Obasi You can set default sort using "defaultSortOrder" prop and set its value to "ascend" or "descend" based on what you want it be sorted by default. Hope it helps. Thanks

[@rananjaneyulupanchakarla1705]

Hi Aamir, Nice explanation. I have a doubt here, I need to add "All" option in pagination drop down. When I click on all option it should display all the records. Any reference?. Thanks

[@CodeWithAamir]

Hi @Rananjaneyulu Panchakarla, You can show custom options inside the pagination dropdown but again those should be numbers (or should be parsable as numbers) like pageSizeOptions={[1,10,"20","250"] } but I don't see any props that can accept string values like "All" The only workaround I can see is you can add an option equal to the number of records you have so it will behave like showing all records from pagination dropdown but not exactly the "All" word. If you need more information specifically on Pagination and its different props/customization you can go through following video it may be helpful kzbin.info/www/bejne/qWbXiaV_hZiEnM0 The other work around is you can just create your own dropdown/Select component that can show these custom options and on selection of strings like "All" you can set the Table Pagination accordingly. And in that case you will hide the table Pagination UI and show your own, that can work. Please let me know if you need any more information on that. Thanks

[@ahmadaziz2413]

thanks dude, can you make tutorial filter by search in table ant design?

[@CodeWithAamir]

Sure @Ahmad, I will try my best to create a video tutorial on that as well. Thanks

[@ahmadaziz2413]

@@CodeWithAamir okayyyy , im waiting

[@CodeWithAamir]

Hi @Ahmad, Here you go with that video tutorial kzbin.info/www/bejne/q5LXoYuIobdnsNE Please let me know with your feedback on that. Thanks

[@SammuBumBumkiMumma]

Hi, I want to change the sorting icon . How can I customise it to upward and downward arrow.

[@CodeWithAamir]

Yes you can customise the sort icons using the title. So while defining the columns you can customise it, so doing something like below const columns = [{ title:(filters, sort)=> return custom title along with custom sort icons based on sort and filter parameters …other props of column }] Hope it helped. Please let me know if you need any more information. Thanks

[@user-hb7nj1ti2y]

Hello! Great video. Help me please. how to change the name of the sorting buttons?

[@CodeWithAamir]

Hi @Кама Пум , To change the sorting buttons etc. you need to customize the table cell title and return your custom react node which includes both column name along with sorting icons/buttons etc. something link below const columns = [{ title: (filters, sortOrder) => Title , }] You will receive current sort order like ascending etc. and you can show specific icon bases on that. Please let me know if you need any more information on that. Thanks

[@soumyajitsur6966]

Hi Amir, Can you please tell how to utilize reset function in filter, if I want to clear any state value after clicking on reset?

[@CodeWithAamir]

Hi @soumyajit sur, One way is, on reset filter your function for onFilter will be called in which you can try your logic to clear the sate. At the moment I don't see any specific function that is called only on reset click. Hope that helps. Thanks

[@soumyajitsur6966]

@@CodeWithAamir reset is inside onFilter only

[@eduardomata9347]

do you have any idea how to make this table as a infinite scroll list?

[@CodeWithAamir]

Hi @eduardomata9347 The one way is using the react-infinite-scroll component and encapsulating the antd table inside the react infinite scroll component so that when user reaches to the end of the table rows we make next call to fetch the next page and it continues like infinite scroll list. I have explained how to use the react infinite scroll in following video that might help you kzbin.info/www/bejne/aWLMlJV6qcaCY80 Please let me know if that was helpful or you need any more help on that. Thanks

[@kenzafilali9115]

hello is this a library tha we are using ? and how can we style it please thank you

[@CodeWithAamir]

Yes, I am using antd library and I have multiple videos on styling them using different ways. Style Antd Components: kzbin.info/www/bejne/naGqamltodCcgMU Dynamic Themes: kzbin.info/www/bejne/qpinXpapm7GBi9U Please let me know if you need any more help on that. Thanks

[@rkumaresan939]

bro, please upload video for separate antd pagination with antd table..

[@CodeWithAamir]

Here you go with that video: Ant Design Table Pagination | Fetch Paginated Data from Server using Axios | React JS Tutorial kzbin.info/www/bejne/d4mxoZKlipaEbpI Thanks

[@rkumaresan939]

@@CodeWithAamir bro.it's not a antd pagination..i want manual antd pagination with examples.

[@CodeWithAamir]

Got it, you are referring to separate pagination component not necessary with table.

[@CodeWithAamir]

Hi @R kumaresan, Here you go with a separate video on antd pagination. kzbin.info/www/bejne/qWbXiaV_hZiEnM0 Please have a look and let me know with your feedback on that. Thanks

[@Tyheir]

Hello, what is your solution for antd overriding global styles such as body. It’s my main problem right now and most components don’t function properly without importing antd css

[@CodeWithAamir]

Hi @Reborn, Yes you are right antd components will function properly after importing antd css but after you import it overrides your global css. Unfortunately overriding global style is a known issue at their end or in other words we can say antd do not work properly without doing this css import or overriding the global styles, you can always override their component css as I explained in following video kzbin.info/www/bejne/naGqamltodCcgMU but global style like body etc. got overridden because they think or expect that once a developer has started using antd they will adopt their styling too. Community is discussing few work arounds for this one on Github but as those are not official yet so it might break in future. What I usually do is I adopt their styling from the day one and override their component styling whenever needed. That is the solution I propose till today until antd releases any official global styling overriding technique. I hope this made clear now. Please let me know if you need any more help on that. Thanks

[@Tyheir]

@@CodeWithAamir this was a perfect response. Thank you. I just wanted to be sure there were no known ways to stop this behavior.

[@bilalraza9577]

can you plz tell how to call and api in onchange function for page and pageSize

[@CodeWithAamir]

Yes @Bilal, As per video at 11:00 what we need to do is, we have to call the api in onChange function so the onChange will look like something as below onChange=(page, pageSize)=>{ setPage(page); setPageSize(pageSize); /*After page state changes you can show spinner if data for that page is not available, because we will fetch it below, also if below api does not succeed we can show error or some message to user that depends upon the use-case.*/ const apiURL = `YOUR_API_URL?page=${page}&page_size=${pageSize}`//Assuming page and page_size are the params of api url axios.get(apirURL) .then(response =>{ setTotal(response.data.total);//Assuming total is the key from server response that tell total number of records setDataSource(response.data.records);//Assuming records is the key that contains records for that particular page } ); } Please let me know if you need ant more information/help on that. Thanks

[@bilalraza9577]

@@CodeWithAamir I highly appreciate you to guide me ..... I will tell you

[@CodeWithAamir]

Hi @Bilal Raza, Today I have created a video kzbin.info/www/bejne/d4mxoZKlipaEbpI specifically for this purpose of making API calls on page change and fetch paginated data from server. Hope it will help someone. Thanks

[@bilalraza9577]

@@CodeWithAamirI really appreciate your efforts for you family

[@shaimolvarghese4176]

Hi, I have tried for pagination with pagination={true} inside table tag. But it shows "Type 'true' is not assignable to type 'false | TablePaginationConfig | undefined'." Please let me know the solution

[@CodeWithAamir]

Hi @Shaimol, It should work with pagination as true, that might be due to linting or any typescript version that causing issues. As a solution you can use a pagination config instead of just true so something like below pagination={{ position: "bottomRight"}} Please let me know if that fixed. Thanks

[@saistachhipa3053]

How can I change the default sort icon in antd table ?

[@CodeWithAamir]

Hi @Saista, You can change the sort icons in antd table by return a custom UI component in title of columns object something like below const columns = [ { key: "3", title: ({ sortOrder }) => { return ( {/* Return the UI component here that includes title as well as your customized sort icons for this title based on sortOrder value*/} ); }, dataIndex: "YOUR_DATA_INDEX_KEY", sorter: true, } //Other columns objects ] Please let me know if you need any more information/help. Thanks

[@saistachhipa3053]

@@CodeWithAamir thanks I have done using css after selector

[@jeiko334]

Hi you can leave the link to download the project

[@CodeWithAamir]

Sorry, source code is not available because I have not uploaded to any repo, and in my latest videos that got overwritten. I will try to keep the source code for each video from now onwards so that if someone needed it I can provide. Thanks for your valuable feedback.

[@auinspiration03]

#source #code #link

[@CodeWithAamir]

Sorry @Paradise, Unfortunately no repo code for this particular video. Although I have few related ones like Table Pagination, Table filter/search etc. at here. github.com/aamirjaved844?tab=repositories

[@artone5841]

hey, Warning: Each child in a list should have a unique "key" prop. how i solved this

[@CodeWithAamir]

Hi @art one , You can pass the unique key either inside you dataSource like dataSource={[ { col1: "123", col2: "456", key: "123", }, { col1: "789", col2: "10111213", key: "456", }, ]} and Table will automatically pick it if it is against the "key" in dataSource recrod. The second way is you can specify the unique key column in Table props like and it will pick col1 as the unique key for rows. The 3rd way could be you can return it based on your row record so something like record.uid} /> Please let me know if that makes sense or worked for you. Thanks

[@khadija-oy4hq]

source code please?

[@CodeWithAamir]

Hi @Mon Dev, Sorry I was not able to retain this particular codebase but I have code for antd table pagination at github.com/aamirjaved844/AntDTablePagination It may help you. Thanks

[@khadija-oy4hq]

@@CodeWithAamir okkeey thaank you 🙏🙏