Theming

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.

Info

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 ln-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:

Core
PRO

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

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

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

ln-teal: Teal-accent theme.
ln-term: Terminal-style color theme.
ln-dark: Standard dark theme.
ln-light: Standard light theme.
ln-shadcn: A theme based on the Shadcn color tokens. Supports both light and dark mode. Use in projects that adopt shadcn.
ln-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:


17 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/grid-full.css";
3
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
4
import { data } from "@1771technologies/grid-sample-data/orders";
5
import {
6
  AvatarCell,
7
  EmailCell,
8
  IdCell,
9
  PaymentMethodCell,
10
  PriceCell,
11
  ProductCell,
12
  PurchaseDateCell,
13
} from "./components.jsx";
14
import { useClientDataSource, Grid } from "@1771technologies/lytenyte-pro";
15
import { ThemePicker, tw } from "./theme.jsx";
16
import { useState } from "react";
17
import { ViewportShadows } from "@1771technologies/lytenyte-pro/components";
18

19
export interface GridSpec {
20
  readonly data: OrderData;
21
}
22

23
const columns: Grid.Column<GridSpec>[] = [
24
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
25
  { id: "product", cellRenderer: ProductCell, width: 200, name: "Product" },
26
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100, name: "Price" },
27
  { id: "customer", cellRenderer: AvatarCell, width: 180, name: "Customer" },
28
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 130 },
29
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
30
  { id: "email", cellRenderer: EmailCell, width: 220, name: "Email" },
31
];
32

33
export default function ThemingDemo() {
34
  const [selections, setSelections] = useState<Grid.T.DataRect[]>([
35
    { rowStart: 1, rowEnd: 3, columnStart: 1, columnEnd: 3 },
36
  ]);
37

38
  const ds = useClientDataSource({ data: data });
39
  const [theme, setTheme] = useState("ln-dark");
40

41
  return (
42
    <div>
43
      <div className="bg-ln-gray-00 border-b-ln-border h-full w-full border-b py-2">
44
        <ThemePicker theme={theme} setTheme={setTheme} />
45
      </div>
46
      <div
47
        className={tw("ln-grid", theme)}
48
        style={{
49
          height: 500,
50
          colorScheme: theme.includes("light") || theme === "ln-cotton-candy" ? "light" : "dark",
51
        }}
52
      >
53
        <Grid
54
          rowHeight={50}
55
          columns={columns}
56
          rowSource={ds}
57
          slotShadows={ViewportShadows}
58
          cellSelections={selections}
59
          onCellSelectionChange={setSelections}
60
          cellSelectionMode="range"
61
        />
62
      </div>
63
    </div>
64
  );
65
}

1
import { format } from "date-fns";
2
import { type JSX, type ReactNode } from "react";
3
import type { Grid } from "@1771technologies/lytenyte-pro";
4
import type { GridSpec } from "./demo.jsx";
5

6
export function ProductCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
7
  if (!api.rowIsLeaf(row) || !row.data) return;
8

9
  const url = row.data?.productThumbnail;
10
  const title = row.data.product;
11
  const desc = row.data.productDescription;
12

13
  return (
14
    <div className="flex h-full w-full items-center gap-2">
15
      <img className="border-ln-border-strong h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
16
      <div className="text-ln-text-dark flex flex-col gap-0.5">
17
        <div className="font-semibold">{title}</div>
18
        <div className="text-ln-text-light text-xs">{desc}</div>
19
      </div>
20
    </div>
21
  );
22
}
23

24
export function AvatarCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
25
  if (!api.rowIsLeaf(row) || !row.data) return;
26

27
  const url = row.data?.customerAvatar;
28

29
  const name = row.data.customer;
30

31
  return (
32
    <div className="flex h-full w-full items-center gap-2">
33
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
34
      <div className="text-ln-text-dark flex flex-col gap-0.5">
35
        <div>{name}</div>
36
      </div>
37
    </div>
38
  );
39
}
40

41
const formatter = new Intl.NumberFormat("en-Us", {
42
  minimumFractionDigits: 2,
43
  maximumFractionDigits: 2,
44
});
45
export function PriceCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
46
  if (!api.rowIsLeaf(row) || !row.data) return;
47

48
  const price = formatter.format(row.data.price);
49
  const [dollars, cents] = price.split(".");
50

