Antd Filter dropdown doesn't render in react typescript

Question

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:

Answer 1

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")

Answer 2

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;
}

Answer 3

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!