TableRowToggle

Used inside of a TableRow's TableCell. Provides onClick handlers and expand/collapsed UI.

See the Table example for more details.

Dynamic Rows

It's possible that rows can be added dynamically. In this example, there is a dropdown that adds rows to each collapsible section.

Result

Loading...

Live Editor

function CustomCollapsibleRow({ id, forRows, children, ...props }) { return ( <TableRow> <TableCell colSpan="3">{children}</TableCell> <TableCell> <TableRowToggle id={id} forRows={forRows} /> </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> <TableBody> <CustomCollapsibleRow id="toggle-1" forRows={toggleOneRows}> Plan Changes </CustomCollapsibleRow> {toggleOneRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-2" forRows={toggleTwoRows}> Metrics </CustomCollapsibleRow> {toggleTwoRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-3" forRows={toggleThreeRows}> Goals </CustomCollapsibleRow> {toggleThreeRows.map((rowId) => ( <TableRow key={rowId} id={rowId} collapsible> <TableCell colSpan="4">{rowId}</TableCell> </TableRow> ))} <CustomCollapsibleRow id="toggle-4" forRows={toggleFourRows}> 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, ...props }) {
    return (
        <TableRow>
            <TableCell colSpan="3">{children}</TableCell>
            <TableCell>
                <TableRowToggle id={id} forRows={forRows} />
            </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>
                <TableBody>
                    <CustomCollapsibleRow id="toggle-1" forRows={toggleOneRows}>
                        Plan Changes
                    </CustomCollapsibleRow>
                    {toggleOneRows.map((rowId) => (
                        <TableRow key={rowId} id={rowId} collapsible>
                            <TableCell colSpan="4">{rowId}</TableCell>
                        </TableRow>
                    ))}

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

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

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

render(<Example />);

Analytics

The TableRowToggle component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'RowToggle',
	actions: {
		onClick: { type: 'TABLEROWTOGGLE_CLICK', payload: 'Click' },
	},
};

Props

```