键最终是onExpandedChange
属性。>>
const toArray = iterable => [].slice.call(iterable)
const Table = () => {
const $tableWrapper = useRef()
const getGroupFromIndexPath = indexPath => {
return indexPath.reduce(($parentElem, index) => {
return toArray($parentElem.children).filter($child => $child.classList.contains('rt-tr-group'))[index]
}, $tableWrapper.current.querySelector('.rt-tbody'))
}
return (
<div ref={$tableWrapper}>
<ReactTable
data={data}
columns={columns}
pivotBy={['name']}
// I have no idea what the 1st parameter value is supposed to represent:/
onExpandedChange={(value1, indexPath, event, rowData) => {
const $parentGroup = getGroupFromIndexPath(indexPath)
const $childGroup = $parentGroup.querySelector('.rt-tr-group')
if ($childGroup) {
// The expander is open
} else {
// The expander is closed
}
}}
/>
</div>
)
}