51
  return (
52
    <div className="flex h-full w-full items-center justify-end">
53
      <div className="flex items-baseline tabular-nums">
54
        <span className="text-ln-text font-semibold">${dollars}</span>.
55
        <span className="relative text-xs">{cents}</span>
56
      </div>
57
    </div>
58
  );
59
}
60

61
export function PurchaseDateCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
62
  if (!api.rowIsLeaf(row) || !row.data) return;
63

64
  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");
65

66
  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
67
}
68
export function IdCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
69
  if (!api.rowIsLeaf(row) || !row.data) return;
70

71
  return <div className="text-xs tabular-nums">{row.data.id}</div>;
72
}
73

74
export function PaymentMethodCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
75
  if (!api.rowIsLeaf(row) || !row.data) return;
76

77
  const cardNumber = row.data.cardNumber;
78
  const provider = row.data.paymentMethod;
79

80
  let Logo: ReactNode = null;
81
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
82
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;
83

84
  return (
85
    <div className="flex h-full w-full items-center gap-2">
86
      <div className="flex w-7 items-center justify-center">{Logo}</div>
87
      <div className="flex items-center gap-px">
88
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
89
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
90
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
91
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
92
      </div>
93
      <div className="tabular-nums">{cardNumber}</div>
94
    </div>
95
  );
96
}
97

98
export function EmailCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
99
  if (!api.rowIsLeaf(row) || !row.data) return;
100

101
  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
102
}
103

104
const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
105
  <svg xmlns="http://www.w3.org/2000/svg" width={2500} height={812} viewBox="0.5 0.5 999 323.684" {...props}>
106
    <path
107
      fill="#1434cb"
108
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
109
    />
110
  </svg>
111
);
112

113
const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
114
  <svg
115
    xmlns="http://www.w3.org/2000/svg"
116
    width={2500}
117
    height={1524}
118
    viewBox="55.2 38.3 464.5 287.8"
119
    {...props}
120
  >
121
    <path
122
      fill="#f79f1a"
123
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
124
    />
125
    <path
126
      fill="#ea001b"
127
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
128
    />
129
    <path
130
      fill="#ff5f01"
131
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
132
    />
133
  </svg>
134
);

1
import { ToggleGroup as TG } from "radix-ui";
2
import type { ClassValue } from "clsx";
3
import clsx from "clsx";
4
import { twMerge } from "tailwind-merge";
5

6
export function tw(...c: ClassValue[]) {
7
  return twMerge(clsx(...c));
8
}
9

10
export function ToggleGroup(props: Parameters<typeof TG.Root>[0]) {
11
  return (
12
    <TG.Root
13
      {...props}
14
      className={tw("bg-ln-gray-20 flex items-center gap-2 rounded-xl px-2 py-1", props.className)}
15
    ></TG.Root>
16
  );
17
}
18

19
export function ToggleItem(props: Parameters<typeof TG.Item>[0]) {
20
  return (
21
    <TG.Item
22
      {...props}
23
      className={tw(
24
        "text-ln-text flex cursor-pointer items-center justify-center px-2 py-1 text-xs font-bold outline-none focus:outline-none",
25
        "data-[state=on]:text-ln-text-dark data-[state=on]:bg-linear-to-b from-ln-gray-02 to-ln-gray-05 data-[state=on]:rounded-md",
26
        props.className,
27
      )}
28
    ></TG.Item>
29
  );
30
}
31

32
export function ThemePicker({ theme, setTheme }: { theme: string; setTheme: (s: string) => void }) {
33
  return (
34
    <div className={tw("flex h-full items-center gap-1 text-nowrap px-2 py-1")}>
35
      <div className={tw("text-light hidden text-xs font-medium md:block")}>Theme:</div>
36
      <ToggleGroup
37
        type="single"
38
        value={theme}
39
        className={tw("flex flex-wrap")}
40
        onValueChange={(c) => {
41
          if (!c) return;
42
          setTheme(c);
43
        }}
44
      >
45
        <ToggleItem value="ln-light">Light</ToggleItem>
46
        <ToggleItem value="ln-dark">Dark</ToggleItem>
47
        <ToggleItem value="ln-teal">LyteNyte Teal</ToggleItem>
48
        <ToggleItem value="ln-term">Term 256</ToggleItem>
49
        <ToggleItem value="ln-shadcn dark">Shadcn Dark</ToggleItem>
50
        <ToggleItem value="ln-shadcn light">Shadcn Light</ToggleItem>
51
        <ToggleItem value="ln-cotton-candy">Cotton Candy</ToggleItem>
52
      </ToggleGroup>
53
    </div>
54
  );
55
}

