I want to implement a tag feature where it should filter based on the image given below on the antd table. I have used selectedItems state to get the tags from Select component but I am not able to filter based on selectedItems. How can I filter?
{
title: 'Tags',
dataIndex: 'tags',
key: 'tags',
filterDropdown: () => (
<div style={{ padding: 8 }}>
<Select
mode="multiple"
showSearch={true}
placeholder="Select tags"
value={selectedItems}
onChange={setSelectedItems}
style={{ width: 200, marginBottom: 8, display: 'block' }}
options = {filteredItems.map((item)=> ({
value: item,
label: item,
}))}
/>
</div>
),
filterIcon: filtered => (
<span style={{ color: filtered ? '#1677ff' : undefined }}>
<FilterOutlined />
</span>
),
onFilter: (value, record) => record.tags.some(tag => selectedItems.includes(tag)),
},
{
title: 'Tags',
dataIndex: 'tags',
key: 'tags',
filterDropdown: () => (
<div style={{ padding: 8 }}>
<Select
mode="multiple"
showSearch={true}
placeholder="Select tags"
value={selectedItems}
onChange={setSelectedItems}
style={{ width: 200, marginBottom: 8, display: 'block' }}
options = {filteredItems.map((item)=> ({
value: item,
label: item,
}))}
/>
</div>
),
filterIcon: filtered => (
<span style={{ color: filtered ? '#1677ff' : undefined }}>
<FilterOutlined />
</span>
),
filteredValue: selectedItems,
onfilter: (value, record) => record.tags.includes(value),
},
filteredValue is a prop that takes in selectedItems (of type string[]).