Filter a table field with outside component and state

Hi guys, I'm using useTable to get data from database, here is my useTable code

const filter = superfoodsFilter
    ? [
        {
          field: "superfoods",
          operator: "eq",
          value: superfoodsFilter,
        },
      ]
    : [];
  const { tableProps: manuTableProps } = useTable({
    syncWithLocation: true,
    resource: "proposaled_components",
    filters: {
      initial: filter,
      permanent: [
        {
          field: "plan_id",
          operator: "eq",
          value: id,
        },
      ],
    },
  });

const filter = superfoodsFilter
    ? [
        {
          field: "superfoods",
          operator: "eq",
          value: superfoodsFilter,
        },
      ]
    : [];
  const { tableProps: manuTableProps } = useTable({
    syncWithLocation: true,
    resource: "proposaled_components",
    filters: {
      initial: filter,
      permanent: [
        {
          field: "plan_id",
          operator: "eq",
          value: id,
        },
      ],
    },
  });

Curently, I have a selection to change superfoodsFilter value, I want to filter my superfoods field in a table with the dropdown, how can I do that ?

10 Replies

kapa.ai•7mo ago

Hi @Tan Dep Trai So 1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can use the setFilters function from the useTable hook to set a filter state. This function accepts three properties to filter the table: field, operator, and value. Here's an example of how you can use a dropdown to filter the rows for a specific field:

import React from "react";  
import { useDataGrid, List } from "@refinedev/mui";  
import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";  
import FormControlLabel from "@mui/material/FormControlLabel";  
import Checkbox from "@mui/material/Checkbox";  
  
const YourComponent: React.FC = () => {  
 const { dataGridProps, setFilters } = useDataGrid();  
  
 const handleFilter = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {  
 setFilters([  
 {  
 field: "superfoods",  
 value: checked ? "YourValue" : undefined,  
 operator: "eq",  
 },  
 ]);  
 };  
  
 return (  
 <List>  
 <FormControlLabel label="Filter Superfoods" control={<Checkbox onChange={handleFilter} />} />  
 <DataGrid {...dataGridProps} columns={columns} slots={{ toolbar: GridToolbar }} autoHeight />  
 </List>  
 );
};

import React from "react";  
import { useDataGrid, List } from "@refinedev/mui";  
import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";  
import FormControlLabel from "@mui/material/FormControlLabel";  
import Checkbox from "@mui/material/Checkbox";  
  
const YourComponent: React.FC = () => {  
 const { dataGridProps, setFilters } = useDataGrid();  
  
 const handleFilter = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {  
 setFilters([  
 {  
 field: "superfoods",  
 value: checked ? "YourValue" : undefined,  
 operator: "eq",  
 },  
 ]);  
 };  
  
 return (  
 <List>  
 <FormControlLabel label="Filter Superfoods" control={<Checkbox onChange={handleFilter} />} />  
 <DataGrid {...dataGridProps} columns={columns} slots={{ toolbar: GridToolbar }} autoHeight />  
 </List>  
 );
};

In this example, when the checkbox is checked, the table will be filtered for rows where the superfoods field equals "YourValue". You can replace the checkbox with your dropdown and adjust the handleFilter function to get the selected value from the dropdown. For more details, you can refer to the refine documentation (https://refine.dev/blog/mui-datagrid-refine#controlled-filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

vicious-gold•7mo ago

@kapa.ai I'm using ant design

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but your question is incomplete. Could you please provide more details about what you're trying to achieve with Ant Design in your Refine project? Are you trying to customize the theme, import/export data, or something else? The more details you provide, the better I can assist you. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

metropolitan-bronze•7mo ago

Hello @Tan Dep Trai So 1 Refine documentation have examples for dropdown filter https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#initial-filter-and-sorter

vicious-gold•7mo ago

Hi @Alican Erdurmaz @kapa.ai I have read the examples for dropdown but it's not my question meaning I have an array of text on DB, and a string value from code. I want to check if the array from DB contain my value. I have tried operation = "contains" but the error show like operator does not exist: text[] ~~* unknown I have check the payload, seems like the contains only use for string search. My question is: Do we have anyway to filter an user string from an array from DB

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided, it seems like you're trying to filter an array of strings from your database using a string value from your code. The contains operator in Refine is used for string search and it might not work as expected with arrays. Unfortunately, the provided extracts do not contain a direct solution to your problem. However, Refine provides a way to create custom data providers where you can define your own logic for handling such cases. You can create a custom data provider and define your own logic for the getList method where you can handle the filtering of an array based on a string value. Here is a general example of how you can create a custom data provider:

import { DataProvider } from "@pankod/refine";

export const myDataProvider: DataProvider = {
    getList: ({ resource, filters }) => {
        // Your custom logic for filtering an array based on a string value
    },
    // Other methods...
};

import { DataProvider } from "@pankod/refine";

export const myDataProvider: DataProvider = {
    getList: ({ resource, filters }) => {
        // Your custom logic for filtering an array based on a string value
    },
    // Other methods...
};

You can refer to the Refine documentation (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider#getlist) for more details on how to create a custom data provider. Please note that the actual implementation of the getList method will depend on your backend and how it handles array filtering. You might need to use specific operators or functions provided by your database to filter an array based on a string value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

metropolitan-bronze•6mo ago

which data provider are you using? for example simple-rest doesn't have support to search in array of texts