flat-fuchsia•3y ago

onSearch function to run of useTable

const {tableProps,filters,setFilters,searchFormProps } = useTable({ resource:"orders", hasPagination:false,
metaData:{ fields:[ "patient_name", "uid", " order_status", "order_info", {provider:["solution","name"]}, {order_items:["provider_catalogue_id"]}, {payments:["order_id","payment_status"]}
] }, onSearch:(value:any)=>[
{ operator:"or", value:[ { field:"patient_name", operator:"startswith", value:"aysha", }, { field:"order_status", operator:"startswith", value:%${value.q.toLowerCase()}%, } ] } ],
permanentFilter:[ { field:"order_items.provider_catalogue_id", value:"086c0d6b-6e81-4099-8f30-0355cad4dd29", operator:"eq"}, { field:"provider.solution", value:"clinic", operator:"eq"},
], defaultSetFilterBehavior: "replace",

})
i want to run this onserach function of usetable whenever the value of input changes how to do it?

14 Replies

quickest-silver•3y ago

Check out the search bar in our fine foods example here https://example.admin.refine.dev/products?pageSize=12&current=1 Is this what you are looking for? Or might help a bit 🤔 Here's the source code https://github.com/refinedev/refine/blob/next/examples/fineFoods/admin/antd/src/pages/products/list.tsx#L88

Finefoods Ant Design Admin Panel - refine

Web site created using refine

GitHub

refine/list.tsx at next · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/list.tsx at next · refinedev/refine

national-gold•3y ago

Hi @rehan1, I created example app for you based on @aliemirs 's answer. https://stackblitz.com/edit/refinedev-refine-5agncd?file=package.json,src%2Fpages%2Fposts%2Flist.tsx&preset=node just add Form to your app and give searchFormProps from table. This should work 🙏

 <Form
        {...searchFormProps}
        onValuesChange={() => {
          searchFormProps.form?.submit();
        }}
      >
        <Form.Item name="patient_name">
          <Input />
        </Form.Item>
 </Form>

 <Form
        {...searchFormProps}
        onValuesChange={() => {
          searchFormProps.form?.submit();
        }}
      >
        <Form.Item name="patient_name">
          <Input />
        </Form.Item>
 </Form>

flat-fuchsiaOP•3y ago

thanks onSearch: (value: any) => { console.log(value); return [ { field: 'title', operator: 'contains', value: value.title, }, { field:"id", operator:"eq", value:value.title } ]; }, syncWithLocation: true, }); i want multiple filters but this is not working

national-gold•3y ago

What is the unexpected situation? Could this be what you want?

 return [
        {
            operator: "or",
            value: [
                {
                    field: "title",
                    operator: "contains",
                    value: value.title,
                },
                {
                    field: "id",
                    operator: "eq",
                    value: value.title,
                },
            ],
        },
    ];

 return [
        {
            operator: "or",
            value: [
                {
                    field: "title",
                    operator: "contains",
                    value: value.title,
                },
                {
                    field: "id",
                    operator: "eq",
                    value: value.title,
                },
            ],
        },
    ];

flat-fuchsiaOP•3y ago

but this is not working

Omer•3y ago

Hey @rehan1 👋 , Can you share a StackBlitz fork where we can reproduce the issue? You can fork from here https://stackblitz.com/edit/refinedev-refine-5agncd?file=package.json,src%2Fpages%2Fposts%2Flist.tsx&preset=node

flat-fuchsiaOP•3y ago

https://stackblitz.com/edit/refinedev-refine-5agncd?file=src/pages/posts/list.tsx

Refine Use Table Example (forked) - StackBlitz

Run official live example code for Refine Use Table, created by Refinedev on StackBlitz

Omer•3y ago

If I'm not mistaken the example works as expected. Can you show us the problem you are experiencing in detail with a screen recording?

flat-fuchsiaOP•3y ago

can u please try to search based on id

national-gold•3y ago

@rehan1 Hi again, Which data provider are you using ?

flat-fuchsiaOP•3y ago

hasura

national-gold•3y ago

@rehan1 Are you getting an error in the console? I tried to reproduce the problem with hasura and im getting this error.

Error: invalid input syntax for type uuid: "he": {"response":{"errors":[{"extensions":{"code":"data-exception","path":"$"},"message":"invalid input syntax for type uuid: \"he\""}],"status":200,"headers":{"map":{"content-type":"application/json; charset=utf-8"}}},"request":{"query":"query ($limit: Int, $offset: Int, $order_by: [posts_order_by!], $where: posts_bool_exp) { posts (limit: $limit, offset: $offset, order_by: $order_by, where: $where) { id, title, category { title }, content, category_id, created_at } posts_aggregate (where: $where) { aggregate { count } } }","variables":{"limit":10,"offset":0,"order_by":{"id":"asc"},"where":{"_and":[{"_or":[{"title":{"_ilike":"he"}},{"id":{"_eq":"he"}}]}]}}}}

Error: invalid input syntax for type uuid: "he": {"response":{"errors":[{"extensions":{"code":"data-exception","path":"$"},"message":"invalid input syntax for type uuid: \"he\""}],"status":200,"headers":{"map":{"content-type":"application/json; charset=utf-8"}}},"request":{"query":"query ($limit: Int, $offset: Int, $order_by: [posts_order_by!], $where: posts_bool_exp) { posts (limit: $limit, offset: $offset, order_by: $order_by, where: $where) { id, title, category { title }, content, category_id, created_at } posts_aggregate (where: $where) { aggregate { count } } }","variables":{"limit":10,"offset":0,"order_by":{"id":"asc"},"where":{"_and":[{"_or":[{"title":{"_ilike":"he"}},{"id":{"_eq":"he"}}]}]}}}}

this means u cannot send invalid UIID to hasura id field. You can try this code. Please change the isIdValid function according to your needs.

const isIdValid = (id: string) => {
    const uuidv4Regex = new RegExp(
        /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i,
    );
    return uuidv4Regex.test(id);
};

onSearch: (value: any) => {
            if (isIdValid(value.searchTerm)) {
                return [
                    {
                        operator: "or",
                        value: [
                            {
                                field: "title",
                                operator: "contains",
                                value: value.searchTerm,
                            },
                            {
                                field: "id",
                                operator: "eq",
                                value: value.searchTerm,
                            },
                        ],
                    },
                ];
            }

            return [
                {
                    field: "title",
                    operator: "contains",
                    value: value.searchTerm,
                },
            ];
        },

const isIdValid = (id: string) => {
    const uuidv4Regex = new RegExp(
        /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i,
    );
    return uuidv4Regex.test(id);
};

onSearch: (value: any) => {
            if (isIdValid(value.searchTerm)) {
                return [
                    {
                        operator: "or",
                        value: [
                            {
                                field: "title",
                                operator: "contains",
                                value: value.searchTerm,
                            },
                            {
                                field: "id",
                                operator: "eq",
                                value: value.searchTerm,
                            },
                        ],
                    },
                ];
            }

            return [
                {
                    field: "title",
                    operator: "contains",
                    value: value.searchTerm,
                },
            ];
        },

flat-fuchsiaOP•3y ago

thanks a lot ill try this and let u know

onSearch function to run of useTable

Did you find this page helpful?