You can also create a custom theme from scratch. LyteNyte Grid is unopinionated about your styling method and works with any approach.

CSS Exports

LyteNyte Grid aims to minimize the final bundle size produced by your application, including the size of your bundled CSS. For this reason, the LyteNyte Grid packages export individual CSS themes so that unused themes can be excluded from your final CSS bundle. The exports are shown below with a comment explaining their purpose.

1
/*
2
  Contains the design theme token definitions for LyteNyte Grid, excluding colors.
3
  These tokens are used for spacing, fonts, and shadows.
4
 */
5
@import "@1771technologies/lytenyte-pro/design.css";
6

7
/*
8
  Contains the base grid styles. This export styles grid elements using the colors
9
  and tokens defined for the grid's theme.
10
*/
11
@import "@1771technologies/lytenyte-pro/grid.css";
12

13
/*
14
  These imports define the various color themes. Import them individually
15
  to include only the colors for a specific theme.
16
*/
17
@import "@1771technologies/lytenyte-pro/cotton-candy.css";
18
@import "@1771technologies/lytenyte-pro/dark.css";
19
@import "@1771technologies/lytenyte-pro/light.css";
20
@import "@1771technologies/lytenyte-pro/shadcn.css";
21
@import "@1771technologies/lytenyte-pro/teal.css";
22
@import "@1771technologies/lytenyte-pro/term.css";
23

24
/*
25
  Imports all predefined theme colors. Use this when you want to include
26
  all pre-made color themes in your application.
27
*/
28
@import "@1771technologies/lytenyte-pro/all-colors.css";
29

30
/*
31
  Imports all tokens, colors, and grid styles. This single import contains
32
  all pre-made CSS provided by LyteNyte Grid.
33
 */
34
@import "@1771technologies/lytenyte-pro/grid-full.css";
35

36
/*
37
  Contains the colors for the ln-light and ln-dark themes, but exports the light
38
  colors under the :root selector and the dark colors under the .dark class.
39
  Useful for a standard light/dark theme setup.
40
*/
41
@import "@1771technologies/lytenyte-pro/light-dark.css";

LyteNyte Design Tokens

The pre-built LyteNyte themes use a set of design tokens to maintain a consistent look and feel. These tokens are CSS variables that your application can modify to augment or adjust the existing themes.

See the design.css file in our GitHub repository for the definitions of the non-color design tokens.
See the ln-dark.css file in our GitHub repository for the definitions of the color design tokens. All themes use the same set of color token names.

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.

1
import "./demo.css";
25 collapsed lines
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
4
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
5

6
interface GridSpec {
7
  readonly data: BankData;
8
}
9

10
const columns: Grid.Column<GridSpec>[] = [
11
  { name: "Job", id: "job", width: 120 },
12
  { name: "Age", id: "age", type: "number", width: 80, cellRenderer: NumberCell },
13
  { name: "Balance", id: "balance", type: "number", cellRenderer: BalanceCell },
14
  { name: "Education", id: "education" },
15
  { name: "Marital", id: "marital" },
16
  { name: "Default", id: "default" },
17
  { name: "Housing", id: "housing" },
18
  { name: "Loan", id: "loan" },
19
  { name: "Contact", id: "contact" },
20
  { name: "Day", id: "day", type: "number", cellRenderer: NumberCell },
21
  { name: "Month", id: "month" },
22
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
23
];
24

25
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
26

27
export default function ThemingDemo() {
28
  const ds = useClientDataSource({ data: bankDataSmall });
29

30
  return (
31
    <div className="data-styles">
32
      <div style={{ height: 500 }}>
33
        <Grid rowSource={ds} columns={columns} columnBase={base} />
34
      </div>
35
    </div>
36
  );
37
}
38

28 collapsed lines
39
export type BankData = (typeof bankDataSmall)[number];
40

41
const formatter = new Intl.NumberFormat("en-US", {
42
  maximumFractionDigits: 2,
43
  minimumFractionDigits: 0,
44
});
45
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
46
  const field = api.columnField(column, row);
47

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

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

54
  return `${field ?? "-"}`;
55
}
56
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
57
  const field = api.columnField(column, row);
