Learn how to implement and customize the Column Manager component to give users control over column visibility, grouping, aggregations, and pivots in LyteNyte Grid PRO.

The Column Manager is a tree-based component provided by LyteNyte Grid PRO. It gives users intuitive control over column visibility, grouping, and order, while developers retain full flexibility over layout and styling.

Basic Setup

The Column Manager renders a virtualized tree structure, meaning its implementation typically uses a recursive RenderNode function. This pattern makes it easy to handle nested column groups.

import { ColumnManager as CM } from "@1771technologies/lytenyte-pro";

type TreeItem = ReturnType<typeof CM.useColumnManager<BankData>>["items"][number];

export default function ColumnManager() {
  const { items, lookup } = CM.useColumnManager({ grid });

  return (
    <CM.Root items={items} lookup={lookup}>
      <CM.Panel className="h-full w-full" style={{ position: "relative", overflow: "auto" }}>
        {items.map((c) => {
          return <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />;
        })}
        {spacer}
      </CM.Panel>
    </CM.Root>
  );
}

function RenderNode({ item, grid }: { item: TreeItem; grid: Grid<BankData> }) {
  if (item.kind === "leaf") {
    return (
      <CM.Leaf item={item}>
        <CM.MoveHandle>
          <DragDotsSmallIcon />
        </CM.MoveHandle>
        <CM.VisibilityCheckbox />
        <CM.Label />
      </CM.Leaf>
    );
  }

  const values = [...item.children.values()];

  return (
    <CM.Branch
      item={item}
      label={
        <div style={{ display: "flex", gap: "2px" }}>
          <CM.VisibilityCheckbox />
          <CM.Label />
        </div>
      }
    >
      {values.map((c) => {
        return <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />;
      })}
    </CM.Branch>
  );
}

The example above demonstrates a Column Manager where users can:

Reorder columns using the drag handle.
Toggle column visibility with checkboxes.

Column Manager

age
job
balance
education
Personal
loan
contact
day
month
duration
campaign
pdays
previous
poutcome
y

"use client";

import { useClientRowDataSource, Grid, ColumnManager as CM } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ChevronDownIcon, DragDotsSmallIcon } from "@1771technologies/lytenyte-pro/icons";
import type { Column, Grid as GridType } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { ChevronRightIcon } from "@radix-ui/react-icons";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
type TreeItem = ReturnType<typeof CM.useColumnManager<BankData>>["items"][number];

const columns: Column<BankData>[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital", groupPath: ["Personal"] },
  { id: "default", groupPath: ["Personal"] },
  { id: "housing", groupPath: ["Personal"] },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];

export default function ColumnManager() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
    transformInFilterItem: (params) => {
      if (params.column.id === "age") {
        return params.values.map((c) => {
          const v = c as number;
          let group;

          if (v < 20) group = "0 < 20";
          else if (v < 40) group = "20 < 40";
          else if (v < 60) group = "40 < 60";
          else group = "60+";

          return {
            id: `${v}`,
            label: `${v} years`,
            value: v,
            groupPath: [group],
          };
        });
      }

      return params.values.map((c) => ({
        id: `${c}`,
        label: `${c}`,
        value: c,
      }));
    },
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });

  const view = grid.view.useValue();

  const { items, lookup } = CM.useColumnManager({
    grid,
  });

  return (
    <div>
      <div className="bg-ln-gray-05 column-manager h-[300px]">
        <CM.Root grid={grid} lookup={lookup}>
          <CM.Panel className="h-full w-full" style={{ position: "relative", overflow: "auto" }}>
            {items.map((c) => {
              return (
                <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />
              );
            })}
          </CM.Panel>
        </CM.Root>
      </div>

      <div>
        <div className="lng-grid" style={{ height: 500 }}>
          <Grid.Root grid={grid}>
            <Grid.Viewport>
              <Grid.Header>
                {view.header.layout.map((row, i) => {
                  return (
                    <Grid.HeaderRow key={i} headerRowIndex={i}>
                      {row.map((c) => {
                        if (c.kind === "group") {
                          return (
                            <Grid.HeaderGroupCell
                              key={c.idOccurrence}
                              cell={c}
                              className="flex items-center gap-2 px-2"
                            >
                              <div>{c.groupPath.at(-1)}</div>
                            </Grid.HeaderGroupCell>
                          );
                        }

                        return (
                          <Grid.HeaderCell
                            key={c.id}
                            cell={c}
                            className="flex h-full w-full items-center px-2 capitalize"
                          />
                        );
                      })}
                    </Grid.HeaderRow>
                  );
                })}
              </Grid.Header>

              <Grid.RowsContainer>
                <Grid.RowsCenter>
                  {view.rows.center.map((row) => {
                    if (row.kind === "full-width") return null;

                    return (
                      <Grid.Row row={row} key={row.id}>
                        {row.cells.map((c) => {
                          return (
                            <Grid.Cell
                              key={c.id}
                              cell={c}
                              className="flex h-full w-full items-center px-2 text-sm"
                            />
                          );
                        })}
                      </Grid.Row>
                    );
                  })}
                </Grid.RowsCenter>
              </Grid.RowsContainer>
            </Grid.Viewport>
          </Grid.Root>
        </div>
      </div>
    </div>
  );
}

