useDataGrid and crudFilters
I am using useDataGrid, and I want to implement the crudFilters in my app, the same way as the fineFOODS example, how does it work and how I can render my data from the API after filtering.
5 Replies
Hi @ablamalki. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To implement
CrudFilters
in your app using useDataGrid
, you can follow these steps:
1. Set the initial and permanent filters using the filters.initial
and filters.permanent
properties when calling useDataGrid
. The initial filters will be cleared when the user changes the filter, while the permanent filters will remain unchanged.
Example:
2. Use the filters
return value from useDataGrid
to access the current filters state. You can find more information about the CrudFilters
interface here (https://refine.dev/docs/api-reference/core/interfaceReferences/#crudfilters).
3. Use the setFilters
return value from useDataGrid
to set the current filters state. This function accepts a new filter state or a function that takes the previous filters state and returns a new one.
4. When the user filters a column, the dataGridProps.onFilterModelChange
function is called with the new filter model. This function automatically transforms GridFilterModel
to CrudFilters
and calls the setFilters
function. If you want to override it, you can use it like this:
5. After applying the filters, you need to fetch the data from your API based on the current filters state and render it in your DataGrid component.Interface References | refine
CrudFilters
Unfortunately, the fineFOODS example is not mentioned in the provided extracts. However, you can follow the steps above to implement
CrudFilters
in your app using useDataGrid
.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1015164382927405067> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire•2y ago
Hey @ablamalki I think you can do this by overriding the
getList
method in the data provider. There is an example below.
https://refine.dev/docs/api-reference/core/providers/data-provider/#how-i-can-override-a-specific-method-of-data-providersData Provider | refine
The data provider acts as a data layer for your app that makes the HTTP requests and encapsulates how the data is retrieved. refine consumes these methods via data hooks.