58

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

62
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
63
  const field = api.columnField(column, row);
64

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

1
.data-styles {
2
  [data-ln-type="number"] {
3
    justify-content: end;
4
  }
5

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

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

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

The CSS uses the attribute selector, as shown below:

1
.data-styles {
2
  [data-ln-type="number"] {
3
    justify-content: end;
4
  }
5

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

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

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

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.

Styling With Classes

demo.tsx
demo.css

1
import "./demo.css";
25 collapsed lines
2
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4

5
export type BankData = (typeof bankDataSmall)[number];
6
interface GridSpec {
7
  readonly data: BankData;
8
}
9

10
const columns: Grid.Column<GridSpec>[] = [
11
  { name: "Job", id: "job", width: 120 },
12
  { name: "Age", id: "age", type: "number", width: 80, cellRenderer: NumberCell },
13
  { name: "Balance", id: "balance", type: "number", cellRenderer: BalanceCell },
14
  { name: "Education", id: "education" },
15
  { name: "Marital", id: "marital" },
16
  { name: "Default", id: "default" },
17
  { name: "Housing", id: "housing" },
18
  { name: "Loan", id: "loan" },
19
  { name: "Contact", id: "contact" },
20
  { name: "Day", id: "day", type: "number", cellRenderer: NumberCell },
21
  { name: "Month", id: "month" },
22
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
23
];
24

25
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
26

27
export default function ThemingDemo() {
28
  const ds = useClientDataSource({ data: bankDataSmall });
29

30
  return (
31
    <div className="classes">
32
      <div style={{ height: 500 }}>
33
        <Grid rowSource={ds} columns={columns} columnBase={base}>
34
          <Grid.Viewport>
35
            <Grid.Header>
36
              {(cells) => {
37
                return (
38
                  <Grid.HeaderRow>
39
                    {cells.map((cell) => {
40
                      if (cell.kind === "group") return null;
41

42
                      return <Grid.HeaderCell key={cell.id} cell={cell} className="header-cell" />;
43
                    })}
44
                  </Grid.HeaderRow>
45
                );
46
              }}
47
            </Grid.Header>
48
            <Grid.RowsContainer>
49
              <Grid.RowsCenter>
50
                {(row) => {
51
                  if (row.kind === "full-width") return null;
52

53
                  return (
54
                    <Grid.Row row={row}>
55
                      {row.cells.map((cell) => {
56
                        return <Grid.Cell cell={cell} key={cell.id} className="cell" />;
57
                      })}
58
                    </Grid.Row>
59
                  );
60
                }}
61
              </Grid.RowsCenter>
62
            </Grid.RowsContainer>
63
          </Grid.Viewport>
64
        </Grid>
65
      </div>
66
    </div>
67
  );
68
}
69

27 collapsed lines
70

71
const formatter = new Intl.NumberFormat("en-US", {
72
  maximumFractionDigits: 2,
73
  minimumFractionDigits: 0,
74
});
75
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
76
  const field = api.columnField(column, row);
77

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

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

84
  return `${field ?? "-"}`;
85
}
86
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
87
  const field = api.columnField(column, row);
88

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

92
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
93
  const field = api.columnField(column, row);
94

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

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

11
    &[data-ln-type="number"] {
12
      justify-content: flex-end;
13
    }
14
  }
15

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

20
  .header-cell {
21
    display: flex;
22
    align-items: center;
23
    padding-inline: 8px;
24
    background-color: light-dark(hsla(175, 12%, 92%, 1), hsla(177, 19%, 17%, 1));
25
    color: light-dark(hsla(177, 19%, 17%, 1), hsla(175, 12%, 92%, 1));
26
    text-transform: capitalize;
27
    font-size: 14px;
28

29
    &[data-ln-type="number"] {
30
      justify-content: flex-end;
31
    }
32
  }
33
}

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

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

11
    &[data-ln-type="number"] {
12
      justify-content: flex-end;
13
    }
14
  }
15

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

20
  .header-cell {
21
    display: flex;
22
    align-items: center;
23
    padding-inline: 8px;
24
    background-color: light-dark(hsla(175, 12%, 92%, 1), hsla(177, 19%, 17%, 1));
25
    color: light-dark(hsla(177, 19%, 17%, 1), hsla(175, 12%, 92%, 1));
26
    text-transform: capitalize;
27
    font-size: 14px;
28

29
    &[data-ln-type="number"] {
30
      justify-content: flex-end;
31
    }
32
  }
