Columns

Column Visibility

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="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() =>
            grid.api.columnUpdate({
              education: { hide: false },
              marital: { hide: false },
            })
          }
        >
          Show Education and Marital
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() =>
            grid.api.columnUpdate(
              Object.fromEntries(columns.map((c) => [c.id, { hide: true }]))
            )
          }
        >
          Hide All
        </button>
 
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          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 w-full h-full capitalize px-2 items-center"
                        />
                      );
                    })}
                  </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="text-sm flex items-center px-2 h-full w-full"
                          />
                        );
                      })}
                    </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.

Column Visibility and Hiding

"use client";
 
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
} from "@1771technologies/lytenyte-pro/icons";
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", groupPath: ["One Group"] },
  { id: "job", groupPath: ["One Group"], groupVisibility: "close" },
  { id: "balance", type: "number", groupPath: ["One Group"] },
  { id: "education", hide: true },
  { id: "marital" },
];
 
export default function ColumnVisibilityWithGroups() {
  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="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() =>
            grid.api.columnUpdate({
              education: { hide: false },
              marital: { hide: false },
            })
          }
        >
          Show Education
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() =>
            grid.api.columnUpdate(
              Object.fromEntries(columns.map((c) => [c.id, { hide: true }]))
            )
          }
        >
          Hide All
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          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 (
                          <Grid.HeaderGroupCell
                            cell={c}
                            key={c.idOccurrence}
                            className="flex items-center group"
                          >
                            <div>{c.groupPath.at(-1)}</div>
                            <button
                              className="flex items-center justify-center text-ln-gray-90"
                              onClick={() => grid.api.columnToggleGroup(c.id)}
                            >
                              <ChevronLeftIcon className="hidden group-data-[ln-collapsed=false]:block" />
                              <ChevronRightIcon className="block group-data-[ln-collapsed=false]:hidden" />
                            </button>
                          </Grid.HeaderGroupCell>
                        );
 
                      return (
                        <Grid.HeaderCell
                          key={c.id}
                          cell={c}
                          className="flex w-full h-full capitalize px-2 items-center"
                        />
                      );
                    })}
                  </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="text-sm flex items-center px-2 h-full w-full"
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

PreviousColumn Header Renderer

Next Column Field