Table Search Tutorial | Pagination in Refine v5 - Refine

We can make extensive search / filter operations using the useTable hook on the listing pages.

First, we create a form by extracting searchFormProps from useTable. We will use this form for search / filtering.

tsx

import {
  // highlight-next-line
  useTable,
  List,
} from "@refinedev/antd";
import {
  // highlight-start
  Form,
  Table,
  // highlight-end
  Row,
  Col,
  Button,
  DatePicker,
  Space,
  Input,
} from "antd";
// highlight-next-line
import { SearchOutlined } from "@ant-design/icons";

const { RangePicker } = DatePicker;

export const ListPage: React.FC = () => {
  // highlight-next-line
  const { searchFormProps } = useTable<IPost>();

  return (
    // highlight-start
    <Row gutter={[16, 16]}>
      <Col lg={6} xs={24}>
        <Form layout="vertical" {...searchFormProps}>
          <Form.Item label="Search" name="q">
            <Input
              placeholder="ID, Title, Content, etc."
              prefix={<SearchOutlined />}
            />
          </Form.Item>
          <Form.Item label="Created At" name="createdAt">
            <RangePicker />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              Filter
            </Button>
          </Form.Item>
        </Form>
      </Col>
      <Col lg={18} xs={24}>
        <List>
          <Table>...</Table>
        </List>
      </Col>
    </Row>
    // highlight-end
  );
};

interface IPost {
  id: number;
  title: string;
  createdAt: string;
}

When the form is submitted, the onSearch method runs and we get the search form values. We have to return an object of type CrudFilters for this method.

tsx

...
import { HttpError } from "@refinedev/core";
import { Dayjs } from "dayjs";

const { searchFormProps } = useTable<IPost, HttpError, { title: string; createdAt: [Dayjs, Dayjs] }>({
    onSearch: (params) => {
        const filters: CrudFilters = [];
        const { q, createdAt } = params;

            filters.push(
                {
                    field: "q",
                    operator: "eq",
                    value: q,
                },
                {
                    field: "createdAt",
                    operator: "gte",
                    value: createdAt ? createdAt[0].toISOString() : undefined,
                },
                {
                    field: "createdAt",
                    operator: "lte",
                    value: createdAt ? createdAt[1].toISOString() : undefined,
                },
            );

        return filters;
    },
});
...

:::caution

CrudFilters types object has field, operator, and value properties. These properties help us to filter in which field, with which operator, and with which data.

:::

Example