Theming

Grid Theming With Tailwind

Tailwind can be used to style LyteNyte Grid. This guide explains how to set up Tailwind and apply it to grid elements.

This guide uses Tailwind as an atomic CSS framework for styling LyteNyte Grid because it is the most popular option. The approach described here also works with other atomic CSS frameworks, such as UnoCSS.

Info

We highly recommend reading the general Grid Theming guide first to understand the styling options available in LyteNyte Grid.

This guide assumes you are using Tailwind v4. Translating the examples back to Tailwind v3 is straightforward.

Tailwind Theming Setup

Start by setting up Tailwind. The exact steps depend on your React framework. See Tailwind’s Installation guide for framework-specific details.

This guide assumes you have Tailwind configured with the default setup, and a CSS file that contains:

1
@import "tailwindcss";

If you are not sure which framework to use, we recommend starting with Vite. The project setup is simple and Tailwind is supported by an official plugin.

Applying Tailwind Classes

LyteNyte Grid exposes a set of headless components that you use to build the grid view. These components accept standard HTML and React props, including className. As a result, styling the grid with Tailwind is as simple as applying utility classes.

The example below demonstrates this using the standard Tailwind color palette:

Styling With Tailwind

demo.tsx


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

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

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

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

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

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

41
                      return (
42
                        <Grid.HeaderCell
43
                          key={cell.id}
44
                          cell={cell}
45
                          className={
46
                            "flex items-center border-b border-neutral-100 bg-neutral-200 px-2 text-sm capitalize text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100" +
47
                            (cell.type === "number" ? " justify-end" : "")
48
                          }
49
                        />
50
                      );
51
                    })}
52
                  </Grid.HeaderRow>
53
                );
54
              }}
55
            </Grid.Header>
56
            <Grid.RowsContainer>
57
              <Grid.RowsCenter>
58
                {(row) => {
59
                  if (row.kind === "full-width") return null;
60

61
                  return (
62
                    <Grid.Row row={row} className="group">
63
                      {row.cells.map((cell) => {
64
                        return (
65
                          <Grid.Cell
66
                            key={cell.id}
67
                            cell={cell}
68
                            className={
69
                              "flex items-center border-b border-neutral-200 bg-white px-2 text-sm text-neutral-800 group-data-[ln-alternate=true]:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:group-data-[ln-alternate=true]:bg-neutral-950" +
70
                              (cell.type === "number" ? " justify-end tabular-nums" : "")
71
                            }
72
                          />
73
                        );
74
                      })}
75
                    </Grid.Row>
76
                  );
77
                }}
78
              </Grid.RowsCenter>
79
            </Grid.RowsContainer>
80
          </Grid.Viewport>
81
        </Grid>
82
      </div>
83
    </div>
84
  );
85
}
86

27 collapsed lines
87

88
const formatter = new Intl.NumberFormat("en-US", {
89
  maximumFractionDigits: 2,
90
  minimumFractionDigits: 0,
91
});
92
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
93
  const field = api.columnField(column, row);
94

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

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

101
  return `${field ?? "-"}`;
102
}
103
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
104
  const field = api.columnField(column, row);
105

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

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

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

In the example, Tailwind classes are applied in the usual way. No special configuration is required. For example, the Grid.Cell component is styled as follows:

1
<Grid.Cell key={c.id} cell={c} className="flex items-center bg-gray-50 px-2 text-sm text-gray-800" />

Class Variance Authority

Directly applying classes to elements works well for simple styling, but it does not scale when there is a lot of conditional styling being applied. Tailwind utility helpers can make conditional styles easier to manage. The approach here uses three libraries:

Start by creating a tw utility function that combines clsx and tailwind-merge:

1
import type { ClassValue } from "clsx";
2
import clsx from "clsx";
3
import { twMerge } from "tailwind-merge";
4

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

Info

If you already use a Tailwind-based framework such as shadcn/ui, a similar tw function may already exist, often named cn in shadcn/ui projects.

Next, define grid-cell variants using class-variance-authority:

