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} />
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>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With