No puedo lograr eso, he adjuntado el código a continuación, hágame saber qué está mal aquí.
antes de agregar expandedRowKeys
y onExpand
, estaba expandiendo todas las filas de las tablas, pero después de implementarlo, ni siquiera 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); }, }} />
No estoy seguro acerca de la estructura de datos de su roomPackages
. Pero debe contener la propiedad key
. y presione record.key
en lugar de record.id
Si los datos de dataSource
de datos no incluyen la propiedad key
, obtendrá el siguiente error.
Entonces, necesitamos modificar los datos ya que incluyen la propiedad key
. Hice el Codesandbox de trabajo.
https://codesandbox.io/s/expandable-row-antd-4-17-4-forked-41rd3?file=/index.js