Search code examples
reactjsantd

How to add "hide already selected" feature to filter antd tags in React.js?


enter image description here

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

Solution

  • {
        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[]).