1
const cellStyles = cva("flex items-center px-2", {
2
  variants: {
3
    number: {
4
      true: "justify-end tabular-nums",
5
    },
6
    rowBase: {
7
      true: "border-b border-neutral-200 bg-white text-sm text-neutral-800 group-data-[ln-alternate=true]:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:group-data-[ln-alternate=true]:bg-neutral-950",
8
    },
9
    header: {
10
      true: "border-b border-neutral-100 bg-neutral-200 text-sm capitalize text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100",
11
    },
12
  },
13
});

The cellStyles function now returns the base classes and applies variants on top for different grid-cell states.

The example below shows how to combine Tailwind, tw, and cva to provide rich, composable grid styles:

Tailwind Styling With CVA

demo.tsx


28 collapsed lines
1
import { cva } from "class-variance-authority";
2
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { clsx, type ClassValue } from "clsx";
5
import { twMerge } from "tailwind-merge";
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 function tw(...c: ClassValue[]) {
31
  return twMerge(clsx(...c));
32
}
33

34
const cellStyles = cva("flex items-center px-2", {
35
  variants: {
36
    number: {
37
      true: "justify-end tabular-nums",
38
    },
39
    rowBase: {
40
      true: "border-b border-neutral-200 bg-white text-sm text-neutral-800 group-data-[ln-alternate=true]:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:group-data-[ln-alternate=true]:bg-neutral-950",
41
    },
42
    header: {
43
      true: "border-b border-neutral-100 bg-neutral-200 text-sm capitalize text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100",
44
    },
45
  },
46
});
47

48
export default function ThemingDemo() {
49
  const ds = useClientDataSource({ data: bankDataSmall });
50

51
  return (
52
    <div className="classes">
53
      <div style={{ height: 500 }}>
54
        <Grid rowSource={ds} columns={columns} columnBase={base}>
55
          <Grid.Viewport>
56
            <Grid.Header>
57
              {(cells) => {
58
                return (
59
                  <Grid.HeaderRow>
60
                    {cells.map((cell) => {
61
                      if (cell.kind === "group") return null;
62

63
                      return (
64
                        <Grid.HeaderCell
65
                          key={cell.id}
66
                          cell={cell}
67
                          className={tw(cellStyles({ number: cell.type === "number", header: true }))}
68
                        />
69
                      );
70
                    })}
71
                  </Grid.HeaderRow>
72
                );
73
              }}
74
            </Grid.Header>
75
            <Grid.RowsContainer>
76
              <Grid.RowsCenter>
77
                {(row) => {
78
                  if (row.kind === "full-width") return null;
79

80
                  return (
81
                    <Grid.Row row={row} className="group">
82
                      {row.cells.map((cell) => {
83
                        return (
84
                          <Grid.Cell
85
                            key={cell.id}
86
                            cell={cell}
87
                            className={tw(
88
                              cellStyles({
89
                                number: cell.type === "number",
90
                                rowBase: true,
91
                              }),
92
                            )}
93
                          />
94
                        );
95
                      })}
96
                    </Grid.Row>
97
                  );
98
                }}
99
              </Grid.RowsCenter>
100
            </Grid.RowsContainer>
101
          </Grid.Viewport>
102
        </Grid>
103
      </div>
104
    </div>
105
  );
106
}
107

27 collapsed lines
108

109
const formatter = new Intl.NumberFormat("en-US", {
110
  maximumFractionDigits: 2,
111
  minimumFractionDigits: 0,
112
});
113
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
114
  const field = api.columnField(column, row);
115

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

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

122
  return `${field ?? "-"}`;
123
}
124
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
125
  const field = api.columnField(column, row);
126

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

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

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

Notice how the CVA-generated style is applied to the grid cell:

1
<Grid.Cell
2
  key={cell.id}
3
  cell={cell}
4
  className={tw(
5
    cellStyles({
6
      number: cell.type === "number",
7
      rowBase: true,
8
    }),
9
  )}
10
/>

This pattern keeps styles consistent and makes it easy to maintain variants over a shared base.

Styling Elements Not Directly Exposed

The Grid Theming guide explains that some elements are not directly exposed through LyteNyte Grid’s public component interface. You must style these elements using data attributes or other selectors.

You can still target these elements with Tailwind by using more advanced selector syntax. This section shows how to style the row-detail element and the cell selection ranges with Tailwind.

