Version: 4.xx.xx

Table Search

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.

pages/list.tsx
import {
  useTable,
  List,
} from '@refinedev/antd'
import {
  Form,
  Table,
  Row,
  Col,
  Button,
  DatePicker,
  Space,
  Input,
} from 'antd'
import { SearchOutlined } from '@ant-design/icons'

const { RangePicker } = DatePicker

export const ListPage: React.FC = () => {
  const { searchFormProps } = useTable<IPost>()

  return (
    <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>
  )
}

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.

pages/list.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

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

npm create refine-app@latest -- --example table-antd-table-filter

Example​

Example