search multiple antd columns field from search box

how can we search multiple columns field from a search box

8 Replies

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: You can search multiple columns from a search box by setting the filterOperator property of the column to "contains" and disabling filtering for the column by setting the enableFiltering property of the column to false. SOURCES: ./docs/tutorial/4-adding-crud-pages/antd/adding-sort-and-filters.md ./docs/tutorial/4-adding-crud-pages/headless/adding-sort-and-filters.md ./docs/advanced-tutorials/search/search.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

foreign-sapphireOP•3y ago

how to use conditional filter in antd table to search can u give us simple example of it

afraid-scarlet•3y ago

Hi, https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#onsearch is this what you looking for ?

foreign-sapphireOP•3y ago

const { searchFormProps, tableProps } = useTable({ onSearch: (values) => { return [ { field: "title", operator: "contains", value: values.title, }, ]; }, }); i want to add another field in that to filter

afraid-scarlet•3y ago

it's array. you can add other values to array

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

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

foreign-sapphireOP•3y ago

i want table to be changed while entering values not while clicking on submit

afraid-scarlet•3y ago

you can use onValuesChange prop from antd form

<Form {...searchFormProps} onValuesChange={searchFormProps.onFinish} layout='inline'>

<Form {...searchFormProps} onValuesChange={searchFormProps.onFinish} layout='inline'>

foreign-sapphireOP•3y ago

ok thanks

search multiple antd columns field from search box

Did you find this page helpful?