eager-peach•15mo 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•15mo 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•15mo 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•15mo ago

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

genetic-orange•15mo ago

do you want to search in client side ?

eager-peach•15mo ago

How to reset the filters after search. I tried to refetch but still the filter for search is there?

genetic-orange•15mo 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
        }
      ];
    }
  });