Пользовательский фильтр дочерних элементов таблицы данных antd

Question

Я использую antd table компонент. Я хочу иметь возможность фильтровать узлы до любого потомка.

Я следую примеру antd пользовательского фильтра . Пример не является древовидной структурой, так что здесь codesandbox с правильной настройкой.

onFilter, кажется, только зацикливается на корневых узлах. Я не знаю, как отобразить Tesla> Model 3, если я ввожу «3» в поисковой строке. Я знаю, что должен вернуть true для Теслы, но я все еще не понимаю, как тогда также вернуть true для Model 3

Данные

const data = [
      {
        key: "13",
        name: "Tesla",
        data: {
          description: "Car manufacturer",
          type: "Organization"
        },
        children: [
          {
            key: "4444",
            name: "Model S",
            data: {
              description: "The fastest",
              type: "Project"
            }
          },
          {
            key: "1444323",
            name: "Model 3",
            data: {
              description: "The cheapest",
              type: "Project"
            }
          }
        ]
      },
      {
        key: "1",
        name: "Microsoft",
        data: {
          description: "#1 software company",
          type: "Organization"
        }
      }
    ];

App

class App extends React.Component {
  state = {
    searchText: '',
  };

  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input          
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}              
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
        >
          Search
        </Button>            
      </div>
    ),

    // onFilter seems to only loop over root nodes
    onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),    
    render: (text) => (
      <Highlighter
        ...
      />
    ),
  })     

  render() {
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ...this.getColumnSearchProps('name'),
    }];
    return <Table columns={columns} dataSource={data} />;
  }
}

Answer 1

Вы можете написать функцию для получения значений потомков узла (на основе dataIndex) и фильтрации для любого из тех, у кого тоже есть текст поиска.

Это будет идти внутри getColumnSearchProps перед возвращаемое значение:

const getDescendantValues = (record) => {
        const values = [];
        (function recurse(record) {
            values.push(record[dataIndex].toString().toLowerCase());
            record.children.forEach(recurse);
        })(record);
        return values;
    } 

... и это будет обновленный onFilter:

onFilter: (value, record) => {
  const recordName = record[dataIndex] || record.data[dataIndex];
  const searchLower = value.toLowerCase();
  return recordName
      .toString()
      .toLowerCase()
      .includes(searchLower)
      ||
      getDescendantValues(record).some(descValue => descValue.includes(searchLower));
  }

Я разбудил вашу песочницу здесь: https://codesandbox.io/s/10jp9wql1j

... включает все корневые узлы с любым потомком, который удовлетворяет вашему условию поиска.Однако он не отфильтровывает другие узлы-потомки, которые, к сожалению, не удовлетворяют вашему условию поиска.