deep-jade•13mo ago

onsearch for array data in react refine

Need to implement filter for tableprops. my table having the array type data. how to implement the onsearch for array data

2 Replies

kapa.ai•13mo ago

Hi @Malathi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a filter for tableProps using the onSearch function, you can use the useTable hook provided by Refine. The onSearch function is called when the form is submitted and should return a CrudFilters object or a promise that resolves to a CrudFilters object. Here is an example of how you can use the onSearch function to filter data based on the title:

const { searchFormProps, tableProps } = useTable({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

const { searchFormProps, tableProps } = useTable({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

In the above example, the onSearch function is filtering the data based on the title field. The operator is set to "contains", which means it will return all records where the title contains the value entered in the form. If your data is of array type, you can adjust the field property to target the specific field in the array you want to filter. For example, if your data is an array of objects and each object has a name property, you can set field to "name" to filter based on the name. Remember to create a form using searchFormProps from useTable for search/filtering. When the form is submitted, the onSearch method runs and you get the search form values. Here is an example of how you can create a form for search/filtering:

<Form {...searchFormProps}>  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
</Form>

<Form {...searchFormProps}>  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
</Form>

In the above example, an input field is created for the title. When the form is submitted, the onSearch function is called with the values of the form. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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