Styling Row Detail

To style the row-detail element with Tailwind, target the element that has the data-ln-row-detail attribute. You can do this without a separate CSS file by using Tailwind’s arbitrary variant selector syntax.

Tailwind Styling Row Detail

demo.tsx


36 collapsed lines
1
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
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

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

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

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

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

42
  return (
43
    <div style={{ height: 500 }}>
44
      <Grid
45
        columns={columns}
46
        columnBase={base}
47
        rowSource={ds}
48
        rowDetailRenderer={rowDetailRenderer}
49
        rowDetailExpansions={rowDetailExpansions}
50
        rowDetailHeight={300}
51
      >
52
        <Grid.Viewport>
53
          <Grid.Header>
54
            {(cells) => {
55
              return (
56
                <Grid.HeaderRow>
57
                  {cells.map((cell) => {
58
                    if (cell.kind === "group") return null;
59

60
                    return (
61
                      <Grid.HeaderCell
62
                        key={cell.id}
63
                        cell={cell}
64
                        className={
65
                          "flex items-center border-b border-neutral-100 bg-neutral-200 px-2 text-sm capitalize text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100" +
66
                          (cell.type === "number" ? " justify-end" : "")
67
                        }
68
                      />
69
                    );
70
                  })}
71
                </Grid.HeaderRow>
72
              );
73
            }}
74
          </Grid.Header>
75
          <Grid.RowsContainer>
76
            <Grid.RowsCenter>
77
              {(row) => {
78
                if (row.kind === "full-width") return null;
79

80
                return (
81
                  <Grid.Row
82
                    row={row}
83
                    className='**:data-[ln-row-detail="true"]:p-7 group [&_[data-ln-row-detail="true"]>div]:rounded-lg [&_[data-ln-row-detail="true"]>div]:border [&_[data-ln-row-detail="true"]>div]:border-neutral-200 dark:[&_[data-ln-row-detail="true"]>div]:border-neutral-700'
84
                  >
85
                    {row.cells.map((cell) => {
86
                      return (
87
                        <Grid.Cell
88
                          key={cell.id}
89
                          cell={cell}
90
                          className={
91
                            "flex items-center border-b border-neutral-200 bg-white px-2 text-sm text-neutral-800 group-data-[ln-alternate=true]:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:group-data-[ln-alternate=true]:bg-neutral-950" +
92
                            (cell.type === "number" ? " justify-end tabular-nums" : "")
93
                          }
94
                        />
95
                      );
96
                    })}
97
                  </Grid.Row>
98
                );
99
              }}
100
            </Grid.RowsCenter>
101
          </Grid.RowsContainer>
102
        </Grid.Viewport>
103
      </Grid>
104
    </div>
105
  );
106
}
76 collapsed lines
107

