Estoy tratando de implementar la selección de filas en mi tabla antd, pero cuando selecciono cualquier fila, todas las filas se seleccionan
<PhcTable
pagination={false}
dataSource={configurationOptions?.ConfigDeposits[index].creditTiers}
columns={columnsPaymentPlans}
rowSelection={{onselect:(record)=>{console.log(record)}}}
scroll={{ x: 500 }}
/>
const columnasPagoPlanes = [
{
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": "Crédito de nivel 1: preferencial", "Riesgo de crédito": "Bajo", "notas": "Este nivel de crédito brinda servicios casi preferenciales, prime y superprime.", "deposit": 0, "maxLoanAmount": 20000, "selected": false, "Terms": [ { "id": 1, "term": "6", "selected ": falso }, { "id": 2, "término": "12", "seleccionado": falso }, { "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { "id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id": 7, "término": "60", "seleccionado": falso } ] }, { "providerSpecialtyId": 1735, "creditTierId": 2, "creditTier": "Ter 2 Credit - Sub-Prime", "CreditRisk": "Low/Moderate", "notes": "Este nivel de crédito también atiende a solicitantes de bajos ingresos"., "deposit": 10, "maxLoanAmount ": 20000, "seleccionado": falso, "Términos": [ { "id": 1, "término": "6", "seleccionado": falso}, { "id": 2, "término": "12 ", "seleccionado": falso }, { "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado":falso }, { "id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id ": 7, "term": "60", "selected": false } ] }, { "providerSpecialtyId": 1735, "creditTierId": 3, "creditTier": "Ter 3 Credit - Deep Sub-Prime", " CreditRisk": "Moderado/Alto", "notes": "Este nivel de crédito se usa mejor con ortodoncia", "deposit": 15, "maxLoanAmount": 15000, "selected": false, "Terms": [ { " id": 1, "término": "6", "seleccionado": falso }, { "id": 2, "término": "12", "seleccionado": falso }, { "id": 3, " término":"18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { "id": 5, "término": "36", "seleccionado ": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id": 7, "término": "60", "seleccionado": falso } ] }, { "providerSpecialtyId": 1735, "creditTierId": 4, "creditTier": "Ter 4 Credit - Underbanked", "CreditRisk": "Moderado/Alto", "notes": "Los solicitantes pueden usar un SS# o un ITIN # para aplicar.", "depósito": 15, "maxLoanAmount": 7500, "seleccionado": falso, "Términos": [ { "id": 1, "término": "6", "seleccionado": falso },{ "id": 2, "término": "12", "seleccionado": falso }, { "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { "id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": " 48", "seleccionado": falso }, { "id": 7, "término": "60", "seleccionado": falso } ] }, { "providerSpecialtyId": 1735, "creditTierId": 5, "creditTier": "Crédito de nivel 5: último recurso", "Riesgo de crédito": "Alto", "notas": "Limita las opciones de pago dental a 2, 3 y 4 meses", "depósito": 20, "cantidad máxima del préstamo": 7500, "seleccionado": falso, "Términos": [ { "id": 1, "término": "6", "seleccionado": falso }, { "id": 2, "término": "12", "seleccionado": falso }, { "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { " id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id": 7, " término": "60", "seleccionado": falso } ] } ]{ "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { "id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id": 7, "término": " 60", "seleccionado": falso } ] } ]{ "id": 3, "término": "18", "seleccionado": falso }, { "id": 4, "término": "24", "seleccionado": falso }, { "id": 5, "término": "36", "seleccionado": falso }, { "id": 6, "término": "48", "seleccionado": falso }, { "id": 7, "término": " 60", "seleccionado": falso } ] } ]falso } ] } ]falso } ] } ]
Solución del problema
El problema es que no especificó la clave para cada fila. Por defecto, antd find key
en cada fila. Como no lo tienes y según los datos que agregaste arriba, la clave es creditTierId
. Entonces puede especificar la clave de fila en la tabla por:
rowKey={(record) => record.creditTierId}
Si solo habilita la selección de filas, puede seleccionar cualquier fila. Pero para conocer las filas que ha seleccionado, puede crear un estado y controlar la selección de fila. Por favor, compruebe el código. Uso la función onChange en rowSelection y proporciona dos argumentos. La primera matriz de teclas de fila seleccionadas y la segunda filas seleccionadas.
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;
No hay comentarios:
Publicar un comentario