const CollapsibleTable = withCollapsibleState(Table);
function Example() {
return (
<CollapsibleTable>
<TableHeader>
<TableRow>
<TableCell>Header 1</TableCell>
<TableCell>Header 2</TableCell>
<TableCell>Header 3</TableCell>
<TableCell>Header 4</TableCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Cell 1</TableCell>
<TableCell>Cell 2</TableCell>
<TableCell>Cell 3</TableCell>
<TableCell>
<TableRowToggle id="toggle-1" forRows={['collapsible-area-1']} />
</TableCell>
</TableRow>
<TableRow id="collapsible-area-1" collapsible>
<TableCell colSpan="4">Collapsible area</TableCell>
</TableRow>
<TableRow>
<TableCell>Cell 5</TableCell>
<TableCell>Cell 6</TableCell>
<TableCell>Cell 7</TableCell>
<TableCell>
<TableRowToggle id="toggle-2" forRows={['collapsible-area-2']} />
</TableCell>
</TableRow>
<TableRow id="collapsible-area-2" collapsible>
<TableCell colSpan="4">Collapsible area</TableCell>
</TableRow>
</TableBody>
</CollapsibleTable>
);
}
render(<Example />);