Grid Theming

LyteNyte Grid is a headless data grid. This guide explains how to theme LyteNyte Grid using vanilla CSS or pre-built themes to create a visually polished data grid.

As a headless data grid, LyteNyte Grid applies no colors, fonts, borders, or backgrounds by default. However, it does include inline styles required for layout calculations and row or column virtualization. These functional styles should not be overridden. Because inline styles have high specificity, they are unlikely to be affected unless you deliberately create an extremely specific CSS selector.

Pre-built Themes

The fastest way to create a visually polished grid is by using one of the built-in LyteNyte Grid themes. To apply a theme, add the lng-grid class to any HTML element above the grid, then include the class name of the theme you want to use. Ensure you have imported the CSS file for the themes:

import "@1771technologies/lytenyte-core/grid.css";

import "@1771technologies/lytenyte-pro/grid.css";

LyteNyte Grid provides seven ready-to-use themes. Add the theme class, alongside the lng-grid class, to a parent element of the grid (typically html or body):

lng1771-teal: Teal-accent theme.
lng1771-term256: Terminal-style color theme.
dark: Standard dark theme.
light: Standard light theme.
lng1771-shadcn-light: Light theme based on shadcn color tokens. Use in projects that adopt shadcn.
lng1771-shadcn-dark: Dark theme based on shadcn color tokens. Use in projects that adopt shadcn.
lng1771-cotton-candy: Playful, colorful theme for friendly data grid views.

The demo below shows how each theme looks in practice. For a complete example with auxiliary components, visit our live demo page, which includes a theme toggle.

Pre-built LyteNyte Grid Themes

Theme:

"use client";
import "./main.css";
import "@1771technologies/lytenyte-pro/grid.css";
import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId, useState } from "react";
import { ThemePicker, tw } from "./ui";
import { BalanceCell, DurationCell, NumberCell } from "./components";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

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

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

    cellSelectionMode: "range",
    rowSelectedIds: new Set(["0-center", "1-center"]),
    cellSelections: [{ rowStart: 4, rowEnd: 7, columnStart: 2, columnEnd: 4 }],
  });
  const [theme, setTheme] = useState("lng1771-teal");

  const view = grid.view.useValue();

  return (
    <div className={"lng-grid" + " " + theme} style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ padding: 8, display: "flex", gap: 8 }}>
        <ThemePicker theme={theme} setTheme={setTheme} />
      </div>
      <div 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 items-center px-2 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}>
                      {row.cells.map((c) => {
                        return (
                          <Grid.Cell
                            key={c.id}
                            cell={c}
                            className={tw(
                              "flex items-center px-2 text-sm",
                              c.column.type === "number" && "justify-end tabular-nums",
                            )}
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

import { ToggleGroup as TG } from "radix-ui";
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 ToggleGroup(props: Parameters<typeof TG.Root>[0]) {
  return (
    <TG.Root
      {...props}
      className={tw("bg-ln-gray-20 flex items-center gap-2 rounded-xl px-2 py-1", props.className)}
    ></TG.Root>
  );
}

export function ToggleItem(props: Parameters<typeof TG.Item>[0]) {
  return (
    <TG.Item
      {...props}
      className={tw(
        "text-ln-gray-70 flex items-center justify-center px-2 py-1 text-xs font-bold outline-none focus:outline-none",
        "data-[state=on]:text-ln-gray-90 data-[state=on]:bg-linear-to-b from-ln-gray-02 to-ln-gray-05 data-[state=on]:rounded-md",
        props.className,
      )}
    ></TG.Item>
  );
}

export function ThemePicker({ theme, setTheme }: { theme: string; setTheme: (s: string) => void }) {
  return (
    <div className={tw("flex h-full items-center gap-1 text-nowrap px-2 py-1")}>
      <div className={tw("text-light hidden text-xs font-medium md:block")}>Theme:</div>
      <ToggleGroup
        type="single"
        value={theme}
        className={tw("flex flex-wrap")}
        onValueChange={(c) => {
          if (!c) return;
          setTheme(c);
        }}
      >
        <ToggleItem value="light">Light</ToggleItem>
        <ToggleItem value="dark">Dark</ToggleItem>
        <ToggleItem value="lng1771-teal">LyteNyte Teal</ToggleItem>
        <ToggleItem value="lng1771-term256">Term 256</ToggleItem>
        <ToggleItem value="lng1771-shadcn-dark dark">Shadcn Dark</ToggleItem>
        <ToggleItem value="lng1771-shadcn-light light">Shadcn Light</ToggleItem>
        <ToggleItem value="lng1771-cotton-candy">Cotton Candy</ToggleItem>
      </ToggleGroup>
    </div>
  );
}

You can also create a custom theme from scratch. LyteNyte Grid is unopinionated about your styling method and works with any approach. The rest of this guide explains how to style the grid using vanilla CSS and inline styles. Even if you use a framework like Tailwind, reviewing these examples will help you understand the styling attributes available in LyteNyte Grid.

Styling Through Data Attributes

LyteNyte Grid makes extensive use of data attributes on grid elements. Data attributes are custom pieces of information attached to an HTML element. They always begin with the data- prefix. For example, each cell element includes the attribute data-ln-cell="true". All LyteNyte Grid data attributes begin with the data-ln prefix, where ln stands for LyteNyte. Using these attributes is an effective way to target specific parts of the grid for CSS styling.

In the demo below, the header cells and grid cells are styled using HSLA color codes and the light-dark CSS function, which is useful for specifying theme colors for light and dark color schemes.

Data Attribute Styling

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

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100 },
  });

  const view = grid.view.useValue();

  return (
    <div className="data-styles">
      <div 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}
                          style={{
                            justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
                          }}
                        />
                      );
                    })}
                  </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}
                            style={{
                              justifyContent:
                                c.column.type === "number" ? "flex-end" : "flex-start",
                            }}
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The CSS uses the attribute selector, as shown below:

