When I apply the filters on the table I want to change the Icon color of the filter Icon, but the icon color is not changing somehow.
This is my component,
const Table = () => {
const [tableFilters, setTableFilters = useState({name: []})
let tableColumns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [],
filterDropdownVisible: false,
filterIcon: (filtered: boolean) => {
return (
<TableFilterIcon filterColumnData={filters.name.data} />
)
},
},
]
const [columns, setColumns] = useState(tableColumns)
return (
<>
<CommonTable
data={data}
columns={tableColumns}
/>
</>
)
}
export default Table
In TableFilterIcon component I am rendering non-colored and colored icon based on the selected filters, if filters are applied then I am showing color icon. But the TableFilterIcon component is not rendering when I apply the filters that's why Icon color is not changing. Maybe the TableFilterIcon component is in the object of columns that's why ??
Note: if I don't store the columns in state and directly pass the columns to the CommonTable component then it works.
Can anyone help me with this ?? Also, I am using Ant Design Framework for UI components.