Tree Data

Tree data displays hierarchical data — like a file system — with expandable and collapsible nodes. Each row provides a path (an array like ["Documents", "Projects", "file.txt"]) that determines its position in the tree.

To enable it, set tree_data=True and tell the grid where to find the path with either data_path_key or get_data_path (specify exactly one, not both).

When a field in the row data already contains the path array, pass its name as a string via data_path_key:

Key configuration:

• auto_group_column_def configures the tree column (the one with the expand/collapse arrows).
• group_default_expanded controls the initial expansion: 0 for collapsed, -1 for fully expanded, or a positive number for the depth to expand to.
• aggFunc on value columns aggregates values at the group level (e.g. total size of a folder).

For anything beyond reading a single field, pass a JavaScript function as get_data_path, built with rx.vars.function.ArgsFunctionOperation:

The function receives the row data and must return the array representing the row's position in the hierarchy. The JavaScript expression can build the array on the fly, e.g. rx.Var("[data.host, ...data.path]") to prefix each path with a host name.

get_data_path can be selected at render time with rx.cond. Give the grid a key derived from the condition so it re-initializes when the path logic changes:

Value formatters work on tree columns too. For example, human-readable file sizes: