withCollapsibleStateDocs

WithCollapsibleState HOC provides stateful management of collapsible rows. It stores current expanded row ids.

Prefer using <Table collapsible /> over this HOC.

Result

Live Editor

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 />);

Props​

Props