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!
13 Replies
harsh-harlequin•3y 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-goldOP•3y 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.
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-goldOP•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.
manual-pink•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 🙏adverse-sapphire•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
manual-pink•2y ago
@_leonardomuniz Hi , By default, MUI don't have page numbers on DataGrid and you wanna implement that. did i understand correctly ?
adverse-sapphire•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
manual-pink•2y ago
can you open new post on help seciton with this text?
adverse-sapphire•2y ago
sorry, I invaded someone else's post, sorry, and thanks
stormy-goldOP•2y ago
This is perfect, thanks for your help @alicanerdurmaz!!
manual-pink•2y ago
I'm glad to hear that 🙏
crude-lavender•2w ago
Is the linked example still the way to go? I saw that sorters now has a mode which can be set to "off". I personally would favor a solution like with paginate where the mode can be set to "client". The problem with the suggested solution (in the example provided) is, that on a paginated layout filtering / sorting only works for the selected page and not the whole dataset. If you want to filter the number of total pages should be reduced and not the amount per page.