Ant Design 表格搜索定制

Question

I'm using ant design table and I use getColumnSearchProps for column-driven search. I want to have the search input in the header of the column. But I don't know how to handle search on this column and input?

data:

const 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',
  }]

this is my columns:

const columns = [
    {
        title: (
            <>
                <Search
                    placeholder="search"
                    prefix={<CPIcon type="search" />}
                    onChange={??????????????}
                />
                name
            </>
        ),
        dataIndex: 'name',
        key: '1',
        align: 'right',
        render: text => (<h1>{text}</h1>)
    },

    other columns ...
]

and in render:

<Table columns={columns} dataSource={data} />

Answer 1

Use Array.filter() with String.includes()

Also, note that Input.Search only adds two properties: onSearch and enterButton , so there is no point rendering it without using any additional props.

export default function App() {
  const [dataSource, setDataSource] = useState(data);
  const [value, setValue] = useState('');

  const FilterByNameInput = (
    <Input
      placeholder="Search Name"
      value={value}
      onChange={e => {
        const currValue = e.target.value;
        setValue(currValue);
        const filteredData = data.filter(entry =>
          entry.name.includes(currValue)
        );
        setDataSource(filteredData);
      }}
    />
  );

  const columns = [
    {
      title: FilterByNameInput,
      dataIndex: 'name',
      key: '1'
    }
  ];

  return (
    <FlexBox>
      <Table columns={columns} dataSource={dataSource} />
    </FlexBox>
  );
}

Answer 2

Does the other answer actually work? I actually used an additional useCallback function:

export default () => {
  const [data, setData] = useState(null)
  const [val, setVal] = useState('')

  const filterVals = useCallback((e) => {
    const currValue = e.target.value
    setVal(currValue)
    const filteredVals = data.filter(entry =>
      entry.val.includes(currValue)
    )
    setData(filteredVals)
  }, [loading])

  const columns = [
    {
      title:
        <Input
          placeholder="lalaland"
          value={val}
          onChange={filterVals}
        />,
      dataIndex: 'val',
    },
  ]

  return (
    <Table
      bordered
      dataSource={data}
      columns={columns}
    />
  )
}