Grid Theming With CSS Modules

LyteNyte Grid can be styled using CSS modules. CSS modules provide scoped class names for writing isolated CSS.

Review the basic theming approaches in LyteNyte Grid by reading our Grid Theming guide. The theming with CSS modules guide assumes you already understand the data attributes used to style LyteNyte Grid elements.

CSS Modules Setup

Depending on your framework, CSS modules may work without additional configuration. For example, when using Vite, any CSS file ending with .module.css is treated as a CSS module. Next.js follows the same convention. If you are not using Next.js or Vite, consult your framework's documentation. If needed, refer to the official CSS Modules documentation.

Styling With Scoped Styles

To style LyteNyte Grid using CSS modules, create a module file and define classes that target grid elements through their data attributes, such as data-ln-header-cell and data-ln-cell. The example below illustrates this:

Styling With CSS Modules

"use client";
import styles from "./style.module.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>
      <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={
                            styles.headerCell +
                            (c.column.type === "number" ? " " + styles.numberCell : "")
                          }
                        />
                      );
                    })}
                  </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={
                              styles.cell +
                              (c.column.type === "number" ? " " + styles.numberCell : "")
                            }
                          />
                        );
                      })}
                    </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 styles.cell class only applies to <Grid.Cell>. This scoping behavior is the main benefit of CSS modules, as styles in one module don't conflict with class names defined elsewhere.

.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));
}

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

.numberCell {
  justify-content: flex-end;
}

.headerCell {
  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;
}

Now import the module and attach the styles to the appropriate LyteNyte Grid elements:

import styles from "./style.module.css";

// In JSX
<Grid.Cell key={c.id} cell={c} className={styles.cell} />;

The styles.cell class applies only to <Grid.Cell>. This scoping behavior is the primary advantage of CSS modules—styles in one module do not conflict with class names defined elsewhere.

Styling Elements Not Directly Exposed

The Grid Theming guide explains that some LyteNyte Grid elements are not directly exposed through its public component interface. You must style these elements using data attributes or other explicit selectors. When using CSS modules, nested selectors are the recommended way to target these elements.

Styling Row Detail

To style the row-detail element with CSS modules, target the element that has the data-ln-row-detail attribute. The example below demonstrates this by defining a rowDetail class in a CSS module.

CSS Modules Styling Row Detail

"use client";
import styles from "./detail.module.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 }}>
      <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={
                          styles.headerCell +
                          (c.column.type === "number" ? " " + styles.numberCell : "")
                        }
                      />
                    );
                  })}
                </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={styles.rowDetail}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className={
                            styles.cell +
                            (c.column.type === "number" ? " " + styles.numberCell : "")
                          }
                        />
                      );
                    })}
                  </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 ?? "-"}`;
}

Here is the associated CSS module. The nested selectors make the rule slightly more complex, but still easy to follow:

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

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

Apply the rowDetail class to the grid row:

<Grid.Row row={row} key={row.id} className={styles.rowDetail} />

Styling Cell Selection Ranges

You can style cell-selection rectangles using the same nested selector pattern. Create a class that targets the data-ln-cell-selection-rect attribute and apply it at an appropriate wrapper level. The example below demonstrates this approach:

Cell Selection Styling With CSS Modules

"use client";
import style from "./styles.module.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 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={style.cellStyles}>
      <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={
                            style.headerCell +
                            (c.column.type === "number" ? " " + style.numberCell : "")
                          }
                        />
                      );
                    })}
                  </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={
                              style.cell +
                              (c.column.type === "number" ? " " + style.numberCell : "")
                            }
                          />
                        );
                      })}
                    </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 ?? "-"}`;
}

Here is the CSS module used to style the selection rectangle:

.cellStyles {
  [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;
  }
}

CSS Modules and Pre-built Themes

You can style LyteNyte Grid entirely with CSS modules, but this is not required. You may also combine a pre-built LyteNyte Grid theme with custom CSS module classes. The example below demonstrates how to enhance an existing theme:

Pre-built Themes With CSS Modules

Theme:

"use client";
import "./main.css";

import styles from "./style.module.css";
import { useClientRowDataSource, Grid } 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, useState } from "react";
import { ThemePicker } 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",
    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={styles.headerCell} />;
                    })}
                  </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={styles.cell} />;
                      })}
                    </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";

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

In the demo, the pre-built theme provides the base styling, and CSS modules add additional cell-specific styles. This works seamlessly because the pre-built themes are plain CSS and CSS modules simply scope class names.

Next Steps

Grid Theming: review the general theming guide to learn more about styling LyteNyte Grid.
Columns: understand how column configuration influences the grid view.
Cell Renderers: define custom cell renderers for greater control over cell content.

Grid Theming With CSS ModulesCopy Page