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} />

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} />

• javascript
• reactjs
• search
• antd

• Filter your dataSource depending on search value. You didn't provide any additional info. – Dennis Vash Commented Aug 13, 2019 at 7:30
• The thing is I want to add a function on the input to handle the search. It's a general function. – Afsanefda Commented Aug 13, 2019 at 8:09
• Please read How to create a Minimal, Reproducible Example, make an example in a sandbox, there is an official one too codesandbox.io/s/n90m38q05p, how your data looks like? Are you trying to make a generic onChange? How do you expect your table to behave? Please elaborate – Dennis Vash Commented Aug 13, 2019 at 8:14

2 Answers 2

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>
  );
}

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}
    />
  )
}