.data-styles {
  [data-ln-cell="true"] {
    display: flex;
    align-items: center;
    padding-inline: 8px;
    background-color: light-dark(white, hsla(190, 32%, 6%, 1));
    color: light-dark(hsla(175, 6%, 38%, 1), hsla(175, 10%, 86%, 1));
    font-size: 14px;
    border-bottom: 1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1));
  }

  [data-ln-alternate="true"] [data-ln-cell="true"] {
    background-color: light-dark(hsl(0, 27%, 98%), hsl(184, 33%, 8%));
  }

  [data-ln-header-cell="true"] {
    display: flex;
    align-items: center;
    padding-inline: 8px;
    background-color: light-dark(hsla(175, 12%, 92%, 1), hsla(177, 19%, 17%, 1));
    color: light-dark(hsla(177, 19%, 17%, 1), hsla(175, 12%, 92%, 1));
    text-transform: capitalize;
    font-size: 14px;
  }
}

Wrap the styles in a data-styles class to apply them on a per-grid basis. If you prefer to apply them globally, remove the wrapper class.

Commonly Used Data Attributes

It is useful to understand which data attributes apply to each element. You can inspect the rendered grid in your browser's developer tools, but the most common attributes are listed below for convenience.

Header Elements

Each header element includes an attribute indicating its type:

Grid.Viewport: data-ln-viewport
Grid.Header: data-ln-header
Grid.HeaderRow: data-ln-header-row
Grid.HeaderGroupCell: data-ln-header-group
Grid.HeaderCell: data-ln-header-cell

Additionally, Grid.HeaderCell may include data-ln-header-floating to indicate that the cell belongs to the floating header.

Some elements also include attributes for contextual styling. For example, Grid.HeaderCell includes data-ln-colpin to indicate the pin section (start, center, or end). It may also include data-ln-last-start-pin or data-ln-first-end-pin to indicate whether the cell is the last in the start section or the first in the end section.

Grid.HeaderGroupCell includes attributes describing its state. The data-ln-collapsible attribute indicates that the group cell can collapse, while data-ln-collapsed reflects the current collapse state.

Use these attributes to precisely target header elements for custom styling.

Row and Cell Elements

Each row and cell element includes an identifying data attribute:

Grid.RowsContainer: data-ln-rows-container
Grid.RowsTop: data-ln-rows-top
Grid.RowsCenter: data-ln-rows-center
Grid.RowsBottom: data-ln-rows-bottom
Grid.Row: data-ln-row
Grid.RowFullWidth: data-ln-row and data-ln-rowtype="full-width"
Grid.Cell: data-ln-cell