33
}

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

demo.tsx


26 collapsed lines
1
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
2
import { useState } from "react";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4

5
export type BankData = (typeof bankDataSmall)[number];
6
interface GridSpec {
7
  readonly data: BankData;
8
}
9

10
const columns: Grid.Column<GridSpec>[] = [
11
  { name: "Job", id: "job", width: 120 },
12
  { name: "Age", id: "age", type: "number", width: 80, cellRenderer: NumberCell },
13
  { name: "Balance", id: "balance", type: "number", cellRenderer: BalanceCell },
14
  { name: "Education", id: "education" },
15
  { name: "Marital", id: "marital" },
16
  { name: "Default", id: "default" },
17
  { name: "Housing", id: "housing" },
18
  { name: "Loan", id: "loan" },
19
  { name: "Contact", id: "contact" },
20
  { name: "Day", id: "day", type: "number", cellRenderer: NumberCell },
21
  { name: "Month", id: "month" },
22
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
23
];
24

25
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
26

27
export default function ThemingDemo() {
28
  const ds = useClientDataSource({ data: bankDataSmall });
29

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

35
  return (
36
    <div>
53 collapsed lines
37
      <div className="flex flex-col gap-2 px-2 pb-4 pt-2">
38
        <div className="grid grid-cols-2 gap-2 2xl:grid-cols-4 2xl:gap-8">
39
          <label className="flex flex-col">
40
            <span className="pl-1 text-sm font-bold">Cell Background</span>
41
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
42
              <input
43
                type="color"
44
                className="h-6 w-6 border-transparent shadow-none"
45
                value={cellBg}
46
                onChange={(e) => setCellBg(e.target.value)}
47
              />
48
              <div className="text-sm">{cellBg}</div>
49
            </div>
50
          </label>
51
          <label className="flex flex-col">
52
            <span className="px-1 text-sm font-bold">Cell Text</span>
53
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
54
              <input
55
                type="color"
56
                className="h-6 w-6 border-transparent shadow-none"
57
                value={cellFg}
58
                onChange={(e) => setCellFg(e.target.value)}
59
              />
60
              <div className="text-sm">{cellFg}</div>
61
            </div>
62
          </label>
63

64
          <label className="flex flex-col">
65
            <span className="pl-1 text-sm font-bold">Header Background</span>
66
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
67
              <input
68
                type="color"
69
                className="h-6 w-6 border-transparent shadow-none"
70
                value={headerBg}
71
                onChange={(e) => setHeaderBg(e.target.value)}
72
              />
73
              <div className="text-sm">{headerBg}</div>
74
            </div>
75
          </label>
76
          <label className="flex flex-col">
77
            <span className="pl-1 text-sm font-bold">Header Text</span>
78
            <div className="flex items-center gap-2 rounded-lg border border-gray-400 px-2 py-1 dark:border-gray-200">
79
              <input
80
                type="color"
81
                className="h-6 w-6 border-transparent shadow-none"
82
                value={headerFg}
83
                onChange={(e) => setHeaderFg(e.target.value)}
84
              />
85
              <div className="text-sm">{headerFg}</div>
86
            </div>
87
          </label>
88
        </div>
89
      </div>
90
      <div style={{ height: 500 }}>
91
        <Grid rowSource={ds} columns={columns} columnBase={base}>
92
          <Grid.Viewport>
93
            <Grid.Header>
94
              {(cells) => {
95
                return (
96
                  <Grid.HeaderRow>
97
                    {cells.map((cell) => {
98
                      if (cell.kind === "group") return null;
99

100
                      return (
101
                        <Grid.HeaderCell
102
                          key={cell.id}
103
                          cell={cell}
104
                          style={{
105
                            display: "flex",
106
                            alignItems: "center",
107
                            paddingInline: "8px",
108
                            justifyContent: cell.type === "number" ? "flex-end" : "flex-start",
109
                            fontSize: 14,
110
                            background: headerBg,
111
                            color: headerFg,
112
                            textTransform: "capitalize",
113
                          }}
114
                        />
115
                      );
116
                    })}
117
                  </Grid.HeaderRow>
118
                );
119
              }}
120
            </Grid.Header>
121
            <Grid.RowsContainer>
122
              <Grid.RowsCenter>
123
                {(row) => {
124
                  if (row.kind === "full-width") return null;
125

126
                  return (
127
                    <Grid.Row row={row}>
128
                      {row.cells.map((cell) => {
129
                        return (
130
                          <Grid.Cell
131
                            key={cell.id}
132
                            cell={cell}
133
                            style={{
134
                              display: "flex",
135
                              alignItems: "center",
136
                              paddingInline: "8px",
137
                              justifyContent: cell.type === "number" ? "flex-end" : "flex-start",
138
                              fontSize: 14,
139
                              background: cellBg,
140
                              color: cellFg,
141
                              borderBottom: "1px solid hsla(177, 19%, 17%, 1)",
142
                            }}
143
                          />
144
                        );
145
                      })}
146
                    </Grid.Row>
147
                  );
148
                }}
149
              </Grid.RowsCenter>
150
            </Grid.RowsContainer>
151
          </Grid.Viewport>
152
        </Grid>
153
      </div>
154
    </div>
155
  );
156
}
157

