Ant Design - отфильтровать столбец по всем существующим данным

Question

В Ant Design Table как я могу отфильтровать столбец по всем существующим данным?

Например - в этой таблице - https://codesandbox.io/s/ww1lpn4k4l есть 3 разных имени,и вы можете фильтровать по двум из них, потому что они определили их в filters.Я хочу иметь возможность фильтровать по всем 3 (или более) именам автоматически, это значит - без их указания.

Как мне этого добиться?

Answer 1

Вы можете определить вспомогательную функцию, которая закрывает данные, и возвращать отформатированное значение:

const filterData = data => formatter => data.map( item => ({
      text: formatter(item),
      value: formatter(item)
  });

И далее, в вашем определении columns:

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  filters: filterData(data)(i => i.name),
  // ...

Логика подменю немногоболее сложный, однако вы можете сделать что-то вроде:

const splitName = index => dataItem => dataItem.name.split(" ")[index];

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  filters: [
    ...filterData(data)(splitName(0)),
    {
      text: 'Submenu',
      value: 'Submenu',
      children: filterData(data)(splitName(1))
    }
  ],

Надеюсь, это поможет.