Hooks

useCollapsibleState

The useCollapsibleState hook can be used to create custom collapsible rows in a table. It requires an id and an array of forRows to manage the state of the collapsible rows. The hook exposes expanded (whether the current row is expanded), expandedIds an array of expanded rows, and handleClickToggle to manage the state of the collapsible rows.

Result

Loading...

Live Editor

function CustomCollapsibleRow({ id, forRows, children, label, ...props }) { const { expanded, handleClickToggle } = useCollapsibleState(forRows); return ( <TableRow {...props}> <TableCell colSpan="4" className="p-0"> <div aria-label={label} role="button" onClick={handleClickToggle} className="d-flex align-items-center px-3 py-2 w-100 bg-gray-100 text-gray-800 text-uppercase section-header-md" > {expanded ? ( <span className="icon-chevron-up fs-3xl me-2" /> ) : ( <span className="icon-chevron-down fs-3xl me-2" /> )}{' '} {children} </div> </TableCell> </TableRow> ); } function Example() { const [toggleOneRows, setToggleOneRows] = React.useState(['area-1-1']); const [toggleTwoRows, setToggleTwoRows] = React.useState(['area-2-1']); const [toggleThreeRows, setToggleThreeRows] = React.useState(['area-3-1']); const [toggleFourRows, setToggleFourRows] = React.useState(['area-4-1']); return ( <> <DropdownButton title="Add Row"> <Dropdown.Item onClick={() => { setToggleOneRows([...toggleOneRows, `area-1-${toggleOneRows.length + 1}`]); }} > Plan Changes </Dropdown.Item> <Dropdown.Item onClick={() => { setToggleTwoRows([...toggleTwoRows, `area-2-${toggleTwoRows.length + 1}`]); }} > Metrics </Dropdown.Item> <Dropdown.Item onClick={() => { setToggleThreeRows([...toggleThreeRows, `area-3-${toggleThreeRows.length + 1}`]); }} > Goals </Dropdown.Item> <Dropdown.Item onClick={() => { setToggleFourRows([...toggleFourRows, `area-4-${toggleFourRows.length + 1}`]); }} > Other </Dropdown.Item> </DropdownButton> <Table collapsible> <TableHeader> <TableRow> <TableCell> </TableCell> <TableCell>Header 2</TableCell> <TableCell>Header 3</TableCell> <TableCell>Header 4</TableCell> </TableRow> </TableHeader> <TableBody> <CustomCollapsibleRow id="toggle-1" forRows={toggleOneRows} label="Toggle Plan Changes"> Plan Changes </CustomCollapsibleRow> {toggleOneRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-2" forRows={toggleTwoRows} label="Toggle Metrics"> Metrics </CustomCollapsibleRow> {toggleTwoRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-3" forRows={toggleThreeRows} label="Toggle Goals"> Goals </CustomCollapsibleRow> {toggleThreeRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-4" forRows={toggleFourRows} label="Toggle Other"> Other </CustomCollapsibleRow> {toggleFourRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} </TableBody> </Table> </> ); } render(<Example />);

function CustomCollapsibleRow({ id, forRows, children, label, ...props }) {
    const { expanded, handleClickToggle } = useCollapsibleState(forRows);
    return (
        <TableRow {...props}>
            <TableCell colSpan="4" className="p-0">
                <div
                    aria-label={label}
                    role="button"
                    onClick={handleClickToggle}
                    className="d-flex align-items-center px-3 py-2 w-100 bg-gray-100 text-gray-800 text-uppercase section-header-md"
                >
                    {expanded ? (
                        <span className="icon-chevron-up fs-3xl me-2" />
                    ) : (
                        <span className="icon-chevron-down fs-3xl me-2" />
                    )}{' '}
                    {children}
                </div>
            </TableCell>
        </TableRow>
    );
}

function Example() {
    const [toggleOneRows, setToggleOneRows] = React.useState(['area-1-1']);
    const [toggleTwoRows, setToggleTwoRows] = React.useState(['area-2-1']);
    const [toggleThreeRows, setToggleThreeRows] = React.useState(['area-3-1']);
    const [toggleFourRows, setToggleFourRows] = React.useState(['area-4-1']);

    return (
        <>
            <DropdownButton title="Add Row">
                <Dropdown.Item
                    onClick={() => {
                        setToggleOneRows([...toggleOneRows, `area-1-${toggleOneRows.length + 1}`]);
                    }}
                >
                    Plan Changes
                </Dropdown.Item>
                <Dropdown.Item
                    onClick={() => {
                        setToggleTwoRows([...toggleTwoRows, `area-2-${toggleTwoRows.length + 1}`]);
                    }}
                >
                    Metrics
                </Dropdown.Item>
                <Dropdown.Item
                    onClick={() => {
                        setToggleThreeRows([...toggleThreeRows, `area-3-${toggleThreeRows.length + 1}`]);
                    }}
                >
                    Goals
                </Dropdown.Item>
                <Dropdown.Item
                    onClick={() => {
                        setToggleFourRows([...toggleFourRows, `area-4-${toggleFourRows.length + 1}`]);
                    }}
                >
                    Other
                </Dropdown.Item>
            </DropdownButton>

            <Table collapsible>
                <TableHeader>
                    <TableRow>
                        <TableCell> </TableCell>
                        <TableCell>Header 2</TableCell>
                        <TableCell>Header 3</TableCell>
                        <TableCell>Header 4</TableCell>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <CustomCollapsibleRow id="toggle-1" forRows={toggleOneRows} label="Toggle Plan Changes">
                        Plan Changes
                    </CustomCollapsibleRow>
                    {toggleOneRows.map((rowId) => (
                        <TableRow key={rowId} id={rowId} collapsible>
                            <TableCell colSpan="4">{rowId}</TableCell>
                        </TableRow>
                    ))}

                    <CustomCollapsibleRow id="toggle-2" forRows={toggleTwoRows} label="Toggle Metrics">
                        Metrics
                    </CustomCollapsibleRow>
                    {toggleTwoRows.map((rowId) => (
                        <TableRow key={rowId} id={rowId} collapsible>
                            <TableCell colSpan="4">{rowId}</TableCell>
                        </TableRow>
                    ))}

                    <CustomCollapsibleRow id="toggle-3" forRows={toggleThreeRows} label="Toggle Goals">
                        Goals
                    </CustomCollapsibleRow>
                    {toggleThreeRows.map((rowId) => (
                        <TableRow key={rowId} id={rowId} collapsible>
                            <TableCell colSpan="4">{rowId}</TableCell>
                        </TableRow>
                    ))}

                    <CustomCollapsibleRow id="toggle-4" forRows={toggleFourRows} label="Toggle Other">
                        Other
                    </CustomCollapsibleRow>
                    {toggleFourRows.map((rowId) => (
                        <TableRow key={rowId} id={rowId} collapsible>
                            <TableCell colSpan="4">{rowId}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </>
    );
}

render(<Example />);

"Nested" Collapsible Rows

It's possible to use the hook to create collapsible rows that are conceptually nested within other collapsible rows. Manually calling the setExpandedIds function to remove "nested" rows.

Result

Loading...

Live Editor

function CustomCollapsibleRow({ id, forRows, children, label, nestedRows, ...props }) { const { expanded, expandedIds, setExpandedIds, handleClickToggle } = useCollapsibleState(forRows); useEffect(() => { if (!expanded) { setExpandedIds((prev) => prev.filter((id) => !nestedRows.includes(id))); } }, [expanded, setExpandedIds]); return ( <TableRow {...props}> <TableCell colSpan="4" className="p-0"> <div aria-label={label} role="button" onClick={handleClickToggle} className="d-flex align-items-center px-3 py-2 w-100 bg-gray-100 text-gray-800 text-uppercase section-header-md" > {expanded ? ( <span className="icon-chevron-up fs-3xl me-2" /> ) : ( <span className="icon-chevron-down fs-3xl me-2" /> )}{' '} {children} </div> </TableCell> </TableRow> ); } function Example() { return ( <> <Table collapsible> <TableHeader> <TableRow> <TableCell> </TableCell> <TableCell>Header 2</TableCell> <TableCell>Header 3</TableCell> <TableCell>Header 4</TableCell> </TableRow> </TableHeader> <TableBody> <CustomCollapsibleRow id="toggle-1" forRows={['area-1']} nestedRows={['area-1-1', 'area-1-2']} label="Toggle Plan Changes" > Plan Changes </CustomCollapsibleRow> <TableRow id="area-1" collapsible> <TableCell colSpan="3">Area 1</TableCell> <TableCell> <TableRowToggle forRows={['area-1-1', 'area-1-2']} /> </TableCell> </TableRow> <TableRow id="area-1-1" collapsible> <TableCell>1</TableCell> <TableCell>2</TableCell> <TableCell>3</TableCell> <TableCell>4</TableCell> </TableRow> <TableRow id="area-1-2" collapsible> <TableCell>1</TableCell> <TableCell>2</TableCell> <TableCell>3</TableCell> <TableCell>4</TableCell> </TableRow> </TableBody> </Table> </> ); } render(<Example />);

function CustomCollapsibleRow({ id, forRows, children, label, nestedRows, ...props }) {
    const { expanded, expandedIds, setExpandedIds, handleClickToggle } = useCollapsibleState(forRows);

    useEffect(() => {
        if (!expanded) {
            setExpandedIds((prev) => prev.filter((id) => !nestedRows.includes(id)));
        }
    }, [expanded, setExpandedIds]);

    return (
        <TableRow {...props}>
            <TableCell colSpan="4" className="p-0">
                <div
                    aria-label={label}
                    role="button"
                    onClick={handleClickToggle}
                    className="d-flex align-items-center px-3 py-2 w-100 bg-gray-100 text-gray-800 text-uppercase section-header-md"
                >
                    {expanded ? (
                        <span className="icon-chevron-up fs-3xl me-2" />
                    ) : (
                        <span className="icon-chevron-down fs-3xl me-2" />
                    )}{' '}
                    {children}
                </div>
            </TableCell>
        </TableRow>
    );
}

function Example() {
    return (
        <>
            <Table collapsible>
                <TableHeader>
                    <TableRow>
                        <TableCell> </TableCell>
                        <TableCell>Header 2</TableCell>
                        <TableCell>Header 3</TableCell>
                        <TableCell>Header 4</TableCell>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <CustomCollapsibleRow
                        id="toggle-1"
                        forRows={['area-1']}
                        nestedRows={['area-1-1', 'area-1-2']}
                        label="Toggle Plan Changes"
                    >
                        Plan Changes
                    </CustomCollapsibleRow>
                    <TableRow id="area-1" collapsible>
                        <TableCell colSpan="3">Area 1</TableCell>
                        <TableCell>
                            <TableRowToggle forRows={['area-1-1', 'area-1-2']} />
                        </TableCell>
                    </TableRow>

                    <TableRow id="area-1-1" collapsible>
                        <TableCell>1</TableCell>
                        <TableCell>2</TableCell>
                        <TableCell>3</TableCell>
                        <TableCell>4</TableCell>
                    </TableRow>
                    <TableRow id="area-1-2" collapsible>
                        <TableCell>1</TableCell>
                        <TableCell>2</TableCell>
                        <TableCell>3</TableCell>
                        <TableCell>4</TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </>
    );
}

render(<Example />);