26 collapsed lines
158
const formatter = new Intl.NumberFormat("en-US", {
159
  maximumFractionDigits: 2,
160
  minimumFractionDigits: 0,
161
});
162
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
163
  const field = api.columnField(column, row);
164

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

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

171
  return `${field ?? "-"}`;
172
}
173
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
174
  const field = api.columnField(column, row);
175

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

179
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
180
  const field = api.columnField(column, row);
181

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

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

1
<Grid.Cell
2
  key={cell.id}
3
  cell={cell}
4
  style={{
5
    display: "flex",
6
    alignItems: "center",
7
    paddingInline: "8px",
8
    justifyContent: cell.type === "number" ? "flex-end" : "flex-start",
9
    fontSize: 14,
10
    background: cellBg,
11
    color: cellFg,
12
    borderBottom: "1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1))",
13
  }}
14
/>

Info

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

demo.tsx
demo.css


37 collapsed lines
1
import "./demo.css";
2
import { companiesWithPricePerf } from "@1771technologies/grid-sample-data/companies-with-price-performance";
3
import { useMemo } from "react";
4
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
5
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
6

7
type PerformanceData = (typeof companiesWithPricePerf)[number];
8
export interface GridSpec {
9
  readonly data: PerformanceData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { id: "Company", widthFlex: 2 },
14
  { id: "Country", widthFlex: 2 },
15
  { id: "Founded", type: "number" },
16
  { id: "Employee Cnt", name: "Employees", type: "number", cellRenderer: NumberCell },
17
  { id: "Price", type: "number", cellRenderer: PriceCell },
18
];
19

20
const rowDetailExpansions = new Set(["leaf-0"]);
21
const rowDetailRenderer: Grid.Props<GridSpec>["rowDetailRenderer"] = (p) => {
22
  if (!p.api.rowIsLeaf(p.row)) return;
23
  return (
24
    <div
25
      style={{
26
        width: "100%",
27
        height: "100%",
28
        boxSizing: "border-box",
29
        padding: "20px 20px 20px 0px",
30
      }}
31
    >
32
      <PriceChart row={p.row} />
33
    </div>
34
  );
35
};
36
const base: Grid.ColumnBase<GridSpec> = { width: 100, widthFlex: 1 };
37

38
export default function ThemingDemo() {
39
  const ds = useClientDataSource({
40
    data: companiesWithPricePerf,
41
  });
42

43
  return (
44
    <div style={{ height: 500 }} className="detail-styles">
45
      <Grid
46
        columns={columns}
47
        columnBase={base}
48
        rowSource={ds}
49
        rowDetailRenderer={rowDetailRenderer}
50
        rowDetailExpansions={rowDetailExpansions}
51
        rowDetailHeight={300}
52
      />
53
    </div>
54
  );
55
}
76 collapsed lines
56

