other-emerald•2y 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•2y 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•2y 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.

Interface References | refine

CrudFilters

kapa.ai•2y 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•2y ago

<@1015164382927405067> kapa.ai is still learning and improving, please let us how it did by reacting below

generous-apricot•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-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.

useDataGrid and crudFilters

Did you find this page helpful?