Additional contextual attributes support conditional styling. For example, Grid.Row may include data-ln-last-top-pin or data-ln-first-bottom-pin to indicate whether the row is the last top-pinned or first bottom-pinned row.

Using these attributes provides a consistent and reliable way to target specific parts of LyteNyte Grid for styling.

Styling Through Classes

LyteNyte Grid provides flexible styling options. Since each component is exposed, you can apply any number of classes to its elements. Use this approach when you have an existing design system and want LyteNyte Grid to match it.

The example below styles grid elements using predefined classes and the clsx library to conditionally apply styles based on column type.

Styling With Classes

"use client";
import "./css-classes.css";
import "@1771technologies/lytenyte-pro/grid.css";
import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import clsx from "clsx";
import { useId } from "react";
import { BalanceCell, DurationCell, NumberCell } from "./components";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100 },
  });

  const view = grid.view.useValue();

  return (
    <div className="classes">
      <div 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={clsx(
                            "header-cell",
                            c.column.type === "number" && "cell-number",
                          )}
                        />
                      );
                    })}
                  </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={clsx("cell", c.column.type === "number" && "cell-number")}
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The CSS is straightforward. The example below shows how the classes are applied through the className property on the components.

.cell {
  display: flex;
  align-items: center;
  padding-inline: 8px;
  background-color: light-dark(hsla(175, 12%, 92%, 1), hsla(177, 19%, 17%, 1));
  color: light-dark(hsla(177, 19%, 17%, 1), hsla(175, 12%, 92%, 1));
  text-transform: capitalize;
  font-size: 14px;
}

[data-ln-alternate="true"] .cell {
  background-color: light-dark(hsl(0, 27%, 98%), hsl(184, 33%, 8%));
}

.cell-number {
  justify-content: flex-end;
}

.header-cell {
  display: flex;
  align-items: center;
  padding-inline: 8px;
  background-color: light-dark(white, hsla(190, 32%, 6%, 1));
  color: light-dark(hsla(175, 6%, 38%, 1), hsla(175, 10%, 86%, 1));
  font-size: 14px;
  border-bottom: 1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1));
}

Styling Through Inline Styles

You can also style LyteNyte Grid elements using inline styles. This approach works well when style values are dynamic and available in JavaScript. For example, a simple theme editor can be built this way, although it is not generally recommended.

Inline Styles

Cell Background

#0a1314

Cell Text

#d8dfde

Header Background

#233433

Header Text

