Columns

LyteNyte Grid uses columns to power core features like sorting, filtering, moving, and resizing. When you call the `useLyteNyte` hook, you provide an array of column definitions. This guide explains how to define columns and describes each property.

Basic Column Definition

At minimum, a column requires an id property:

const column = { id: "my-column" };

Each column must have a unique id. Ensure uniqueness across all columns in your grid.

The Column Base

LyteNyte Grid provides defaults for properties you omit. Use columnBase to set defaults for all columns. For example, instead of configuring every column for moving and resizing, set it once in columnBase.

To move a column, click and drag the header. To resize the header, hover your mouse cursor near the right edge of the header and an indicator will appear. You may then click and drag to resize.

Column Base

"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/grid-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" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

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

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

    // Make all the columns have a default width of 140px,
    // are movable, and are resizable.
    columnBase: {
      width: 140,

      uiHints: {
        movable: true,
        resizable: true,
      },
    },
  });

  const view = grid.view.useValue();

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

Column Properties Overview

Column Type

Use the type field to hint at the data type. Defaults to string. Options include number, date, datetime, or any custom string. Providing the correct type ensures proper sorting and filtering.