function RenderNode({ item, grid }: { item: TreeItem; grid: GridType<BankData> }) {
  if (item.kind === "leaf") {
    return (
      <CM.Leaf
        item={item}
        className="hover:bg-ln-gray-30 focus:bg-ln-primary-30 my-0 flex items-center gap-1 pl-6 transition-all"
      >
        <CM.MoveHandle className="hover:bg-ln-gray-30 flex items-center justify-center focus:ring-1">
          <DragDotsSmallIcon />
        </CM.MoveHandle>
        <CM.VisibilityCheckbox />
        <CM.Label className="text-ln-gray-70 flex flex-1 items-center pl-1 text-sm" />
      </CM.Leaf>
    );
  }

  const values = [...item.children.values()];

  return (
    <CM.Branch
      item={item}
      className="my-0 flex flex-col"
      labelWrapClassName="flex items-center gap-1 text-sm"
      expander={(p) => {
        return (
          <button>
            {p.expanded && <ChevronDownIcon />}
            {!p.expanded && <ChevronRightIcon />}
          </button>
        );
      }}
      label={
        <div style={{ display: "flex", gap: 6 }}>
          <CM.MoveHandle className="hover:bg-ln-gray-30 flex items-center justify-center focus:ring-1">
            <DragDotsSmallIcon />
          </CM.MoveHandle>
          <CM.VisibilityCheckbox />
          <CM.Label />
        </div>
      }
    >
      {values.map((c) => {
        return <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />;
      })}
    </CM.Branch>
  );
}

Column Manager Parts

The Column Manager is composed of modular building blocks. Each part can be styled, extended, or overridden to match your application's design system:

Root - Provides the root context for the Column Manager. All other parts must be rendered inside this component.
Panel - The main container that renders the column tree. Includes built-in keyboard navigation but otherwise behaves like a plain div.
Branch - Represents a column group (i.e., a node in the tree with children). Can contain both Leaf items and nested Branch items.
Leaf - Represents a single column in the grid. Supports drag-and-drop reordering and visibility toggling.
MoveHandle - A drag handle, usually rendered as an icon (e.g., ⋮⋮), that lets users reorder columns or column groups.
VisibilityCheckbox A checkbox that toggles whether a column (or entire group) is visible in the grid.
Label Displays the column or column group's name. Can be customized or replaced using the as prop.

Handling Load Failures

Network requests can fail at any time, that's an inherent part of client-server communication. The LyteNyte Grid server data source provides simple mechanisms to recover from request errors, making it easy to retry failed requests.

Filter Tree

The Filter Tree component lets you update filters using a tree-based UI. It is especially useful for columns with a limited set of values. A filter tree can be flat or hierarchical-the example below shows both.

Column ManagerCopy Page

Basic Setup

Column Manager

Column Manager Parts

On this page

Column Manager