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
extended-salmon
extended-salmon2y 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
other-emerald
other-emerald2y 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>
foreign-sapphire
foreign-sapphire2y 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
other-emerald
other-emerald2y 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,
},
],
},
];
foreign-sapphire
foreign-sapphire2y ago
but this is not working
Omer
Omer2y 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
foreign-sapphire
foreign-sapphire2y ago
ok
foreign-sapphire
foreign-sapphire2y ago
Refine Use Table Example (forked) - StackBlitz
Run official live example code for Refine Use Table, created by Refinedev on StackBlitz
Omer
Omer2y 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?
foreign-sapphire
foreign-sapphire2y ago
can u please try to search based on id
other-emerald
other-emerald2y ago
@rehan1 Hi again, Which data provider are you using ?
foreign-sapphire
foreign-sapphire2y ago
hasura
other-emerald
other-emerald2y 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,
},
];
},
foreign-sapphire
foreign-sapphire2y ago
thanks a lot ill try this and let u know