我需要antd table input筛选代码

下面是一个使用 Ant Design Table 组件实现 input 筛选的示例代码：

import React, { Component } from "react";
import { Table, Input, Button, Space } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons";

class MyTable extends Component {
  state = {
    searchText: "",
    searchedColumn: "",
    data: [
      {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
      },
      {
        key: "2",
        name: "Joe Black",
        age: 42,
        address: "London No. 1 Lake Park",
      },
      {
        key: "3",
        name: "Jim Green",
        age: 32,
        address: "Sidney No. 1 Lake Park",
      },
      {
        key: "4",
        name: "Jim Red",
        age: 32,
        address: "London No. 2 Lake Park",
      },
    ],
  };

  getColumnSearchProps = (dataIndex, placeholder) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={placeholder || `Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={confirm}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
        <Space>
          <Button
            type="primary"
            onClick={confirm}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button size="small" onClick={clearFilters} style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : "",
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: (text) =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : (
        text
      ),
  });

  handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex,
    });
  };

  handleReset = (clearFilters) => {
    clearFilters();
    this.setState({ searchText: "" });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        ...this.getColumnSearchProps("name"),
      },
      {
        title: "Age",
        dataIndex: "age",
        ...this.getColumnSearchProps("age", "Search Age"),
      },
      {
        title: "Address",
        dataIndex: "address",
        ...this.getColumnSearchProps("address"),
      },
    ];

    return (
      <Table dataSource={this.state.data} columns={columns} />
    );
  }
}

export default MyTable;

这个示例中，我们定义了三列数据（Name、Age 和 Address），每一列都启用了 input 筛选功能。getColumnSearchProps() 方法是用来设置每一列的筛选属性，其中包括了筛选面板（filterDropdown）、输入框（Input）、搜索按钮（SearchOutlined）和重置按钮（Button）等。同时，我们还定义了 handleSearch() 和 handleReset() 方法，用于处理搜索和重置操作。最后，我们将这些属性和方法应用到每一列中，通过 Table 组件渲染出一个可筛选的表格。

你可以根据自己的需求来修改这个示例代码。