withCollapsibleStateDocs

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

Prefer using <Table collapsible /> over this HOC.

Result

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Collapsible area
Cell 5	Cell 6	Cell 7
Collapsible area

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

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

Name	Type	Default Value	Required	Description

Props​

Props