useTable Custom API Endpoint?

Hi! I'd like to use some functionalities of useTable (namely, onSearch), but using a custom API endpoint as the resource. Is this possible?
kapa.ai
kapa.ai270d ago
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to use the onSearch functionality of useTable with a custom API endpoint. The useTable hook in refine returns the data as it comes from the endpoint. By default, it reads the resource from the URL. Here is an example of how you can use the onSearch function:
const { searchFormProps, tableProps } = useTable({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});

<List>
<Form {...searchFormProps}>
<Space>
<Form.Item name="title">
<Input placeholder="Search by title" />
</Form.Item>
<SaveButton onClick={searchFormProps.form?.submit} />
</Space>
</Form>
<Table {...tableProps} rowKey="id">
<Table.Column title="Title" dataIndex="title" />
</Table>
</List>;
const { searchFormProps, tableProps } = useTable({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});

<List>
<Form {...searchFormProps}>
<Space>
<Form.Item name="title">
<Input placeholder="Search by title" />
</Form.Item>
<SaveButton onClick={searchFormProps.form?.submit} />
</Space>
</Form>
<Table {...tableProps} rowKey="id">
<Table.Column title="Title" dataIndex="title" />
</Table>
</List>;
In this example, onSearch is a function that is called when the form is submitted. The onSearch function should return CrudFilters | Promise<CrudFilters>. Also, onSearch will set the current page to 1. It's useful when you want to filter the data with any query. For more details, you can refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai270d ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia270d ago
@kapa.ai How do I use a custom endpoint api.com/store/customers with useTable?
kapa.ai
kapa.ai270d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To use a custom endpoint with useTable, you can use the useApiUrl() hook to get the base URL of the API endpoint. Then, you can use the useCustom() hook to handle sending a request to the endpoint. Here is an example of how you can use these hooks:
import { useApiUrl, useCustom } from "@refinedev/core";

const apiUrl = useApiUrl();
const { data } = useCustom(`${apiUrl}/store/customers`);

const { tableProps } = useTable({ data });

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column dataIndex="email" title="Email" />
</Table>
</List>
);
import { useApiUrl, useCustom } from "@refinedev/core";

const apiUrl = useApiUrl();
const { data } = useCustom(`${apiUrl}/store/customers`);

const { tableProps } = useTable({ data });

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column dataIndex="email" title="Email" />
</Table>
</List>
);
In this example, useApiUrl() is used to get the base URL of the API endpoint. Then, useCustom() is used to send a request to the custom endpoint /store/customers. The data returned from the endpoint is then passed to useTable(). Please note that this is a simplified example and you might need to adjust it according to your needs. For more details, you can refer to the documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai270d ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia270d ago
@kapa.ai With this method, will onSearch still work?
kapa.ai
kapa.ai270d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The onSearch functionality is tied to the useTable hook and is designed to work with the data provided to this hook. If you're fetching data using a custom hook like useCustom, the onSearch functionality might not work as expected because it's not directly integrated with the data fetching mechanism. However, you can implement a similar search functionality within your custom hook. You would need to handle the search parameters and the API request within your custom hook or in the component where you're using it. Unfortunately, the provided extracts do not contain specific examples or instructions on how to implement this. For more detailed guidance, you might want to refer to the refine documentation (https://refine.dev/docs) or seek advice from the refine community or support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai270d ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia270d ago
rip
Omer
Omer270d ago
Hey @avangeous , It's interesting because I'm surprised the bot couldn't give the correct answer 🙂 Could this be what you're looking for? https://refine.dev/docs/faq/#how-can-i-request-an-api-with-nested-route
FAQ | refine
How can I change the form data before submitting it to the API?
More Posts
invalid hook call errorHi, using refine.dev (vite) I'm trying to "preload" data from UseList In order to do that, i'm tryiDoes self-hosted open-source Refine comes with all features?I'm a bit confused about these pages: 1. https://refine.dev/docs/comparison/ 2. https://refine.dev/phello guys can you tell me how to setuphello guys, can you tell me how to setup casl in react refine dev with access control provider ?useAutocomplete Server Side PaginationI have a controller that renders an autocomplete component. I am using the useAutocomplete hook to gMUI Inferencer Can't Detect Object Inside EntitySo I have the MUI Inferencer working well enough to detect some of my entity fields, but for some reWhat's the easiest way to create a product grid with search option ?when a product tile is clicked, it should show product details page etc. my db is supabase.Custom error messageI want to handle error message whenever i call getList from my dataProvidercustom error messageIn my app, Iam using a lot of forms. if there is an error message from an api call in the backgroundusing the react-i18next example I guess a type mismatchHey everyone, I just started integrating translations into our application and noticed that the docuuseSelect() with paramI have a list Address and I want to fetch list address base on user_id. How can I use useSelect to dInferencer considered a field as a relation and decided not to render itHey guys, could you please help me understand what happened: 1. fields [cust_id, id] returned from Problem in meta and headers in useSelect requestI am not able to use my bearer token in meta and header while using useSelect const { selectProps: useShow() id is NaNHi! I have a page located at companies/show/:id. It's retrieving data using -- `const { queryResultuseSelect isLoading booleanHi! Just wondering if useSelect returns an attribute representing whether it's loaded or not. (btw,Calling reset() removes the whole value from fieldI have upgraded to refine 4 , I am using useForm for handling forms, for some reason when I am calliError With MUI InferencerWhen running Mui Inferencer, I am getting an error stating: ``` Exception: RangeError: Maximum calHas anyone gotten Airtable to work with a Personal Access Token?Hello, I'm just starting out and I'm having a hard time getting my app to work with Airtable; I'm cuconditional useSelectAs hooks can only be called at top level, is there any way possible to call useSelect hook only whenCombine Access Control of Refine with GetPermission API of strapiV4Is there any way to combine getPermission API of StrapiV4 with Access Control of Refine using RBAC. What parameter should I set to make mutate() optionally return the created data?I would like to create a new resource and navigate to the edit view for that resource. ```