'How to get id or information of table in filterDropdown in antd

So I am using antdesign table and I have three different tables based on the status(status: approved/pending/rejected) of the data but the columns used in these three tables are same. I have used filterDropdown in the email and it works fine on local data, however I want to fetch the search results based on the status of the data from backend, and I need to know which table is being used to search for data or if I could get the status in the filterDropdown, that would be good too. Here are the columns:

columns=[...
       {
        title: 'Email',
        sorter: {
          compare: (a, b) => a.email.localeCompare(b.email),
          multiple: 3,
        },
        ...this.getColumnSearchProps('email'),
        render: text => {
          return text?.email && text?.email;
        },
      },
      {
        title: 'Status',
        key: 'status',
        dataIndex: 'status',
        render: status=> status
       }
]

Here is the filterDropdown:

filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters}) => {
      return(
      <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, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={(e) => {
              this.handleSearch(selectedKeys, confirm, dataIndex)}}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              this.setState({
                searchText: selectedKeys[0],
                searchedColumn: dataIndex,
              });
            }}
          >
            Filter
          </Button>
        </Space>
      </div>
    )}

and here is one of the three tables:

              <Table
                id="pendingTable"
                scroll={{ x: 400 }}
                rowSelection={{
                  ...this.pendingRowSelection,
                }}
                loading={pendingLoading}
                columns={columns.slice(0, columns.length - 2)}
                pagination={{
                  onChange: page => this.handlePagination('Pending', page),
                  pageSize: 10,
                  showSizeChanger:false,
                  total: pending?.totalCount,
                  current: parseInt(pending?.currentPage, 10),
                }}
                // dataSource={this.state.dataTicket.filter(val => val.status == 'pending')}
                dataSource={pending?.payment}
              />

The data that is coming from backend looks like this:

data={ id:123, name:"joe", email:"[email protected]", status:"pending"}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source