ANTD Table getColumnSearchProps broken with nested object

Question

Using codes from the example: https://ant.design/components/table/#components-table-demo-custom-filter-panel

getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={node => {
        this.searchInput = node;
      }}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
      style={{ width: 188, marginBottom: 8, display: 'block' }}
    />
    <Space>
      <Button
        type="primary"
        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
        Reset
      </Button>
    </Space>
  </div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
  record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
  if (visible) {
    setTimeout(() => this.searchInput.select());
  }
},
render: text =>
  this.state.searchedColumn === dataIndex ? (
    <Highlighter
      highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
      searchWords={[this.state.searchText]}
      autoEscape
      textToHighlight={text.toString()}
    />
  ) : (
    text
  ),
});

Error Uncaught TypeError: Cannot read property 'toString' of undefined thrown when trying to pass nested values in the ANTD Table:

<Table bordered size='small' dataSource={data} rowKey='_id'>
....
    <Column 
        title='Name' 
        dataIndex={['profile', 'name']}
        {...this.getColumnSearchProps(['profile', 'name'])}
      />
....
</Table>

Here is how the structure of the data (dataSource) for the table:

[
    {_id: 'xxx1', profile : { name : 'username1' }, roles: ['xxx1']},
    {_id: 'xxx2', profile : { name : 'username2' }, roles: ['xxx2']}
]

As per outlined in the documentation: https://ant.design/components/table/#Migrate-to-v4 :

Besides, the breaking change is changing dataIndex from nest string path like user.age to string array path like ['user', 'age']. This help to resolve developer should additional work on the field which contains ..

hence the dataIndex={['profile', 'name']}, but this is not the same case for the getColumnSearchProps.

Anyone can help?

Answer 1

Since the dataIndex could be an array now, you need to take care of that case as well.

An example is provided below:

You basically have to

1. Replace

   record[dataIndex]
   

   with

   get(record, dataIndex) // import get from "lodash.get";
   

2. and

   this.state.searchedColumn === dataIndex
   

   with

   isequal(this.state.searchedColumn, dataIndex) // import isequal from "lodash.isequal";