title: Custom filter the children of antd table dataSource
body: <p>I'm using <code>antd</code>'s <code>table</code> component. I want to be able to filter the nodes down to any descendant.</p>
  
  <p>I'm following the example of <code>antd</code>'s <a href="https://ant.design/components/table/#components-table-demo-custom-filter-panel" rel="nofollow noreferrer">custom filter</a>.
  The example is not a tree structure, so here's a <a href="https://codesandbox.io/s/j2x4nxnpz9" rel="nofollow noreferrer">codesandbox</a> with the right setup.</p>
  
  <p><code>onFilter</code> seems to only loop over the root nodes. I don't know how to display Tesla > Model 3 it I type '3' in the search input. I know I have to return <code>true</code> for Tesla, but I still don't understand how to then also return <code>true</code> for <code>Model 3</code></p>
  
  <p><strong>data</strong></p>
  
  <pre><code>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"
          }
        }
      ];
  </code></pre>
  
  <p><strong>App</strong></p>
  
  <pre><code>class App extends React.Component {
    state = {
      searchText: '',
    };
  
    getColumnSearchProps = (dataIndex) =&gt; ({
      filterDropdown: ({
        setSelectedKeys, selectedKeys, confirm, clearFilters,
      }) =&gt; (
        &lt;div style={{ padding: 8 }}&gt;
          &lt;Input          
            placeholder={`Search ${dataIndex}`}
            value={selectedKeys[0]}
            onChange={e =&gt; setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() =&gt; this.handleSearch(selectedKeys, confirm)}              
          /&gt;
          &lt;Button
            type="primary"
            onClick={() =&gt; this.handleSearch(selectedKeys, confirm)}
            icon="search"
          &gt;
            Search
          &lt;/Button&gt;            
        &lt;/div&gt;
      ),
  
      // onFilter seems to only loop over root nodes
      onFilter: (value, record) =&gt; record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),    
      render: (text) =&gt; (
        &lt;Highlighter
          ...
        /&gt;
      ),
    })     
  
    render() {
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        ...this.getColumnSearchProps('name'),
      }];
      return &lt;Table columns={columns} dataSource={data} /&gt;;
    }
  }
  </code></pre>