conscious-sapphire
conscious-sapphire•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
genetic-orange
genetic-orange•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?
conscious-sapphire
conscious-sapphire•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
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 🤩
conscious-sapphire
conscious-sapphire•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.
automatic-azure
automatic-azure•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 🙏
rival-black
rival-black•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
automatic-azure
automatic-azure•2y ago
@_leonardomuniz Hi , By default, MUI don't have page numbers on DataGrid and you wanna implement that. did i understand correctly ?
rival-black
rival-black•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
automatic-azure
automatic-azure•2y ago
can you open new post on help seciton with this text?
rival-black
rival-black•2y ago
sorry, I invaded someone else's post, sorry, and thanks
conscious-sapphire
conscious-sapphire•2y ago
This is perfect, thanks for your help @alicanerdurmaz!!
automatic-azure
automatic-azure•2y ago
I'm glad to hear that 🙏