GOOGLE ADS

domingo, 17 de abril de 2022

La selección de la tabla Antd no funciona, siempre seleccionando todas las filas

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

Regla de Firestore para acceder a la generación de subcolección Permisos faltantes o insuficientes

Tengo problemas con las reglas de Firestore para permitir el acceso a algunos recursos en una subcolección. Tengo algunos requests document...