#e8eded

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

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100 },
  });

  const view = grid.view.useValue();

  const [cellBg, setCellBg] = useState("#0a1314");
  const [cellFg, setCellFg] = useState("#d8dfde");
  const [headerBg, setHeaderBg] = useState("#233433");
  const [headerFg, setHeaderFg] = useState("#e8eded");

  return (
    <div>
      <div className="flex flex-col gap-2 px-2 pb-4 pt-2">
        <div className="grid grid-cols-2 gap-2 2xl:grid-cols-4 2xl:gap-8">
          <label className="flex flex-col">
            <span className="pl-1 text-sm font-bold">Cell Background</span>
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
              <input
                type="color"
                className="h-6 w-6 border-transparent shadow-none"
                value={cellBg}
                onChange={(e) => setCellBg(e.target.value)}
              />
              <div className="text-sm">{cellBg}</div>
            </div>
          </label>
          <label className="flex flex-col">
            <span className="px-1 text-sm font-bold">Cell Text</span>
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
              <input
                type="color"
                className="h-6 w-6 border-transparent shadow-none"
                value={cellFg}
                onChange={(e) => setCellFg(e.target.value)}
              />
              <div className="text-sm">{cellFg}</div>
            </div>
          </label>

          <label className="flex flex-col">
            <span className="pl-1 text-sm font-bold">Header Background</span>
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
              <input
                type="color"
                className="h-6 w-6 border-transparent shadow-none"
                value={headerBg}
                onChange={(e) => setHeaderBg(e.target.value)}
              />
              <div className="text-sm">{headerBg}</div>
            </div>
          </label>
          <label className="flex flex-col">
            <span className="pl-1 text-sm font-bold">Header Text</span>
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
              <input
                type="color"
                className="h-6 w-6 border-transparent shadow-none"
                value={headerFg}
                onChange={(e) => setHeaderFg(e.target.value)}
              />
              <div className="text-sm">{headerFg}</div>
            </div>
          </label>
        </div>
      </div>
      <div 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}
                          style={{
                            display: "flex",
                            alignItems: "center",
                            paddingInline: "8px",
                            justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
                            fontSize: 14,
                            background: headerBg,
                            color: headerFg,
                            textTransform: "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}
                            style={{
                              display: "flex",
                              alignItems: "center",
                              paddingInline: "8px",
                              justifyContent:
                                c.column.type === "number" ? "flex-end" : "flex-start",
                              fontSize: 14,
                              background: cellBg,
                              color: cellFg,
                              borderBottom: "1px solid hsla(177, 19%, 17%, 1)",
                            }}
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

Inline styles are applied directly to each component. For example, the Grid.Cell component can use the style property as shown below.

<Grid.Cell
  key={c.id}
  cell={c}
  style={{
    display: "flex",
    alignItems: "center",
    paddingInline: "8px",
    justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
    fontSize: 14,
    background: cellBg,
    color: cellFg,
    borderBottom: "1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1))",
  }}
/>

Use caution when applying inline styles. The same maintainability issues and limitations of inline styles also apply in LyteNyte Grid. When used selectively, inline styles can simplify code, but avoid using them for every grid element.

Styling Elements Not Directly Exposed

Most LyteNyte Grid components are accessible through the headless interface. However, for convenience, some advanced features are rendered and controlled internally by LyteNyte Grid. These elements include:

The row detail container (master detail container).
The cell selection rectangles.

To style these elements, you must target them directly using CSS. In most cases, a single selector is enough to apply your styles. If you are using one of our pre-built themes, these elements are already styled.

Styling the Row Detail (Master Detail) Container

The example below shows a grid with a single row detail expanded. Styles for the detail container are applied by targeting the row element that includes the data-ln-row-detail attribute.

Styling Row Detail

"use client";
import "./detail.css";
import "@1771technologies/lytenyte-pro/grid.css";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import type { Column, RowLeaf } from "@1771technologies/lytenyte-pro/types";
import { companiesWithPricePerf } from "@1771technologies/grid-sample-data/companies-with-price-performance";
import { useId, useMemo } from "react";
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
import { NumberCell, PriceCell } from "./components";

type PerformanceData = (typeof companiesWithPricePerf)[number];

const columns: Column<PerformanceData>[] = [
  { id: "Company", widthFlex: 2 },
  { id: "Country", widthFlex: 2 },
  { id: "Founded", type: "number" },
  { id: "Employee Cnt", name: "Employees", type: "number", cellRenderer: NumberCell },
  { id: "Price", type: "number", cellRenderer: PriceCell },
];

export default function RowDetail() {
  const ds = useClientRowDataSource({
    data: companiesWithPricePerf,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100, widthFlex: 1 },

    rowDetailExpansions: new Set(["0"]),
    rowDetailRenderer: (p) => {
      if (!grid.api.rowIsLeaf(p.row)) return;
      return (
        <div
          style={{
            width: "100%",
            height: "100%",
            boxSizing: "border-box",
            padding: "20px 20px 20px 0px",
          }}
        >
          <PriceChart row={p.row} />
        </div>
      );
    },
  });

  const view = grid.view.useValue();

  return (
    <div style={{ height: 500 }} className="detail-styles">
      <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}
                        style={{
                          justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
                        }}
                      />
                    );
                  })}
                </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}
                          style={{
                            justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
                          }}
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

