'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 |
---|