I'm trying to use a custom filter in antD using react with typescript. It doesn't render anything, I don't know what I'm doing wrong.
This is my function to return column props:
const getColumnSearchProps = (dataIndex: string) => ({
filterDropDown:
({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}: any) => (
<div style={{ padding: 8 }}>
<Input
ref={ searchInput }
placeholder={`Search ${dataIndex}`}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
value={selectedKeys[0]}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
<Button size="small" style={{ width: 90 }}>
Reset
</Button>
<Button
type="link"
size="small"
>
Filter
</Button>
</Space>
</div>
),
filterIcon: (filtered: boolean) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilterDropdownVisibleChange: (visible: boolean) => {
if (visible) {
setTimeout(() => searchInput.current?.select(), 100);
}
}
})
And this is how I spread these props:
const columns: any = [
{
title: 'Name',
dataIndex: 'candidate',
key: "candidate",
width: '16.66%',
render: (name: string) => cellRender(name),
...getColumnSearchProps("name")
}
....
I want to render filter like that:
Hello and welcome to Stackoverflow. Looks like you have some inconsistency in your arguments. Probably due to copying code from AntD sample while not updating all necessary parts;-)
Try changing
...getColumnSearchProps("name")
to
...getColumnSearchProps("candidate")
This is the TS Interface based on the AntD documentation:
...
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}: FilterDropdownProps) => {
...
export interface FilterConfirmProps {
closeDropdown: boolean;
}
export interface ColumnFilterItem {
text: React.ReactNode;
value: string | number | boolean;
children?: ColumnFilterItem[];
}
export interface FilterDropdownProps {
prefixCls: string;
setSelectedKeys: (selectedKeys: React.Key[]) => void;
selectedKeys: React.Key[];
confirm: (param?: FilterConfirmProps) => void;
clearFilters?: () => void;
filters?: ColumnFilterItem[];
visible: boolean;
}
Wrong naming was the problem, 'filterDropDown' instead of the correct one 'filterDropdown'. By adding ColumnsType<MyInterface>
for example to columns, it would have been easier to detect possible errors like that.
Thanks for answering anyway!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.