flat-fuchsia•17mo ago

useTable Search

I am using useTable hook with pagination. In search operation , If I am in the last page, search result is giving nothing even though there are results. How to reset the pagination and get the result?

7 Replies

kapa.ai•17mo ago

Hi @Shyamili. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•17mo ago

---------------------- To reset the pagination and get the search result, you can use the onSearch function in the useTable hook. The onSearch function is called when the search form is submitted, and it automatically sets the current page to 1 when it's called. This will ensure that you get the search results from the first page. Here's an example of how to 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, when the search form is submitted, the onSearch function is called with the form values, and it returns the appropriate filters for the search. The current page is automatically set to 1, ensuring that you get the search results from the first page. Source: useTable - onSearch (https://refine.dev/docs/api-reference/antd/hooks/table/useTable#onsearch) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useTable | refine

By using useTable, you can get properties that are compatible with Ant Design component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList for the fetch.

kapa.ai•17mo ago

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

adverse-sapphire•17mo ago

Hey @Shyamili, Are you using pagination.mode or hasPagination in your useTable properties?

flat-fuchsia•17mo ago

no <Table dataSource={tableQueryResult?.data?.data} rowKey="id" size="small" pagination={{ total: tableQueryResult?.data?.total, onChange, }} > this is the code

adverse-sapphire•17mo ago

You override the tableProps properties by passing the own values. You should use like below:

import { useTable } from "@refinedev/antd" 
 
const { tableProps } = useTable();

<Table
    {...tableProps}
    rowKey="id"
    pagination={{
        ...tableProps.pagination,
    }}
>

import { useTable } from "@refinedev/antd" 
 
const { tableProps } = useTable();

<Table
    {...tableProps}
    rowKey="id"
    pagination={{
        ...tableProps.pagination,
    }}
>

If you want to customize onChange function, you can use useTable return values like setCurrent, setFilter etc.

flat-fuchsia•17mo ago

okay..thank you