108
function PriceChart({ row }: { row: Grid.T.RowLeaf<GridSpec["data"]> }) {
109
  const data = useMemo(() => {
110
    if (!row.data) return [];
111
    const weeks: Record<string, { week: number; [key: string]: number }> = Object.fromEntries(
112
      Array.from({ length: 52 }, (_, i) => [i + 1, { week: i + 1 }]),
113
    );
114

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

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

123
  return (
124
    <ResponsiveContainer height="100%" width="100%">
125
      <AreaChart data={data}>
126
        <defs>
127
          <linearGradient key={row.id} id={row.id} x1="0" y1="0" x2="0" y2="1">
128
            <stop offset="5%" stopColor={color.stop5} stopOpacity={0.8} />
129
            <stop offset="95%" stopColor={color.stop95} stopOpacity={0} />
130
          </linearGradient>
131
        </defs>
132
        <XAxis
133
          dataKey="week"
134
          ticks={[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]}
135
          fontSize="14px"
136
          tickLine={false}
137
        />
138
        <YAxis fontFamily="Inter" fontSize="14px" tickLine={false} axisLine={false} />
139
        <CartesianGrid vertical={false} stroke="var(--ln-border)" />
140

141
        <Area
142
          key={row.id}
143
          type="monotone"
144
          dataKey={row.id}
145
          stroke={color.solid}
146
          strokeWidth={3}
147
          fillOpacity={1}
148
          fill={`url(#${row.id})`}
149
        />
150
      </AreaChart>
151
    </ResponsiveContainer>
152
  );
153
}
154
const color = {
155
  name: "Ruby Red",
156
  solid: "#CC5500",
157
  stop5: "#CC5500",
158
  stop95: "transparent",
159
};
160

161
const formatter = new Intl.NumberFormat("en-US", {
162
  maximumFractionDigits: 2,
163
  minimumFractionDigits: 0,
164
});
165

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

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

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

175
  return `${field ?? "-"}`;
176
}
177

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

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

The selector (shown below) looks complex but it is straightforward. The & symbol refers to the current element. The [data-ln-row-detail="true"] portion selects the descendant that has the matching data attribute. Finally, >div selects the div that is a direct descendant. If you are unfamiliar with this syntax, see Tailwind’s guide on arbitrary variants.

1
<Grid.Row
2
  row={row}
3
  className={tw(
4
    '**:data-[ln-row-detail="true"]:p-7 [&_[data-ln-row-detail="true"]>div]:rounded-lg',
5
    '[&_[data-ln-row-detail="true"]>div]:border',
6
    '[&_[data-ln-row-detail="true"]>div]:border-neutral-200',
7
    'dark:[&_[data-ln-row-detail="true"]>div]:border-neutral-700',
8
  )}
9
/>

This example styles the row-detail element inline. You can also move these styles into a separate CSS file and target the same data attribute selectors there. Tailwind compiles down to vanilla CSS, so both approaches work.

Styling Cell Selection Ranges

You can style cell-selection rectangles using arbitrary Tailwind selectors in a similar way. In this case, you place the selector on the rows container rather than on each row. The example below demonstrates this:

Cell Selection Styling With Tailwind

demo.tsx


31 collapsed lines
1
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { clsx, type ClassValue } from "clsx";
4
import { useState } from "react";
5
import { twMerge } from "tailwind-merge";
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
function tw(...c: ClassValue[]) {
30
  return twMerge(clsx(...c));
31
}
32

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

37
  return (
38
    <div>
39
      <div style={{ height: 500 }} className="select-none">
40
        <Grid
41
          rowSource={ds}
42
          columns={columns}
43
          columnBase={base}
44
          cellSelectionMode="range"
45
          cellSelections={selections}
46
          onCellSelectionChange={setSelections}
47
        >
48
          <Grid.Viewport>
49
            <Grid.Header>
50
              {(cells) => {
51
                return (
52
                  <Grid.HeaderRow>
53
                    {cells.map((cell) => {
54
                      if (cell.kind === "group") return null;
55

56
                      return (
57
                        <Grid.HeaderCell
58
                          key={cell.id}
59
                          cell={cell}
60
                          className={
61
                            "flex items-center border-b border-neutral-100 bg-neutral-200 px-2 text-sm capitalize text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100" +
62
                            (cell.type === "number" ? " justify-end" : "")
63
                          }
64
                        />
65
                      );
66
                    })}
67
                  </Grid.HeaderRow>
68
                );
69
              }}
70
            </Grid.Header>
71
            <Grid.RowsContainer
72
              className={tw(
73
                '**:not-data-[ln-cell-selection-is-unit="true"]:data-ln-cell-selection-rect:bg-blue-500/20 **:data-ln-cell-selection-rect:border-blue-500',
74
                '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-top=true]:border-t',
75
                '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-bottom=true]:border-b',
76
                '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-start=true]:border-l',
77
                '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-end=true]:border-r',
78
                '**:data-[ln-cell-selection-is-unit="true"]:outline **:data-[ln-cell-selection-is-unit="true"]:outline-blue-500 **:data-[ln-cell-selection-is-unit="true"]:-outline-offset-1',
79
              )}
80
            >
81
              <Grid.RowsCenter>
82
                {(row) => {
83
                  if (row.kind === "full-width") return null;
84

85
                  return (
86
                    <Grid.Row row={row} className="group">
87
                      {row.cells.map((cell) => {
88
                        return (
89
                          <Grid.Cell
90
                            key={cell.id}
91
                            cell={cell}
92
                            className={
93
                              "flex items-center border-b border-neutral-200 bg-white px-2 text-sm text-neutral-800 group-data-[ln-alternate=true]:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:group-data-[ln-alternate=true]:bg-neutral-950" +
94
                              (cell.type === "number" ? " justify-end tabular-nums" : "")
95
                            }
96
                          />
97
                        );
98
                      })}
99
                    </Grid.Row>
100
                  );
101
                }}
102
              </Grid.RowsCenter>
103
            </Grid.RowsContainer>
104
          </Grid.Viewport>
105
        </Grid>
106
      </div>
107
    </div>
108
  );
109
}
110

