rare-sapphire•12mo ago

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?

10 Replies

kapa.ai•12mo 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•12mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•12mo ago

@kapa.ai How do I use a custom endpoint api.com/store/customers with useTable?

kapa.ai•12mo 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•12mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•12mo ago

@kapa.ai With this method, will onSearch still work?

kapa.ai•12mo 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•12mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•12mo ago

rip

Omer•12mo 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?