Column Groups

LyteNyte Grid allows columns to be organized into groups, creating visual relationships between related columns. Each column can belong to only one group, though a group may contain nested groups to form hierarchies.

Creating a Column Group

Column groups in LyteNyte Grid are created implicitly using the groupPath property on columns. The system builds a hierarchy of column groups based on all groupPath values across your columns.

TODO;

The number of group rows is determined by the longest path in your hierarchy. When a column isn't part of any group, or belongs to a group with a shorter path than the longest one, its header will span the empty group rows.

Split Column Groups

LyteNyte Grid identifies column groups by their group path property. Groups can be visually split when one or more columns not belonging to the same group appear between group members. This creates multiple visual instances of the same logical group. If these separated columns are moved adjacent to each other, LyteNyte Grid automatically merges the groups. Additionally, pinned columns are always visually separated from non-pinned columns in the same group.

TODO;

Column Group Expansions

Column groups can be expanded or collapsed. The visibility of columns during these states depends on their groupVisibility property:

• "visible-when-open": Column is visible only when the group is expanded
• "visible-when-closed": Column is visible only when the group is collapsed
• "always-visible": Column remains visible regardless of the group's state

LyteNyte Grid displays an expansion icon on column groups that can be collapsed or expanded. If all columns in a group have groupVisibility set to "always-visible", the group cannot be collapsed and no expansion icon appears.

TODO;

Initial Group State

You can configure the initial expansion state of column groups in LyteNyte Grid. To understand how this works, it's important to know how column group ids are generated.

Column groups are created through the groupPath property (a string[]) on columns. LyteNyte Grid joins this path using a delimiter (configurable via columnGroupIdDelimiter) to form a column group id.

The initial expansion state is controlled through the columnGroupExpansionState property, which is an object where keys are group ids and values are booleans indicating expansion state. For groups without an explicit setting, LyteNyte Grid uses the columnGroupDefaultExpansion function, which returns true by default.

TODO;

Since columnGroupExpansionState, columnGroupDefaultExpansion, and columnGroupIdDelimiter are all part of the grid state, you can update them dynamically:

// Reset all groups to use their default expansion state
grid.state.columnGroupExpansionState.set({});

Avoid changing the columnGroupIdDelimiter after initial setup, as LyteNyte Grid won't automatically update existing group IDs in the expansion state.

The Empty Column

When all columns in a group have groupVisibility set to "visible-when-open", collapsing the group would hide all its columns. In this case, LyteNyte Grid renders an empty column as a placeholder. This empty column serves solely to provide a way to expand the group again.

TODO;

Programmatically Toggle Groups

LyteNyte Grid provides the columnGroupToggle method in its API to programmatically toggle the expansion state of column groups.

TODO;