stormy-gold
stormy-gold3y 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
distinguished-blush
distinguished-blush3y 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
conscious-sapphire
conscious-sapphire3y 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>
stormy-gold
stormy-goldOP3y 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
conscious-sapphire
conscious-sapphire3y 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,
},
],
},
];
stormy-gold
stormy-goldOP3y ago
but this is not working
Omer
Omer3y 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
stormy-gold
stormy-goldOP3y ago
ok
stormy-gold
stormy-goldOP3y ago
Refine Use Table Example (forked) - StackBlitz
Run official live example code for Refine Use Table, created by Refinedev on StackBlitz
Omer
Omer3y 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?
stormy-gold
stormy-goldOP3y ago
can u please try to search based on id
conscious-sapphire
conscious-sapphire3y ago
@rehan1 Hi again, Which data provider are you using ?
stormy-gold
stormy-goldOP3y ago
hasura
conscious-sapphire
conscious-sapphire3y 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,
},
];
},
stormy-gold
stormy-goldOP3y ago
thanks a lot ill try this and let u know