57
function PriceChart({ row }: { row: Grid.T.RowLeaf<GridSpec["data"]> }) {
58
  const data = useMemo(() => {
59
    if (!row.data) return [];
60
    const weeks: Record<string, { week: number; [key: string]: number }> = Object.fromEntries(
61
      Array.from({ length: 52 }, (_, i) => [i + 1, { week: i + 1 }]),
62
    );
63

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

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

72
  return (
73
    <ResponsiveContainer height="100%" width="100%">
74
      <AreaChart data={data}>
75
        <defs>
76
          <linearGradient key={row.id} id={row.id} x1="0" y1="0" x2="0" y2="1">
77
            <stop offset="5%" stopColor={color.stop5} stopOpacity={0.8} />
78
            <stop offset="95%" stopColor={color.stop95} stopOpacity={0} />
79
          </linearGradient>
80
        </defs>
81
        <XAxis
82
          dataKey="week"
83
          ticks={[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]}
84
          fontSize="14px"
85
          tickLine={false}
86
        />
87
        <YAxis fontFamily="Inter" fontSize="14px" tickLine={false} axisLine={false} />
88
        <CartesianGrid vertical={false} stroke="var(--ln-border)" />
89

90
        <Area
91
          key={row.id}
92
          type="monotone"
93
          dataKey={row.id}
94
          stroke={color.solid}
95
          strokeWidth={3}
96
          fillOpacity={1}
97
          fill={`url(#${row.id})`}
98
        />
99
      </AreaChart>
100
    </ResponsiveContainer>
101
  );
102
}
103
const color = {
104
  name: "Ruby Red",
105
  solid: "#CC5500",
106
  stop5: "#CC5500",
107
  stop95: "transparent",
108
};
109

110
const formatter = new Intl.NumberFormat("en-US", {
111
  maximumFractionDigits: 2,
112
  minimumFractionDigits: 0,
113
});
114

115
export function PriceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
116
  const field = api.columnField(column, row);
117

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

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

124
  return `${field ?? "-"}`;
125
}
126

127
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
128
  const field = api.columnField(column, row);
129

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

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

11
    &[data-ln-type="number"] {
12
      justify-content: end;
13
    }
14
  }
15

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

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

29
    &[data-ln-type="number"] {
30
      justify-content: end;
31
    }
32
  }
33

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

37
    & > div {
38
      border: 1px solid light-dark(rgb(216, 202, 202), rgb(62, 54, 54));
39
      border-radius: 8px;
40
      background-color: light-dark(white, transparent);
41
    }
42
  }
43
}

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.

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

4
  & > div {
5
    border: 1px solid light-dark(rgb(216, 202, 202), rgb(62, 54, 54));
6
    border-radius: 8px;
7
    background-color: light-dark(white, transparent);
8
  }
9
}

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

demo.tsx
demo.css

1
import "./demo.css";
27 collapsed lines
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
4
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
5
import { useState } from "react";
6

7
export type BankData = (typeof bankDataSmall)[number];
8
interface GridSpec {
9
  readonly data: BankData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { name: "Job", id: "job", width: 120 },
14
  { name: "Age", id: "age", type: "number", width: 80, cellRenderer: NumberCell },
15
  { name: "Balance", id: "balance", type: "number", cellRenderer: BalanceCell },
16
  { name: "Education", id: "education" },
17
  { name: "Marital", id: "marital" },
18
  { name: "Default", id: "default" },
19
  { name: "Housing", id: "housing" },
20
  { name: "Loan", id: "loan" },
21
  { name: "Contact", id: "contact" },
22
  { name: "Day", id: "day", type: "number", cellRenderer: NumberCell },
23
  { name: "Month", id: "month" },
24
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
25
];
26

27
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
28

29

30
export default function ThemingDemo() {
31
  const [selections, setSelections] = useState([{ rowStart: 4, rowEnd: 7, columnStart: 2, columnEnd: 4 }]);
32
  const ds = useClientDataSource({ data: bankDataSmall });
33

34
  return (
35
    <div className="cell-styles">
36
      <div style={{ height: 500 }}>
37
        <Grid
38
          rowSource={ds}
39
          columns={columns}
40
          columnBase={base}
41
          cellSelectionMode="range"
42
          cellSelections={selections}
43
          onCellSelectionChange={setSelections}
44
        />
45
      </div>
46
    </div>
47
  );
48
}
49

27 collapsed lines
50

51
const formatter = new Intl.NumberFormat("en-US", {
52
  maximumFractionDigits: 2,
53
  minimumFractionDigits: 0,
54
});
55
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
56
  const field = api.columnField(column, row);
57

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

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

64
  return `${field ?? "-"}`;
65
}
66
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
67
  const field = api.columnField(column, row);
68

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

72
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
73
  const field = api.columnField(column, row);
74

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

