Grid

Grid Theming

LyteNyte Grid is designed to be styled primarily through CSS variables and class selectors. This guide covers the main styling options and provides best practices for customizing LyteNyte Grid within your applications.

Provided Themes

LyteNyte Grid includes four pre-made themes that you can use immediately. To apply any of these themes, simply add the appropriate class name to a parent element (typically the HTML or body tag).

lng1771-teal: a theme that uses teal for the accent color.
lng1771-term256: a theme that uses plain terminal colors.
dark: the standard dark theme for LyteNyte Grid.
light: the standard light theme for LyteNyte Grid.

Pre-made LyteNyte Grid Themes

Select Theme

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId, useState } from "react";
 
const columns: ColumnProReact[] = [
  { 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" },
  { id: "y" },
];
 
export function GridTheming() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    rowSelectionSelectedIds: new Set(["0-center", "1-center"]),
    cellSelections: [{ rowStart: 4, rowEnd: 7, columnStart: 2, columnEnd: 4 }],
 
    columnBase: {
      sortable: true,
      movable: true,
      resizable: true,
      uiHints: { sortButton: true },
    },
  });
  const [theme, setTheme] = useState("lng1771-teal");
 
  return (
    <div style={{ height: 700, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: 8, display: "flex", gap: 8 }}>
        <label>Select Theme</label>
        <select
          className="border border-gray-500/40 rounded"
          value={theme}
          onChange={(e) => setTheme(e.target.value)}
        >
          <option value="lng1771-teal">LyteNyte Teal</option>
          <option value="lng1771-term256">Term 256</option>
          <option value="dark">Dark</option>
          <option value="light">Light</option>
        </select>
      </div>
      <div style={{ flex: "1" }} className={theme}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

CSS Variables

All CSS variables in LyteNyte Grid use the lng1771 prefix to prevent collisions with other variables in your application.

Below are the default CSS variables used by LyteNyte Grid:

--lng1771-primary-05: rgba(18, 108, 255, 0.05);
--lng1771-primary-10: rgba(18, 108, 255, 0.1);
--lng1771-primary-30: rgba(18, 108, 255, 0.3);
--lng1771-primary-50: #126cff;
--lng1771-primary-70: #053f9e;
--lng1771-primary-90: #012259;
 
--lng1771-row-selected: #d6e4fe;
--lng1771-focus-outline: var(--lng1771-primary-50);
--lng1771-gradient-shadow: linear-gradient(
  90deg,
  var(--lng1771-gray-50),
  var(--lng1771-gray-50)
);
 
--lng1771-gray-00: #ffffff;
--lng1771-gray-02: #fafbfc;
--lng1771-gray-05: #f6f8fa;
--lng1771-gray-10: #f2f4f7;
--lng1771-gray-20: #e9edf1;
--lng1771-gray-30: #dadfe7;
--lng1771-gray-40: #c3c9d5;
--lng1771-gray-50: #949ba8;
--lng1771-gray-60: #787e8c;
--lng1771-gray-70: #5c6170;
--lng1771-gray-80: #2d2f39;
--lng1771-gray-90: #1e1e29;
--lng1771-gray-100: #15151e;
 
--lng1771-typeface: "Inter", ui-sans-serif, system-ui, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

CSS Classes

LyteNyte Grid assigns specific class names to most DOM elements, allowing targeted styling through CSS selectors. These classes follow the BEM naming convention. While you can reference the list below, inspecting elements with your browser's developer tools is often the quickest way to identify the correct class to target.

Core Grid Elements

lng1771-viewport - Applied to the root viewport container.
lng1771-header-container - Applied to the root header container.
lng1771-header - Applied to the grid's header component.
lng1771-header-group - Applied to group headers.
lng1771-row-container - Applied to the element containing grid cells (excluding headers).

Header Cell Classes

lng1771-header__cell - Applied to header cells:
- lng1771-header__cell--over - Applied when a column move is active and over the cell.
- lng1771-header__cell--over-before - Applied when a column move is active and before the cell.
- lng1771-header__cell--over-after - Applied when a column move is active and after the cell.
- lng1771-header__cell--over-not-allowed - Applied when column movement is not allowed.
lng1771-header__cell-expand - Applied to empty column header cells used for expanding groups.
lng1771-header__cell-divider - Applied to header cell separators:
- lng1771-header__cell-divider--resizable - Applied when the column is resizable.
lng1771-header__cell-floating - Applied to floating header cells.

Row Section Classes

lng1771-rows__top-section - Applied to rows pinned to the top.
lng1771-rows__center-section - Applied to scrollable rows in the center.
lng1771-rows__bottom-section - Applied to rows pinned to the bottom.
lng1771-row-drag-indicator - Applied to the indicator shown during row dragging.

Cell Classes

lng1771-cell - Applied to grid cells:
- lng1771-cell--alternate - Applied to alternate cells for zebra striping.
- lng1771-cell--selected - Applied to cells in selected rows.
- lng1771-cell--last-start - Applied to the last cell pinned to the start of a row.
- lng1771-cell--first-end - Applied to the first cell pinned to the end of a row.
lng1771-cell__edit - Applied to the edit provider container for editable cells.
lng1771-cell__edit-input - Applied to built-in input editors.
lng1771-cell__full-width - Applied to full-width cells:
- lng1771-cell__full-width--alternate - Applied to alternate full-width cells.
- lng1771-cell__full-width--selected - Applied to selected full-width cells.
lng1771-cell__marker - Applied to marker column cells.
lng1771-row-detail - Applied to row detail containers for expanded detail rows.

Note that this covers only classes applied to LyteNyte Grid core components. Additional components like column managers and menus have their own set of classes, which are covered in their respective guides.