Column Base

LyteNyte Grid applies a set of default options to the columns you provide. You can override these defaults through the column base object.

Overriding Defaults

Every column in LyteNyte Grid extends a default column specification. The grid uses this specification to fill in any values omitted from your column definitions. For example:

const columns = [{ id: "name" }, { id: "email", width: 200 }];

The name column uses the default width of 150, while the email column uses its specified width of 200. Every property on the column interface has a default value. Refer to the Column API reference for details.

To override these defaults, provide a columnBase object. LyteNyte Grid merges this object with the built-in defaults, overriding any specified properties.

For example, in the code below the default column width becomes 100. You can override any default property on the column specification except those properties that have been explicitly excluded, such as field or pin.

function MyGrid() {
  const grid = Grid.useLyteNyte({
    columnBase: { width: 100 },
    columns,
  });
}

A common pattern is to set a default cell renderer or header renderer. The demo below creates a heatmap of temperatures using a shared default cell renderer:

Monthly Temperatures Heatmap

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { useId } from "react";
import type { MonthlyTemperature } from "@1771technologies/grid-sample-data/temperatures";
import { data } from "@1771technologies/grid-sample-data/temperatures";
import { HeatMapCell, tw, YearCell } from "./components";

const columns: Column<MonthlyTemperature>[] = [
  { id: "year", cellRenderer: YearCell, width: 100 },
  { id: "Jan" },
  { id: "Feb" },
  { id: "Mar" },
  { id: "Apr" },
  { id: "May" },
  { id: "Jun" },
  { id: "Jul" },
  { id: "Aug" },
  { id: "Sep" },
  { id: "Oct" },
  { id: "Nov" },
  { id: "Dec" },
];

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

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

    columnBase: {
      widthMin: 30,
      width: 50,
      widthFlex: 1,
      cellRenderer: HeatMapCell,
    },
  });

  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={tw(
                          "flex h-full w-full items-center justify-center text-nowrap text-sm capitalize",
                          c.column.type === "number" && "justify-end",
                        )}
                      />
                    );
                  })}
                </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} className="group">
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center justify-center text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type { MonthlyTemperature } from "@1771technologies/grid-sample-data/temperatures";
import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

export function HeatMapCell({
  grid: { api },
  column,
  row,
}: CellRendererParams<MonthlyTemperature>) {
  if (!api.rowIsLeaf(row) || !row.data) return null;

  const value = row.data.temps[column.id as keyof MonthlyTemperature["temps"]];

  const bg = valueToColor(value);

  return (
    <div
      style={{ background: bg }}
      className="flex h-full w-full items-center justify-center text-white group-hover:opacity-70"
    >
      {value.toFixed(1)}°C
    </div>
  );
}

export function YearCell({ grid: { api }, row, column }: CellRendererParams<MonthlyTemperature>) {
  const field = api.columnField(column, row);

  return `${field}`;
}

/**
 * Interpolate between two HSL colors based on value in [0, 30].
 * 0  -> hsl(173.4 80.4% 40%)
 * 30 -> hsl(0 84.2% 60.2%)
 */
export function valueToColor(value: number): string {
  const percentage = Math.min((value / 19) * 100, 100);

  const start = "174.7 83.9% 31.6%";
  const end = "178.6 84.3% 10%";

  return `color-mix(in hsl, hsl(${start}) ${100 - percentage}%, hsl(${end}) ${percentage}%)`;
}

The demo overrides width, widthMin, and widthFlex. Since those defaults are tailored for monthly temperature columns, the year column must specify its own values:

const columns: Column<MonthlyTemperature>[] = [
  { id: "year", cellRenderer: YearCell, width: 100 },
  { id: "Jan" },
  // other columns
];

Exclusions From the Base

The columnBase property cannot override every column option. In particular, pin and field must be set per column and cannot be defined through the base. These properties apply only to specific columns, not all columns, so this limitation is intentional. See the ColumnBase API reference for the full list of overridable properties.

Next Steps

Column Resizing: Change column widths programmatically or via user interaction.
Column ID & Name: Define user-friendly column names and ensure unique IDs.
Column Moving: Reorder columns programmatically or through drag-and-drop.
Column Field: Control how a column retrieves its value for each cell.

Column BaseCopy Page

Overriding Defaults

Monthly Temperatures Heatmap

Exclusions From the Base

Next Steps

On this page