extended-yellow
extended-yellow14mo ago

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
kapa.ai
kapa.ai14mo ago
Hi @ablamalki. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- 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:
useDataGrid({
filters: {
initial: [
{
field: "name",
operator: "contains",
value: "Foo",
},
],
permanent: [
{
field: "name",
operator: "contains",
value: "Foo",
},
],
},
});
useDataGrid({
filters: {
initial: [
{
field: "name",
operator: "contains",
value: "Foo",
},
],
permanent: [
{
field: "name",
operator: "contains",
value: "Foo",
},
],
},
});
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:
<DataGrid
{...dataGridProps}
columns={columns}
autoHeight
onFilterModelChange={(model, details) => {
dataGridProps.onFilterModelChange(model, details);
// do something else
}}
/>
<DataGrid
{...dataGridProps}
columns={columns}
autoHeight
onFilterModelChange={(model, details) => {
dataGridProps.onFilterModelChange(model, details);
// do something else
}}
/>
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.
kapa.ai
kapa.ai14mo ago
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: ----------------------
kapa.ai
kapa.ai14mo ago
<@1015164382927405067> kapa.ai is still learning and improving, please let us how it did by reacting below
fair-rose
fair-rose14mo 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-providers
Data 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.