Column Visibility

Learn how to control, check, and update column visibility in LyteNyte Grid, including interaction with column groups.

Control column visibility in LyteNyte Grid with the column's hide property. A column may also be visually omitted when it belongs to a group that is collapsed (or expanded, for columns meant to show only when the group is closed). This guide explains how to configure column visibility and the nuances of showing and hiding columns.

Hiding Columns

Set a column's hide property to true to hide it. Users typically toggle visibility with LyteNyte Grid components like the Column Manager.

Hiding Columns

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education", hide: true },
  { id: "marital", hide: true },
];

export default function ColumnVisibility() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

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

    columnBase: {
      widthFlex: 1,
    },
  });

  const view = grid.view.useValue();

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div className="flex gap-2 py-2">
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() =>
            grid.api.columnUpdate({
              education: { hide: false },
              marital: { hide: false },
            })
          }
        >
          Show Education and Marital
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() =>
            grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: true }])))
          }
        >
          Hide All
        </button>

        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() => grid.state.columns.set(columns)}
        >
          Reset
        </button>
      </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 null;

                      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>
  );
}

Hiding Columns and Column Groups

When a column belongs to a group, its visibility can change based on the group's state.

LyteNyte Grid does not treat these temporarily hidden columns as fully hidden. It considers them part of a temporary view state caused by user interaction, not a permanent visibility setting. While most use cases are unaffected, keep this in mind when managing column visibility in code.

The example below shows this difference. The job column is hidden when the group is collapsed but is still considered a visible column since it's hide property is not true.