Grid

Grid Theming

LyteNyte Grid ships unstyled by default, so you can apply any CSS approach you prefer. This guide offers tips on the best styling practices and shows different ways to style LyteNyte Grid components.

Applying Styles

LyteNyte Grid is headless. Most components expose props for styling, but some such as cell selection overlay rectangles -are not directly accessible. These must be styled with CSS selectors.

For exposed components, simply add your CSS classes or inline styles. For example, with Tailwind, styling a cell is as easy as:

<Grid.Cell className="flex items-center text-sm" />

This familiar approach means you can style the grid with your existing design system, without reinventing a new approach to styling a grid.

Styling Considerations

While unstyled, LyteNyte Grid applies essential inline styles for position, width, height, and box-sizing. Avoid overriding these as they are necessary for correct grid behavior.

Pinned (frozen) elements are transparent. Always give each cell and header cell its own background color. Styling only the row is not enough because pinned elements share the same row.

An easy method is to target the grid's data attributes:

[data-ln-header-cell="true"],
[data-ln-header-group="true"],
[data-ln-cell="true"],
[data-ln-row="true"][data-ln-rowtype="full-width"] {
  background-color: black;
  color: white;
}

You can style each selector individually. For reference, check the LyteNyte themes in our GitHub repository.

Provided Themes

LyteNyte Grid includes four ready-to-use themes. Apply them by adding the theme's class name to a parent element (typically html or body) along with the lng-grid class.

lng1771-teal: teal accent theme.
lng1771-term256: terminal color theme.
dark: standard dark theme.
light: standard light theme.

Pre-made LyteNyte Grid Themes

Select Theme

"use client";
 
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/sample-data/bank-data-smaller";
import { useId, useState } from "react";
 
type BankData = (typeof bankDataSmall)[number];
 
const columns: Column<BankData>[] = [
  { 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 default function GridTheming() {
  const ds = useClientRowDataSource({ data: bankDataSmall });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    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"
      style={{ 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={{ height: 500 }} className={theme}>
        <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="flex w-full h-full capitalize px-2 items-center"
                        />
                      );
                    })}
                  </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="text-sm flex items-center px-2 h-full w-full"
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

PreviousSized Container

Next Grid Reactivity