undefinedfix
Sign in

How can antd table filter all data instead of one column of the current page?

TS74 edited in Thu, 22 Sep 2022

one . At present, the data is front-end pagination, and the pagination function is normal. According to the official filtering example of antd, only one column of each page can be filtered. If you want to filter all the data instead of the current page, how can you transform it? Official example, link: HTTPS :// codesandbox . io / s / n90m ...

clipboard.png

At present, we have achieved the following results:

clipboard.png

Effect when searching "TAN Chao":

In fact, TAN Chao should only have one piece of data, but the page still has eight page numbers (the following page numbers have no data). How to adjust and filter the page numbers and then paginate them again? How to adjust getcolumnsearchprops?

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)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </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.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    ),
  });

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

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: '' });
  };
3 Replies
japrescott
commented on Thu, 22 Sep 2022

I don't understand your question, but I feel that the general idea is to operate data through functions and drive views through data

igor_94
commented on Thu, 22 Sep 2022

I want to know this this.searchInput Where did it come from?

user618075
commented on Thu, 22 Sep 2022

All data queries should add an input box outside the table, and then pass the filtered data to the table