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

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