R
Refine

ask-any-question

useTable Search

Fforeign-sapphire3/31/2023
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?
Kkapa.ai3/31/2023
Hi @Shyamili. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Kkapa.ai3/31/2023
---------------------- 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.
Kkapa.ai3/31/2023
<@1011493481136541737> kapa.ai is still learning and improving, please let us how it did by reacting below
Sstatutory-emerald3/31/2023
Hey @Shyamili, Are you using pagination.mode or hasPagination in your useTable properties?
Fforeign-sapphire3/31/2023
no <Table dataSource={tableQueryResult?.data?.data} rowKey="id" size="small" pagination={{ total: tableQueryResult?.data?.total, onChange, }} > this is the code
Sstatutory-emerald3/31/2023
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.
Fforeign-sapphire4/3/2023
okay..thank you

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
interferencerI am slightly unclear on where and how to import inferencer during the refine tutorialRefine app for tutorial no longer workingI am going through the refine tutorial for ANT. I had problems at one point and decided to start agaBreadcrumb is hidden from all of my pages after upgrading to latest version.I have upgraded my refine version 4 to the latest version and now my breadcrumb is gone. Is there soError after new buildI have no idea why there is an error, I tried rebuild multiple times and the error still persist. DuseForm to use a custom APII wanted to useForm with custom endpoint is this possible? currently my build is for SUPABASE, NexAdd debounce option to useMany?Hi 👋 I see that there's a `debounce` option to `useSelect` and `useAutocomplete`. Is it possible Headless UI tailwind not workinginstall tailwind and create a .global.css on the folder the settings on the content scope is right dDoes every resource need a list?Let's say I have a blog project similar to https://github.com/refinedev/refine/tree/next/examples/blHow to hot-reload within a docker compose project?I've started with refine couple days ago, and it is doing nice. I've since developed the major partComposite Primary Keys recommendationsHey Refine-Team, hello Discord! Thank you for refine, it's a really good solution and has provided aCloneButton is not workingI have added a clone button on my list of data but the when I click on it it doesn't redirect me to Missing query params on reload while using useOneHey, I am using useOne from "@pankod/refine-core" to fetch data, So the problem is I am losing queryBest to way to implement notification list?Hi, what will be the best approach to implement something like antd's NoticeIcon https://v2-pro.antClientside Pagination Total CountHello, ``` const ItemsList = () => { const { dataGridProps, tableQueryResult } = useDataGrid({ How can I use `authProvider.getIdentity()` inside `getServerSideProps` with Next.sj.Hello! I am using Supabase for auth and Next.js for routing. Is there any way to get the user auth How do i change mui authPage content?I cant change the card contentSider and Top MenuHello, what is the best way in Refine to achieve a layout like the one in the picture? The sider is Mobile CompatabilityHi everyone, is refine capable of doing mobile app like react-native?I used pnpm to download @refinedev/inferencer, vscode says there is no .d.ts type file. How to fix ihelp mewhen i build my nextjs project. I get this error `import { useLogin, useTranslate } from "@hooks`the nextjs project is built from official tool.