flat-fuchsia
flat-fuchsia13mo ago

Pagination & Search

I am using useTable from antd.I want to search table by name, but if I am in page 3 and searching data, it won't show any data which is in other page. How to resolve this issue?
6 Replies
kapa.ai
kapa.ai13mo 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
kapa.ai13mo ago
---------------------- To resolve this issue, you can use the onSearch function provided by the useTable hook from refine. When the onSearch function is called, it will automatically set the current page to 1, ensuring that the search results are displayed from the first page. Here's an example of how to use the onSearch function with a search form:
const { searchFormProps, tableProps } = useTable({
onSearch: (values) => {
return [
{
field: "name",
operator: "contains",
value: values.name,
},
];
},
});

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

// --
<List>
<Form {...searchFormProps}>
<Space>
<Form.Item name="name">
<Input placeholder="Search by name" />
</Form.Item>
<SaveButton onClick={searchFormProps.form?.submit} />
</Space>
</Form>
<Table {...tableProps} rowKey="id">
<Table.Column title="Name" dataIndex="name" />
</Table>
</List>;
In this example, when the form is submitted, the onSearch function will be called with the form values, and it will return a CrudFilters object for filtering the data by name. The current page will be set to 1, ensuring that the search results are displayed from the first page. For more information, refer to the onSearch documentation (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
kapa.ai13mo ago
<@1011493481136541737> kapa.ai is still learning and improving, please let us how it did by reacting below
conventional-tan
conventional-tan13mo ago
do you want to search in client side ?
flat-fuchsia
flat-fuchsia13mo ago
How to reset the filters after search. I tried to refetch but still the filter for search is there?
conventional-tan
conventional-tan13mo ago
refetch is sent request again with same filter, search and sorting values. you can reset filters a search like this
const { tableProps, searchFormProps, setFilters } = useTable({
onSearch: (values) => {
setFilters([]);
return [
{
field: "title",
operator: "contains",
value: values.title
}
];
}
});
const { tableProps, searchFormProps, setFilters } = useTable({
onSearch: (values) => {
setFilters([]);
return [
{
field: "title",
operator: "contains",
value: values.title
}
];
}
});