How to use the search filter from outside the table?

Question

I am working with antd table. Is there a way I could add a search filter outside the table and still search in the table?

Demo.

I added an input field just above the table. But I cannot understand how I could link this to the search functionality available with antd. I have also added the search filters for each column but also want to have a separate field outside. The column filters work fine.

For easier reference, I am also pasting the demo code here:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Joe Black",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Jim Green",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 32,
    address: "London No. 2 Lake Park"
  }
];

class App extends React.Component {
  state = {
    sRT: ""
  };

  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)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" 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 => (
      <Highlighter
        highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
        searchWords={[this.state.sRT]}
        autoEscape
        textToHighlight={text.toString()}
      />
    )
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ sRT: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ sRT: "" });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        width: "30%",
        ...this.getColumnSearchProps("name")
      },
      {
        title: "Age",
        dataIndex: "age",
        key: "age",
        width: "20%",
        ...this.getColumnSearchProps("age")
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address",
        ...this.getColumnSearchProps("address")
      }
    ];
    return (
      <div>
        <Input type="text" placeholder="search" />
        <Table columns={columns} dataSource={data} />;
        <br />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

You need to add additional states:

1. State for filtered data dataSource
2. State for Input value: nameSearch

state = {
  sRT: "",
  dataSource: data,
  nameSearch: ""
};

Supply dataSource to Table component when filtering is made:

// Filtered data
<Table columns={columns} dataSource={this.state.dataSource} />

What's left to do is adding the filter component, here is an example for three basic antd components:

• AutoComplete
• Input.Search
• AutoComplete with Input.Search

<>
  <Row>
    <Table columns={columns} dataSource={this.state.dataSource} />
  </Row>
  <Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
    <Col>
      <Typography>Name Auto Complete</Typography>
    </Col>
    <Col>
      <AutoComplete
        dataSource={data.map(person => person.name)}
        onChange={nameSearch =>
          this.setState({
            dataSource: data.filter(person => person.name.includes(nameSearch))
          })
        }
        allowClear
      />
    </Col>
  </Row>
  <Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
    <Col>
      <Typography>Name Search</Typography>
    </Col>
    <Col>
      <Input.Search
        allowClear
        onSearch={nameSearch =>
          this.setState({
            dataSource: data.filter(person => person.name.includes(nameSearch))
          })
        }
      />
    </Col>
  </Row>
  <Row type="flex" gutter={10}>
    <Col>
      <Typography>Auto Complete Search</Typography>
    </Col>
    <Col>
      <AutoComplete dataSource={data.map(person => person.name)}>
        <Input.Search
          allowClear
          onSearch={nameSearch =>
            this.setState({
              dataSource: data.filter(person =>
                person.name.includes(nameSearch)
              )
            })
          }
        />
      </AutoComplete>
    </Col>
  </Row>
</>;