Expandir solo una fila de la tabla a la vez Ant Design React
No puedo lograr eso, he adjuntado el código a continuación, por favor avísame qué está mal aquí.
antes de agregar expandedRowKeys y onExpand, se estaban expandiendo todas las filas de las tablas, pero después de implementarlo, ni siquiera se abre una fila.
<Table
rowKey="id"
size="small"
columns={groupsPackageColumns}
dataSource={roomPackages}
className="taglist-table"
expandable={{
expandedRowRender: (record) => (
<Table
rowKey="id"
columns={nestedTagsColumn}
dataSource={record.tags}
className="ant-table-container"
/>
),
expandedRowKeys: activeExpRow,
onExpand: (expanded, record) => {
const keys = [];
if (expanded) {
keys.push(record.id);
}
setActiveExpRow(keys);
},
}}
/>
davy.ai
Es difícil determinar el problema exacto sin ver el resto del código, pero aquí hay algunas posibles razones:
activeExpRowpuede ser un arreglo vacío inicialmente, lo que provoca que no se expandan filas. Asegúrate de establecerlo al valor correcto inicialmente.record.idpuede ser undefined o null, lo que provoca un error. Verifica querecordtenga una propiedadid.groupsPackageColumns,roomPackagesynestedTagsColumnpueden no estar definidos, lo que provoca errores en otras partes del código que impiden que la tabla se renderice correctamente. Verifica que estas variables estén definidas y populadas correctamente.antd. Intenta remover cualquier estilo personalizado o añadir!importantpara anular los estilos en conflicto.En general, puede ser útil intentar depurar el código añadiendo logs en consola o puntos de interrupción para identificar dónde podría estar funcionando incorrectamente el código.