1
.cell-styles {
2
  user-select: none;
3
  -webkit-user-select: none;
4
  -ms-user-select: none;
5
  -moz-user-select: none;
6

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

16
    &[data-ln-type="number"] {
17
      justify-content: end;
18
    }
19
  }
20

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

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

34
    &[data-ln-type="number"] {
35
      justify-content: end;
36
    }
37
  }
38

39
  [data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
40
    background-color: rgba(0, 0, 255, 0.08);
41
    box-sizing: border-box;
42

43
    &[data-ln-cell-selection-border-top="true"] {
44
      border-top: 1px solid rgba(0, 0, 255, 1);
45
    }
46
    &[data-ln-cell-selection-border-bottom="true"] {
47
      border-bottom: 1px solid rgba(0, 0, 255, 1);
48
    }
49
    &[data-ln-cell-selection-border-start="true"] {
50
      border-inline-start: 1px solid rgba(0, 0, 255, 1);
51
    }
52
    &[data-ln-cell-selection-border-end="true"] {
53
      border-inline-end: 1px solid rgba(0, 0, 255, 1);
54
    }
55
  }
56
  [data-ln-cell-selection-rect][data-ln-cell-selection-is-unit="true"] {
57
    outline: 1px solid rgba(0, 0, 255, 1);
58
    outline-offset: -1px;
59
  }
60
}

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.

1
[data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
2
  background-color: rgba(0, 0, 255, 0.08);
3
  box-sizing: border-box;
4

5
  &[data-ln-cell-selection-border-top="true"] {
6
    border-top: 1px solid rgba(0, 0, 255, 1);
7
  }
8
  &[data-ln-cell-selection-border-bottom="true"] {
9
    border-bottom: 1px solid rgba(0, 0, 255, 1);
10
  }
11
  &[data-ln-cell-selection-border-start="true"] {
12
    border-inline-start: 1px solid rgba(0, 0, 255, 1);
13
  }
14
  &[data-ln-cell-selection-border-end="true"] {
15
    border-inline-end: 1px solid rgba(0, 0, 255, 1);
16
  }
17
}
18
[data-ln-cell-selection-rect][data-ln-cell-selection-is-unit="true"] {
19
  outline: 1px solid rgba(0, 0, 255, 1);
20
  outline-offset: -1px;
21
}

Style Overrides

LyteNyte Grid is headless, but the default view setup is usually the recommended way to render grid cells. Sometimes you need to apply styles directly to a cell or header, and normal CSS selectors are insufficient (see the sticky column group labels demo for an example). In these cases, use the styles property on the grid to apply CSS classes or inline styles to specific grid components.

This is demonstrated in the example code below:

Style Overrides
Full Headless Mode

1
<Grid
2
  styles={{
3
    headerGroup: {
4
      style: {
5
        position: "sticky",
6
        insetInlineStart: "var(--ln-start-offset)",
7
        overflow: "unset",
8
      },
9
    },
10
  }}
11
/>

1
<Grid>
2
  <Grid.Viewport>
3
    <Grid.Header>
4
      {(cells) => {
5
        return (
6
          <Grid.HeaderRow>
7
            {cells.map((c) => {
8
              if (c.kind === "group")
9
                return (
10
                  <Grid.HeaderGroupCell
11
                    cell={c}
12
                    key={c.idOccurrence}
13
                    style={{
14
                      position: "sticky",
15
                      insetInlineStart: "var(--ln-start-offset)",
16
                      overflow: "unset",
17
                    }}
18
                  />
19
                );
20

21
              return <Grid.HeaderCell cell={c} key={c.id} />;
22
            })}
23
          </Grid.HeaderRow>
24
        );
25
      }}
26
    </Grid.Header>
27

28
    <Grid.RowsContainer>
29
      <Grid.RowsTop />
30
      <Grid.RowsCenter />
31
      <Grid.RowsBottom />
32
    </Grid.RowsContainer>
33
  </Grid.Viewport>
34
</Grid>

Both approaches are equivalent, and you do not pay a performance penalty for choosing one over the other. You also do not need to memoize the styles property. LyteNyte Grid diffs the styles object and notifies cells when the styles change.

For more guidance on the headless setup of LyteNyte Grid, see the Headless Component Parts guide.

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.

Grid Theming

Info

Pre-built LyteNyte Grid Themes

Data Attribute Styling

Styling With Classes

Inline Styles

Info

Styling Row Detail

Cell Selection Styling

On this page