Cells

Cell Renderers

Customize how cells display content by setting the cellRenderer property on a column. This is the primary way to control cell appearance in LyteNyte Grid.

The cellRenderer property accepts either a React component or a string. When you provide a string, LyteNyte Grid treats it as a key that references a registered cell renderer.

Direct Function Cell Renderer

Provide a React function component directly to the cellRenderer property to control how LyteNyte Grid displays the contents for each cell in that column.

Direct Cell Renderer

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { companiesWithPricePerf } from "@1771technologies/sample-data/companies-with-price-performance";
import { useId } from "react";
import { Sparklines, SparklinesLine } from "react-sparklines";
 
const columns: ColumnProReact[] = [
  { id: "Company" },
  { id: "Founded" },
  { id: "Employee Cnt" },
  {
    id: "1 Year Perf",
    cellRenderer: (p) => {
      const field = p.api.columnField(p.row, p.column) as number[];
 
      return (
        <div
          style={{
            width: "100%",
            height: "100%",
            boxSizing: "border-box",
            padding: 4,
          }}
        >
          <Sparklines data={field}>
            <SparklinesLine color="blue" />
          </Sparklines>
        </div>
      );
    },
  },
  {
    id: "Price",
    cellRenderer: (p) => {
      const field = p.api.columnField(p.row, p.column) as string;
 
      return (
        <div
          style={{
            width: "100%",
            height: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "end",
            paddingInline: 8,
            boxSizing: "border-box",
            fontFamily: "monospace",
          }}
        >
          ${field}
        </div>
      );
    },
  },
];
 
export function CellRenderers() {
  const ds = useClientDataSource({
    data: companiesWithPricePerf,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Registering Cell Renderers

For better reusability, register cell renderers and reference them by key. Pass a string to the cellRenderer property that corresponds to a key in your registered renderer components. Register these components through the cellRenderers property on grid state.

Registered Cell Renderer

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
  CellRendererParamsProReact,
  ColumnProReact,
} from "@1771technologies/lytenyte-pro/types";
import { companiesWithPricePerf } from "@1771technologies/sample-data/companies-with-price-performance";
import { useId } from "react";
import { Sparklines, SparklinesLine } from "react-sparklines";
 
const columns: ColumnProReact[] = [
  { id: "Company" },
  { id: "Founded" },
  { id: "Employee Cnt" },
  {
    id: "1 Year Perf",
    cellRenderer: "line-renderer",
  },
  {
    id: "Price",
    cellRenderer: "dollar-renderer",
  },
];
 
export function CellRenderersRegistered() {
  const ds = useClientDataSource({
    data: companiesWithPricePerf,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    cellRenderers: {
      "line-renderer": SparklineRenderer,
      "dollar-renderer": DollarRenderer,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}
 
function DollarRenderer(p: CellRendererParamsProReact) {
  const field = p.api.columnField(p.row, p.column) as string;
 
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "end",
        paddingInline: 8,
        boxSizing: "border-box",
        fontFamily: "monospace",
      }}
    >
      ${field}
    </div>
  );
}
 
function SparklineRenderer(p: CellRendererParamsProReact) {
  const field = p.api.columnField(p.row, p.column) as number[];
 
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        boxSizing: "border-box",
        padding: 4,
      }}
    >
      <Sparklines data={field}>
        <SparklinesLine color="blue" />
      </Sparklines>
    </div>
  );
}

This approach makes your renderers more reusable and keeps your column definitions serializable.

Cell State

All rendered cells in LyteNyte Grid are React components that can use any React hook. However, keep in mind that cells frequently mount and unmount as users scroll through the grid. This means local component state won't persist across scrolling.

To maintain persistent cell state across scrolling, move the state management to the grid level and share it with individual cells.

PreviousRow Dragging

Next Cell Editing