Column Manager

LyteNyte Grid PRO includes a Column Manager component that enables users to customize their grid display. Users can select visible columns, configure row grouping, apply aggregations, and manage column pivots.

Usage

First, import the ColumnManager component set:

import { ColumnManager } from "@1771-technologies/lytenyte-pro/column-manager";

The ColumnManager export provides a set of components you can compose to build a custom Column Manager. This approach lets you design a UI that fits your needs while LyteNyte handles the complex behavior interactions.

At a high-level, construct the basic Column Manager as follows:

<ColumnManager.Root>
  <ColumnManager.DragPlaceholder />
 
  <ColumnManager.Search />
  <ColumnManager.PivotModeToggle />
 
  <ColumnManager.Tree>
    {(c) => {
      return <ColumnManager.TreeItem columnItem={c} />;
    }}
  </ColumnManager.Tree>
 
  <ColumnManager.Separator />
  <ColumnManager.DragBox>
    <ColumnManager.DragBoxControls>
      <ColumnManager.DragBoxLabel>Row Groups</ColumnManager.DragBoxLabel>
      <ColumnManager.DragBoxExpander />
    </ColumnManager.DragBoxControls>
 
    <ColumnManager.DragBoxVisibility>
      <ColumnManager.DropZone>
        {({ pills }) => {
          return (
            <>
              {pills.map((c) => (
                <ColumnManager.Pill key={c.label} item={c} />
              ))}
            </>
          );
        }}
      </ColumnManager.DropZone>
    </ColumnManager.DragBoxVisibility>
  </ColumnManager.DragBox>
</ColumnManager.Root>

While the Column Manager contains several components, all sections are optional and you can mix and match them as needed. See the full working example below:

TODO;

Column Manager Parts

Root

ColumnManager.Root provides the context necessary for all Column Manager components. It requires the LyteNyte Grid state object and serves as a container for the other components.

Search

ColumnManager.Search provides a query search input to quickly locate columns in the Column Manager's column tree. It uses uncontrolled state and works best when your grid contains many columns.

Pivot Mode Toggle

ColumnManager.PivotModeToggle toggles the active state of column pivots. When pivot mode is active, the Column Manager restricts column selection to pivoting operations only.

By default, the component displays "Pivot Mode" as the label, but you can customize it:

<ColumnManager.PivotModeToggle /> // Displays "Pivot Mode" label
 
// Displays "Alpha" as the pivot mode toggle label
<ColumnManager.PivotModeToggle>
    Alpha
</ColumnManager.PivotModeToggle>

Column Tree

ColumnManager.Tree displays a tree view of the grid columns. Users can toggle column visibility, drag items to reorder them, or drag items to a Column Manager drop zone for operations like row grouping.

ColumnManager.Tree requires a render prop for children that must return a ColumnManager.TreeItem component. The tree is virtualized and must be placed in a sized container. Here's a basic setup:

<div style={{ height: 400 }}>
  <ColumnManager.Tree>
    {(c) => {
      return <ColumnManager.TreeItem columnItem={c} />;
    }}
  </ColumnManager.Tree>
</div>

ColumnManager.Tree accepts these properties:

Drag Box

ColumnManager.DragBox serves as the parent container for interaction boxes that apply row groups, aggregations, column pivots, and measures to the grid. It contains:

• ColumnManager.DragBoxControls: An area for DragBox control items.
• ColumnManager.DropZoneVisibility: The main area for dragging column manager items (pills and tree items).

ColumnManager.DragBox requires a source property, which must be one of "row-groups", "column-pivots", "measures", or "aggregations". The source determines the DragBox type - for example, a source value of "row-groups" allows only columns suitable for row grouping to be placed in the drag box.

Drag Box Controls

ColumnManager.DragBoxControls provides the root context for drag box controls. Place ColumnManager.DragBoxLabel and ColumnManager.DragBoxExpander inside this component:

<ColumnManager.DragBoxControls>
  <ColumnManager.DragBoxLabel>Row Groups</ColumnManager.DragBoxLabel>
  <ColumnManager.DragBoxExpander />
</ColumnManager.DragBoxControls>

Drop Zone Visibility

ColumnManager.DropZoneVisibility creates the drop area for the drag box. This area accepts valid drag items from the column tree or other drag boxes.

Place ColumnManager.DropZone within a ColumnManager.DropZoneVisibility component. ColumnManager.DropZone uses a render prop for its children to display individual pills within the drag box. The render prop must return a ColumnManager.Pill component. The Column Manager will render the appropriate pill type based on the drag box's source value. Both measure and aggregation pills include menus to modify the applied aggregation.

<ColumnManager.DragBoxVisibility>
  <ColumnManager.DropZone>
    {({ pills }) => {
      return (
        <>
          {pills.map((c) => (
            <ColumnManager.Pill key={c.label} item={c} />
          ))}
        </>
      );
    }}
  </ColumnManager.DropZone>
</ColumnManager.DragBoxVisibility>

Drag Placeholder

The ColumnManager.DragPlaceholder component may be used to display a component when a Column Manager item is being dragged. The placeholder is only visible when a drag is active. It may be placed anywhere in the Column Manager root, but no more than a single instance of the placeholder should be rendered.

<ColumnManager.Root>
  <ColumnManager.DragPlaceholder />
 
  {/* other column manager components */}
</ColumnManager.Root>

Further Considerations

The Column Manager offers extensive customization—use only the components you need. If your application doesn't use column pivots, simply omit the ColumnManager.PivotModeToggle. If you only need the ColumnManager.Tree component, you can safely skip the drag box functionality.