26 collapsed lines
111
const formatter = new Intl.NumberFormat("en-US", {
112
  maximumFractionDigits: 2,
113
  minimumFractionDigits: 0,
114
});
115
export function BalanceCell({ 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
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
127
  const field = api.columnField(column, row);
128

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

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

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

Here we use a descendant selector to target every cell selection rectangle. This is a direct inline approach, but you can also move these rules to a separate CSS file if you prefer.

1
<Grid.RowsContainer
2
  className={tw(
3
    '**:not-data-[ln-cell-selection-is-unit="true"]:data-ln-cell-selection-rect:bg-ln-primary-30 **:data-ln-cell-selection-rect:border-ln-primary-50',
4
    '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-top=true]:border-t',
5
    '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-bottom=true]:border-b',
6
    '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-start=true]:border-l',
7
    '**:not-data-[ln-cell-selection-is-unit="true"]:data-[ln-cell-selection-border-end=true]:border-r',
8
    '**:data-[ln-cell-selection-is-unit="true"]:outline **:data-[ln-cell-selection-is-unit="true"]:outline-ln-primary-50 **:data-[ln-cell-selection-is-unit="true"]:-outline-offset-1',
9
  )}
10
>

Mixing Tailwind and Pre-built Themes

Fully theming LyteNyte Grid from scratch can require a significant amount of styling. If you want the grid to match your design system exactly, you may choose to define every style yourself. However, starting from a pre-built theme and then adjusting styles with Tailwind is often more efficient.

Because Tailwind does not restrict other CSS inputs, you can combine a pre-built LyteNyte Grid theme with Tailwind utilities. This is how many of the demos on the 1771 Technologies website are built. The example below shows Tailwind working alongside the provided grid themes:

Pre-built Themes With Tailwind

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
}

Warning

Depending on the order of CSS imports in your application, Tailwind styles may override LyteNyte Grid styles. This happens because the pre-built LyteNyte Grid styles are defined in the ln-grid CSS layer.

To ensure Tailwind and LyteNyte Grid work together as expected, set the layer order in your application as follows:

1
@layer base, ln-grid, components, utilities;

For more guidance on CSS layers, see this MDN guide.

LyteNyte Tailwind Variants

To make styling LyteNyte Grid with Tailwind easier, the LyteNyte Grid packages export a Tailwind-specific CSS file with useful variants and Tailwind theme values. The full content is available on our GitHub repository.

To use the LyteNyte Grid Tailwind variants, import the file in the same CSS file where you set up Tailwind:

Core
PRO

1
@import "tailwindcss";
2
@import "@1771technologies/lytenyte-core/tw.css";

1
@import "tailwindcss";
2
@import "@1771technologies/lytenyte-pro/tw.css";

After you import it, you can use the custom variants defined in the file. For example, the ln-cell variant sets the cell background in the grid to the value of the ln-bg token.

1
<Grid className="ln-cell:bg-ln-bg" />

Next Steps

This guide covered the basics of styling LyteNyte Grid with Tailwind. For more details, see:

Installation With Shadcn: Install LyteNyte Grid using the shadcn CLI.
Grid Theming: Review the general theming guide to learn more about styling LyteNyte Grid.
Cell Renderers: Render custom cell content with React components.

Grid Theming With Tailwind

Info

Styling With Tailwind

Info

Tailwind Styling With CVA

Tailwind Styling Row Detail

Cell Selection Styling With Tailwind

Pre-built Themes With Tailwind

Warning

On this page