function PriceChart({ row }: { row: RowLeaf<PerformanceData> }) {
  const data = useMemo(() => {
    if (!row.data) return [];
    const weeks: Record<string, { week: number; [key: string]: number }> = Object.fromEntries(
      Array.from({ length: 52 }, (_, i) => [i + 1, { week: i + 1 }]),
    );

    const data = row.data["1 Year Perf"];

    data.forEach((dp, i) => {
      weeks[i + 1][row.id] = dp;
    });
    return Object.values(weeks).sort((l, r) => l.week - r.week);
  }, [row.data, row.id]);

  return (
    <ResponsiveContainer height="100%" width="100%">
      <AreaChart data={data}>
        <defs>
          <linearGradient key={row.id} id={row.id} x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor={color.stop5} stopOpacity={0.8} />
            <stop offset="95%" stopColor={color.stop95} stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis
          dataKey="week"
          ticks={[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]}
          fontSize="14px"
          tickLine={false}
        />
        <YAxis fontFamily="Inter" fontSize="14px" tickLine={false} axisLine={false} />
        <CartesianGrid vertical={false} stroke="var(--lng1771-gray-10)" />

        <Area
          key={row.id}
          type="monotone"
          dataKey={row.id}
          stroke={color.solid}
          strokeWidth={3}
          fillOpacity={1}
          fill={`url(#${row.id})`}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}
const color = {
  name: "Ruby Red",
  solid: "#CC5500",
  stop5: "#CC5500",
  stop95: "transparent",
};

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { companiesWithPricePerf } from "@1771technologies/grid-sample-data/companies-with-price-performance";

type PerformanceData = (typeof companiesWithPricePerf)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function PriceCell({ grid, row, column }: CellRendererParams<PerformanceData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The applied styles are simple. Padding is added to the detail container, and a border is applied to its direct div descendant. You can adapt this approach as needed to fit your use case.

[data-ln-row-detail="true"] {
  padding: 24px;

  & > div {
    border: 1px solid var(--lng1771-gray-30);
    border-radius: 8px;
    background-color: light-dark(white, transparent);
  }
}

Styling the Cell Selection Rectangle

The cell selection rectangle consists of div elements created by LyteNyte Grid to show the range of selected cells. This is a PRO feature available in LyteNyte Grid PRO. You can style the selection rectangles using data attributes, primarily data-ln-cell-selection-rect.

Cell Selection Styling

"use client";
import "./cell-styles.css";
import "@1771technologies/lytenyte-pro/grid.css";
import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";
import { BalanceCell, DurationCell, NumberCell } from "./components";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome" },
  { id: "y" },
];

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

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

    cellSelectionMode: "range",
    cellSelections: [{ rowStart: 4, rowEnd: 7, columnStart: 2, columnEnd: 4 }],
  });

  const view = grid.view.useValue();

  return (
    <div className="cell-styles select-none">
      <div 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}
                          style={{
                            justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",
                          }}
                        />
                      );
                    })}
                  </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}
                            style={{
                              justifyContent:
                                c.column.type === "number" ? "flex-end" : "flex-start",
                            }}
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

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

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

In this example, the cell selection rectangle is styled using the CSS below, which targets the selection rectangles generated by LyteNyte Grid when selection ranges are active. Notice how individual rectangles are selected, as the selection area is actually a set of split divs assembled to visually form the selection rectangle.

[data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
  background-color: var(--lng1771-primary-30);
  box-sizing: border-box;

  &[data-ln-cell-selection-border-top="true"] {
    border-top: 1px solid var(--lng1771-primary-50);
  }
  &[data-ln-cell-selection-border-bottom="true"] {
    border-bottom: 1px solid var(--lng1771-primary-50);
  }
  &[data-ln-cell-selection-border-start="true"] {
    border-inline-start: 1px solid var(--lng1771-primary-50);
  }
  &[data-ln-cell-selection-border-end="true"] {
    border-inline-end: 1px solid var(--lng1771-primary-50);
  }
}
[data-ln-cell-selection-rect][data-ln-cell-selection-is-unit="true"] {
  outline: 1px solid var(--lng1771-primary-50);
  outline-offset: -1px;
}

Layout Constraints

LyteNyte Grid is mostly headless and unstyled, but some functional inline styles are necessary for layout and rendering. These styles control cell sizing and positioning. Avoid overriding them to ensure the grid renders correctly.

Functional styles typically affect properties such as width, height, top, left, and transform. Avoid applying margin directly to grid elements, as it may interfere with layout calculations.

LyteNyte Grid applies its functional styles inline, which gives them high specificity. As a result, it is difficult to unintentionally override these styles. In most cases, conflicts will only occur if you create an extremely specific CSS selector.

Next Steps

This guide covers the main styling approaches for LyteNyte Grid. Since most developers use a framework or CSS abstraction, we also provide dedicated guides for popular styling methods.

Grid Theming With Tailwind: Style LyteNyte Grid using Tailwind.
Grid Theming With CSS Modules: Apply scoped styles using CSS Modules.
Grid Theming With Emotion: Learn how to theme LyteNyte Grid with Emotion or similar CSS-in-JS libraries.