Antd table select not working, always selecting all the rows - antd

Question

I am trying to implement row selection in my antd table but when I am selecting any rows all the rows gets selected
<PhcTable
pagination={false}
dataSource={configurationOptions?.ConfigDeposits[index].creditTiers}
columns={columnsPaymentPlans}
rowSelection={{onselect:(record)=>{console.log(record)}}}
scroll={{ x: 500 }}
/>
const columnsPaymentPlans = [
{
title: "Credit Tiers",
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: "Credit Risk",
dataIndex: "CreditRisk",
key: "CreditRisk",
width: 60,
},
{
title: "Notes",
dataIndex: "notes",
key: "notes",
width: 100,
},
{
title: "Deposit",
dataIndex: "deposit",
key: "deposit",
width: 60,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`deposit${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record,"%"),
},
]}
>
<PhcInputNumber
maxLength={4}
style={{
height: "40px",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
}}
value={text}
//onChange={onInputChange("minDepositType", index)}
/>
</PhcForm.Item>
),
},
{
title: "Max Loan Amount",
dataIndex: "maxLoanAmount",
key: "maxLoanAmount",
width: 70,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`maxLoanAmount${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateMaxLoanAmount(rule, value, callback, record),
},
]}
>
<PhcInputDecimal
keyboard={true}
controls={true}
onKeyPress={onNumberPress}
formatter={(value) =>
`${value}`.replace(/(\..*)\./g, '$($1)')
}
maxLength={5}
style={{
height: "40px",
//width: isBrowser && "75%",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
//minWidth: "218px",
}}
value={text}
//onChange={onInputChange("maxLoanAmount", index)}
/>
</PhcForm.Item>
),
},
{
title: "Terms",
dataIndex: "Terms",
key: "configDepositsTermsIds",
width: 150,
render: (text, record, index) => (
<PhcForm.Item
initialValue={record.Terms.filter(x=>x.selected == true).map(x=>x.id)}
name={`ConfigDepositsTermsIds${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record),
},
]}
>
<PhcSelect
mode="multiple"
optionFilterProp="label"
allowClear
showSearch
showArrow
style={{ width: isBrowser && "75%" }}
>
{record.Terms &&
record.Terms.map((item) => (
<PhcSelect.Option value={item.id} label={item.term}>
{item.term}
</PhcSelect.Option>
))}
</PhcSelect>
</PhcForm.Item>
),
}
];
"creditTiers": [
{
"providerSpecialtyId": 1735,
"creditTierId": 1,
"creditTier": "Tier 1 Credit - Prime",
"CreditRisk": "Low",
"notes": "This credit tier serves near-prime, prime, and super-prime.",
"deposit": 0,
"maxLoanAmount": 20000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 2,
"creditTier": "Tier 2 Credit - Sub-Prime",
"CreditRisk": "Low/Moderate",
"notes": "This credit tier also serves low-income applicants.",
"deposit": 10,
"maxLoanAmount": 20000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 3,
"creditTier": "Tier 3 Credit - Deep Sub-Prime",
"CreditRisk": "Moderate/High",
"notes": "This credit tier is best used with orthodontics.",
"deposit": 15,
"maxLoanAmount": 15000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 4,
"creditTier": "Tier 4 Credit - Underbanked",
"CreditRisk": "Moderate/High",
"notes": "Applicants may use a SS# or an ITIN# to apply.",
"deposit": 15,
"maxLoanAmount": 7500,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 5,
"creditTier": "Tier 5 Credit - Last Resort",
"CreditRisk": "High",
"notes": "Limits dental repayment options to 2, 3, and 4 months.",
"deposit": 20,
"maxLoanAmount": 7500,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
}
]

Answer 1

The problem is that you didn't specify key for each row. By default, antd find key in each row. Since you don't have it and according to the data you added above, the key is creditTierId. So you can specify row key in table by:
rowKey={(record) => record.creditTierId}
If you just enable rowSelection, you can select any row. But in order to know the rows you have selected, you can create a state and control the rowSelection. Please check the code. I use onChange function in rowSelection and it provides two arguments. The first one array of selected Row keys & second one selected rows.
function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columnsPaymentPlans = [
{
title: 'Credit Tiers',
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: 'Credit Risk',
dataIndex: 'CreditRisk',
key: 'CreditRisk',
width: 60
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
width: 100
},
// ...Other Columns
];
return (
<Table
pagination={false}
dataSource={configurationOptions?.creditTiers}
columns={columnsPaymentPlans}
rowKey={(record) => record.creditTierId}
rowSelection={{
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
}
}}
scroll={{ x: 500 }}
/>
);
}
export default App;