Add search to AppTable

Every table can be searchable. The search is handle by your PageContainer, we will take Articles PageContainer for example.

Search State

First we need to add the search state that will hold the search parameter for our query.

modules/Articles/PagesContainer/Articles.tsx - Search State

const [search, setSearch] = useState({});

In order to set parameters for our query we will need a new component, especially a Form. It will be display in a Drawer.

To open this drawer we need a button in our HeaderContent component. We will add a button in the actionsRight properties.

Articles.tsx - Search Button

<HeaderContent
  {...props}
  actionsRight={
    <Space>
      <Button icon={<SearchOutlined />} onClick={() => openSearchDrawer()} />
    </Space>
  }
/>

Call a drawer

This button has a onClick property that run a function. Here is openSearchDrawer().

This function will dispatch an action OPEN_DRAWER, that will display the drawer.

Articles.tsx - Open Drawer

import { ArticlesSearch } from "@components";
import { useDrawerDispatch } from "context/DrawerContext";
import { FC, useCallback, useState } from "react";

const dispatchDrawer = useDrawerDispatch();

const openSearchDrawer = useCallback(
  () =>
    dispatchDrawer({
      type: "OPEN_DRAWER",
      title: "actions:search",
      comfirmButtonTitle: "actions:search",
      comfirmButton: true,
      cancelButtonTitle: "actions:reset",
      cancelButton: true,
      submit: true,
      content: <ArticlesSearch form={formSearch} />,
      onCancel: () => handleReset(),
      onComfirm: () => handleSubmit(),
    }),
  [dispatchDrawer]
);

We also need a to dispatch a closing action.

Articles.tsx - Close Drawer

const closeDrawer = useCallback(
  () => dispatchDrawer({ type: "CLOSE_DRAWER" }),
  [dispatchDrawer]
);

In order to know how to customize a drawer go to find more about Drawers

Form component

Form reference

In content we need to pass a Form component to set our search parameters. Here it's <ArticlesSearch form={formSearch} /> in the Form folder, it takes a form reference as properties to an Ant Design Form component.

This reference will be used to manage action for submitting the form results or other actions like resetting the form.

Articles.tsx - Form reference

import { Form } from "antd";
const [formSearch] = Form.useForm();

Drawer actions for the form

To get all field value we need an handleSubmit function. It will set the search state on comfirmButton button click defined in our drawer.

Articles.tsx - Handle Submit

const handleSubmit = () => {
  formSearch
    .validateFields()
    .then(() => {
      setSearch(formSearch.getFieldsValue(true));
      closeDrawer();
    })
    .catch((err) => showError(t("messages:error-getting-data")));
};

On cancelButton click in the drawer, we reset the form's values.

Articles.tsx - Handle Submit

const handleReset = () => {
  formSearch.resetFields();
};

Creating our form

In the Form folder there is a form that will wrap all possible input for our search. We use the Ant Design Form component to make it.

ArticlesSearch.tsx

import { Form, Input, InputNumber, Checkbox } from "antd";

export interface IArticlesSearchProps {
  form: any;
}
const ArticlesSearch: FC<IArticlesSearchProps> = ({
  form,
}: IArticlesSearchProps) => {
  const { t } = useTranslation();

  return (
    <>
      <Form form={form} name="control-hooks">
        <Form.Item name="name" label={t("common:name")}>
          <Input />
        </Form.Item>
        <Form.Item name="code" label={t("d:code")}>
          <Input />
        </Form.Item>
        <Form.Item name="status" label={t("d:status")}>
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          name="permanentProduct"
          valuePropName="checked"
          initialValue={false}
        >
          <Checkbox>{t("d:permanentProduct")}</Checkbox>
        </Form.Item>
      </Form>
    </>
  );
};

ArticlesSearch.displayName = "ArticlesSearch";

export { ArticlesSearch };

ArticlesSearch.tsx - Form reference

<Form form={form} name="control-hooks">

We pass down the previous reference to the form component to specify that it will be this form we acting on. When don't need any submit button as it's handle by the drawer action. Find out more about AntD Forms

Search filter elements

Now when comfirmButton button is clicked, the search state will change and it will automatically re-fetch data with the right search criteria.

Articles.tsx - searchCriteria

<>
  <HeaderContent
    title={t("common:articles")}
    routes={articlesSubRoutes}
    actionsRight={
      <Space>
        <Button icon={<SearchOutlined />} onClick={() => openSearchDrawer()} />
      </Space>
    }
  />
  <ArticlesList searchCriteria={search} />
</>