Custom handler search filter table antd

Question

I am using antd to create a table with filter feature, but I got a problem, I want to custom filter search of antd to call api,

antd table

How can I do that with react and antd,

Here is my code

const columns: ColumnsType<Product> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (name, record) => (
        <div className="flex items-center">
          <Avatar src={record.avatar}>{name[0].toUpperCase()}</Avatar>
          <span style={{ marginLeft: 10 }} className="whitespace-nowrap">
            <a title="View & Edit" href={'/product/' + record.id}>
              {name}
            </a>
          </span>
        </div>
      ),
    },
    {
      title: 'About',
      dataIndex: 'about',
      key: 'about',
      render: (about: string) => <p className="text-ellipsis line-clamp-2">{about}</p>,
      width: 400,
    },
    {
      title: 'Categories',
      dataIndex: 'categories',
      key: 'categories',
      filterSearch: true,
      filters: categories!.map((category: Category) => ({ text: category.name, value: category.id })),

      render: (categories: any) => {
        console.log(categories);

        return '-';
      },
      // width: 400,
    },
    { title: 'Addresses', dataIndex: 'contract_addresses', key: 'address', render: addresses => addresses?.[0] },
  ];

Answer 1

To filter the table, I usually provide a function that filters the data before it is passed to the table (In my example the function getData. This function can also be used to adjust the filter accordingly. Here is an example, which also consists of a Search-Input to modify the search:

const CustomersTable = (props: any) => {

  const [searchText, setSearchText] = useState<string | undefined>(undefined);
  const [customers, setCustomers] = useState<ICustomer[]>([]);

  const getData = (
    sourceData: Array<ICustomer>,
    searchText: string | undefined
  ) => {
    if (!searchText) {
      return sourceData;
    }
    return sourceData.filter((item) => {
      const comparisonString = `${item.firstname.toLowerCase()}${item.familyname.toLowerCase()}`;

      //here you can provide a more sophisticared search
      return comparisonString.includes(searchText.toLowerCase());
    });
  };

  const columns = [
    {
      title: "Vorname",
      dataIndex: "firstname",
      key: "firstname",
      sorter: (a: ICustomer, b: ICustomer) => {
        if (a.firstname.toLowerCase() > b.firstname.toLowerCase()) {
          return -1;
        } else if (a.firstname.toLowerCase() < b.firstname.toLowerCase()) {
          return 1;
        } else {
          return 0;
        }
      },
    },
    {
      title: "Nachname",
      dataIndex: "familyname",
      key: "familyname",
    },
  ];

  return (
    <>
      <Search
        placeholder="Vorname, Nachname"
        value={searchText}
        onChange={(e) => {
          setSearchText(e.target.value);
        }}
      />
      <Table
        columns={columns}
        dataSource={getData(customers, searchText)}
      />
      </>
  );

};