stormy-gold•2y ago

Sort, filter, pagination

Hi! Currently, the default sorter, filter, and pagination is performed using query parameters. Two questions on this: 1) Is it possible to modify the parameter names? 2) Is it possible to instead handle these client side? Thank you!

12 Replies

tame-yellow•2y ago

Hi @misstsuliu. For your question 1: Yes it is possible to modify the parameter names as you desire but you have to override the dataProviders method you can have a reference on this link https://refine.dev/docs/faq/#how-i-can-override-specific-function-of-data-providers If you are confused with how you can modify your parameters here is an real world examples source code for your reference https://github.com/refinedev/real-world-example/blob/main/src/dataProvider.ts#L40 For your question 2: I am somewhat confused with you question on what you want to handle. Is the params name or the filtering of data on client side? If you are trying to filter the data on client side after fetching from server, then I guess you should not do that on client side. @Omer Can help you with more on that.

GitHub

real-world-example/dataProvider.ts at main · refinedev/real-world-e...

Exemplary real world application built with refine - real-world-example/dataProvider.ts at main · refinedev/real-world-example

FAQ | refine

How can I change the form data before submitting it to the API?

stormy-gold•2y ago

Thank you for question 1!! For question 2, yes, I am trying to sort and filter data that was received from the server. Some APIs I am working with do not have sorting/filtering through query parameters setup and return the full list of data.

Omer•2y ago

Hey @misstsuliu , You can disable pagination with hasPagination: false on useTable hook. https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#properties For client side filtering, you should override the onChange event from useTable in your Table component ⚡ https://github.com/refinedev/refine/blob/next/packages/antd/src/hooks/table/useTable/useTable.ts#L134 BTW thank you @dipbazz 🤩

stormy-gold•2y ago

Hi there! Revisiting this thread, any chance you have examples of overriding the onChange event, to modify sort and filter? I am trying to figure out how I can directly manipulate the data from within the on change method, given that dataSource is readonly. To recap, the reason is because I want to filter and sort on the client side, because the backend that I am interfacing with does not support it.

rising-crimson•2y ago

@misstsuliu Sorry for late response. I will create example for you and we will add this use case to our docs🙏 Hi again @misstsuliu in this example I did override onChange when only paginate action is triggered and for filter and sorting I used Antd features https://codesandbox.io/s/amazing-bhabha-ri3g6g?file=/src/pages/posts/list.tsx I hope i understand your problem correctly, if you have any further questions or feedbacks, please don't hesitate 🙏

fascinating-indigo•2y ago

Hi everyone, how i can change the "current" page? i think with "setCurrent", but, how i can do that on pagination buttons? i used datagrid

rising-crimson•2y ago

@_leonardomuniz Hi , By default, MUI don't have page numbers on DataGrid and you wanna implement that. did i understand correctly ?

fascinating-indigo•2y ago

hi @alicanerdurmaz sorry for my English, our api uses page=x for pagination, by default it returns 20 results per page, so I would like to know how to include this in the datagrid pagination, I imagine you can just change the current with something like "current +1", I just don't know how to do this inside the datagrid

rising-crimson•2y ago

can you open new post on help seciton with this text?

fascinating-indigo•2y ago

sorry, I invaded someone else's post, sorry, and thanks

stormy-gold•2y ago

This is perfect, thanks for your help @alicanerdurmaz!!

rising-crimson•2y ago

I'm glad to hear that 🙏