MatrixTreeTable

A MatrixTable whose rows form a tree: parent nodes are collapsible group bands that span every column, leaves are data rows, both indented by depth.

Source

Import

import { MatrixTreeTable } from "@flanksource/clicky-ui/data";

Demos

Default · Open in Storybook

Controlled Expand All · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
angledHeaders	boolean	—	—
cellClassName	string	—	—
className	string	—	—
columnClassName	string	—	—
columns*	(ReactNode | MatrixTableColumn)[]	—	Column headers: a bare node, or a `MatrixTableColumn` for per-column styling.
columnWidth	number	—	—
corner	ReactNode	—	—
defaultExpanded	(…) => …	—	Whether a node without an override starts open. Defaults to false.
density	enum	—	—
emptyMessage	ReactNode	—	—
expanded	TreeExpansion	—	Controlled expansion overrides. Requires `onExpandedChange`.
getAriaLabel*	(…) => string	—	Names a parent node in its expand/collapse button.
getCells*	(…) => ReactNode[]	—	Cells of a leaf row, one per column. Parent nodes render as group bands.
getChildren*	(…) => T[] | undefined	—	—
getGroupClassName	(…) => string	—	—
getKey*	(…) => string	—	—
groupRowClassName	string	—	Classes added to every group row's cell.
headerClassName	string	—	—
headerHeight	number	—	—
maxHeight	string | number	—	—
onExpandedChange	(…) => void	—	—
renderLabel*	(…) => ReactNode	—	—
roots*	T[]	—	—
rowLabelClassName	string	—	—