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?
E
extended-salmon534d 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
C
conscious-sapphire534d 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>
A
ambitious-aqua534d 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
C
conscious-sapphire534d 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,
},
],
},
];
A
ambitious-aqua534d ago
but this is not working
O
Omer534d 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
A
ambitious-aqua534d ago
ok
A
ambitious-aqua534d ago
Refine Use Table Example (forked) - StackBlitz
Run official live example code for Refine Use Table, created by Refinedev on StackBlitz
O
Omer534d 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?
A
ambitious-aqua534d ago
can u please try to search based on id
C
conscious-sapphire533d ago
@rehan1 Hi again, Which data provider are you using ?
A
ambitious-aqua532d ago
hasura
C
conscious-sapphire532d 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,
},
];
},
A
ambitious-aqua531d ago
thanks a lot ill try this and let u know
More Posts
cors issue when using axios interceptors.I am using axios for my api request and whenever I try to send the login request to API without usinHow to query join with Nestjsx when use useTable and useShow?Hello! I really enjoyed using refine with nestjsx data provider recently. 1. Is there any options How to query all elements with foreign keyHello to all, my first post here! So i have a maybe noob question but how can i query some element tAccessing Id from Show page without triggering requestI have a simple show page and want to use useCustom to make the request (complex url) rather than ustheme ant design without craco and lessHi, I was wondering if it is possible to change the antd theme without adding craco and less (only cHow to customize useSelect hooks optionLabel with multiple value?I have implemented useSelect hook on create form and which is working fine. But now there is an requDependent query on table filters.I am trying to filter table data and create a form to filter, It is working fine as expected.But nowSort, filter, paginationHi! Currently, the default sorter, filter, and pagination is performed using query parameters. Two qNested ResourcesThe API that I am integrating with has a lot of nested resources. As an example (i.e not actual api Update Table items asynchronouslyHello! I am experimenting with refine and I have a couple locations where I populate a table by: 1)refine reporting toolHi, Are there any packages for generating dynamic reports? I can't find a free package and I'm not Help with task managerI am planning to build a task manager for our company i started following example give in blog > HoToast notification recommendation?Hey Guys, would anyone like to recommend their favorite toast notification to use with Refine?Webpack returning errors from the libHello, I updated refine packages to the latest version, and now is printing errors related to the liMigrate from version 2 to 3.I've run the command `npx pankodrefine-codemod refine2-to-refine3` but I'm receiving the following eError - DockerHello, after deploying in docker, it is returning this error when accessing the login page. Do you How to select RangePickerHello, I need to use TimePicker.RangePicker that Ant Design provides and I can see that there is a Display list of data from API response that has a different format.I am trying to display a list of data from API response with a response value as below: ``` { counHow to implement jwt authentication in authProvider?I have followed this link https://refine.dev/docs/api-reference/core/providers/auth-provider/#settinCustom Graphql query inputsHello, Can someone please explain to me how to write custom Graphql queries? We are using the Poth