Cells

Cell Range Selection

LyteNyte Grid supports selecting single or multiple ranges. A range is a rectangular block of cells that the grid marks as selected.

Set the cellSelectionMode property on the grid to configure the cell selection behavior of LyteNyte Grid. This property accepts three possible values:

"range": Allows a single range of cells to be selected.
"multi-range": Supports selecting multiple cell ranges. Hold Control or Command to add ranges.
"none": Disables cell selection in the grid. By default, cell selection is disabled.

Single-Range Selection

Set cellSelectionMode to "range" to enable single-range selection. Click a cell, then drag across the grid to select a range.


18 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5

6
type StockData = (typeof stockData)[number];
7

8
export interface GridSpec {
9
  readonly data: StockData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
14
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
15
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
16
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
17
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
18
];
19

20
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
21

22
export default function CellDemo() {
23
  const ds = useClientDataSource({ data: stockData });
24

25
  return (
26
    <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
27
      <Grid columns={columns} columnBase={base} rowSource={ds} cellSelectionMode="range" />
28
    </div>
29
  );
30
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

To enable cell selection, the demo sets the cellSelectionMode property as shown in the code below.

1
<Grid columns={columns} columnBase={base} rowSource={ds} cellSelectionMode="range" />

When cell selection is enabled, LyteNyte Grid tracks the selection state internally. Call cellSelections to retrieve the current selection. Uncontrolled cell selection works well for operations like copy-to-clipboard without managing selection state in your app.

In the demo below, select a cell range and press Control+C or Command+C to copy to your clipboard.

Copy-to-Clipboard


20 collapsed lines
1
import "./demo.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
5
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
6
import { useMemo } from "react";
7

8
type StockData = (typeof stockData)[number];
9

10
export interface GridSpec {
11
  readonly data: StockData;
12
}
13

14
const columns: Grid.Column<GridSpec>[] = [
15
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
16
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
17
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
18
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
19
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
20
];
21

22
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
23

24
export default function CellDemo() {
25
  const ds = useClientDataSource({ data: stockData });
26

27
  return (
28
    <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
29
      <Grid
30
        columns={columns}
31
        columnBase={base}
32
        rowSource={ds}
33
        cellSelectionMode="range"
34
        events={useMemo<Grid.Events<GridSpec>>(
35
          () => ({
36
            viewport: {
37
              keyDown: async ({ event: ev, viewport: vp, api }) => {
38
                if (ev.key === "c" && (ev.metaKey || ev.ctrlKey)) {
39
                  const rect = api.cellSelections()?.[0];
40
                  if (!rect) return;
41
                  const v = await api.exportData({ rect });
42

43
                  vp.classList.add("copy-flash");
44

45
                  const asString = v.data.map((x) => `${x.join(", ")}`).join("\n");
46
                  await navigator.clipboard.writeText(asString);
47

48
                  setTimeout(() => vp.classList.remove("copy-flash"), 500);
49
                }
50
              },
51
            },
52
          }),
53
          [],
54
        )}
55
      />
56
    </div>
57
  );
58
}

1
@keyframes flash {
2
  0% {
3
    background-color: var(--color-ln-primary-10);
4
  }
5
  50% {
6
    background-color: var(--color-ln-primary-30);
7
  }
8
  100% {
9
    background-color: var(--color-ln-primary-10);
10
  }
11
}
12
.copy-flash {
13
  & [data-ln-cell-selection-rect="true"]:not([data-ln-cell-selection-is-pivot="true"]) {
14
    animation: flash 0.5s ease-out forwards;
15
  }
16
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

The demo listens for the viewport keyDown event, then:

Retrieves the current selection bounds via api.cellSelections.
Exports the selected range data using api.exportData, converts it to a string, and writes it to the clipboard.
Applies copy-flash to highlight the selection.

The implementation code is shown below.

1
<Grid
2
  columns={columns}
3
  columnBase={base}
4
  rowSource={ds}
5
  cellSelectionMode="range"
6
  events={useMemo<Grid.Events<GridSpec>>(
7
    () => ({
8
      viewport: {
9
        keyDown: async (ev, vp, api) => {
10
          if (ev.key === "c" && (ev.metaKey || ev.ctrlKey)) {
11
            const rect = api.cellSelections()?.[0];
12
            if (!rect) return;
13
            const v = await api.exportData({ rect });
14

15
            vp.classList.add("copy-flash");
16

17
            const asString = v.data.map((x) => `${x.join(", ")}`).join("\n");
18
            await navigator.clipboard.writeText(asString);
19

20
            setTimeout(() => vp.classList.remove("copy-flash"), 1000);
21
          }
22
        },
23
      },
24
    }),
25
    [],
26
  )}
27
/>

Controlled Cell Selection

Some use cases require you to manage the cell selection state. Enable controlled selection by passing an array of ranges to the cellSelections prop. Update the selection state via the onCellSelectionChange callback.

The demo below stores cellSelections in React state using useState. It passes the selection to a status bar that displays averages for numeric columns.

Selection Status Bar

Avg. Price:

281.33USD

demo.tsx
components.tsx


33 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import {
3
  computeField,
4
  Grid,
5
  useClientDataSource,
6
  type RowSourceClient,
7
} from "@1771technologies/lytenyte-pro";
8
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
9
import {
10
  PercentCell,
11
  CurrencyCell,
12
  SymbolCell,
13
  CompactNumberCell,
14
  CurrencyLabel,
15
  PercentLabel,
16
  CompactNumberLabel,
17
} from "./components.jsx";
18
import { useMemo, useState } from "react";
19
import { sum } from "es-toolkit";
20

21
type StockData = (typeof stockData)[number];
22

23
export interface GridSpec {
24
  readonly data: StockData;
25
}
26

27
const columns: Grid.Column<GridSpec>[] = [
28
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
29
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
30
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
31
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
32
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
33
];
34

35
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
36

37
export default function CellDemo() {
38
  const ds = useClientDataSource({ data: stockData });
39
  const [rect, setRect] = useState<Grid.T.DataRect[]>([
40
    { rowStart: 1, rowEnd: 4, columnStart: 1, columnEnd: 2 },
41
  ]);
42

43
  return (
44
    <>
45
      <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
46
        <Grid
47
          columns={columns}
48
          columnBase={base}
49
          rowSource={ds}
50
          cellSelectionMode="range"
51
          cellSelections={rect}
52
          onCellSelectionChange={setRect}
53
        />
54
      </div>
55
      <div className="border-ln-border flex h-fit items-center border-t">
56
        {rect.length > 0 && <StatusBar rect={rect[0]} source={ds} />}
57
      </div>
58
    </>
59
  );
60
}
61

62
function StatusBar({ rect, source }: { rect: Grid.T.DataRect; source: RowSourceClient }) {
63
  const selectedNumberColumns = useMemo(() => {
64
    const selected: Grid.Column<GridSpec>[] = [];
65
    for (let i = rect.columnStart; i < rect.columnEnd; i++) {
66
      const col = columns[i];
67

68
      if (col.type === "number") selected.push(col);
69
    }
70

71
    return selected;
72
  }, [rect.columnEnd, rect.columnStart]);
73

74
  const summedValues = useMemo(() => {
75
    const result = Object.fromEntries(selectedNumberColumns.map((x) => [x.id, []])) as Record<
76
      string,
77
      number[]
78
    >;
79
    for (let i = rect.rowStart; i < rect.rowEnd; i++) {
80
      const row = source.rowByIndex(i).get();
81

82
      if (!row) continue;
83

84
      for (const c of selectedNumberColumns) {
85
        const value = computeField(c.field ?? c.id, row);
86
        if (typeof value === "number") result[c.id].push(value);
87
      }
88
    }
89

90
    return result;
91
  }, [rect.rowEnd, rect.rowStart, selectedNumberColumns, source]);
92

93
  if (selectedNumberColumns.length === 0) return null;
94

95
  return (
96
    <div className="flex w-full flex-wrap items-center justify-center gap-4 px-2 py-2">
97
      {Object.entries(summedValues).map(([id, values]) => {
98
        const avg = sum(values) / values.length;
99
        const column = columns.find((x) => x.id === id)!;
100

101
        return (
102
          <div className="flex items-center justify-center gap-2 text-xs" key={id}>
103
            <span className="text-ln-text-dark text-nowrap font-semibold">
104
              Avg. {column?.name ?? column.id}:
105
            </span>
106
            {(id === "price" || id === "eps") && <CurrencyLabel value={avg} />}
107
            {id === "change" && <PercentLabel value={avg} />}
108
            {id === "volume" && <CompactNumberLabel value={avg} />}
109
          </div>
110
        );
111
      })}
112
    </div>
113
  );
114
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15

16
  return <CompactNumberLabel value={field as string} />;
17
}
18

19
export function CompactNumberLabel({ value }: { value: string | number }) {
20
  const [label, suffix] = typeof value === "number" ? formatCompactNumber(value) : ["-", ""];
21

22
  return (
23
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
24
      <span>{label}</span>
25
      <span className="font-semibold">{suffix}</span>
26
    </div>
27
  );
28
}
29

30
export const CompactNumberCell = memo(CompactNumberCellImpl);
31
function formatCompactNumber(n: number) {
32
  const suffixes = ["", "K", "M", "B", "T"];
33
  let magnitude = 0;
34
  let num = Math.abs(n);
35

36
  while (num >= 1000 && magnitude < suffixes.length - 1) {
37
    num /= 1000;
38
    magnitude++;
39
  }
40

41
  const decimals = 2;
42
  const formatted = num.toFixed(decimals);
43

44
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
45
}
46

47
const formatter = new Intl.NumberFormat("en-US", {
48
  minimumFractionDigits: 2,
49
  maximumFractionDigits: 2,
50
});
51

52
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
53
  const field = api.columnField(column, row);
54

55
  const label = typeof field === "number" ? formatter.format(field) : "-";
56

57
  return (
58
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
59
      <CurrencyLabel value={label} />
60
    </div>
61
  );
62
}
63

64
export function CurrencyLabel({ value }: { value: number | string }) {
65
  return (
66
    <div className="flex items-baseline gap-1">
67
      <span>{typeof value === "number" ? formatter.format(value) : value}</span>
68
      <span className="text-[9px]">USD</span>
69
    </div>
70
  );
71
}
72

73
export const CurrencyCell = memo(CurrencyCellImpl);
74

75
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
76
  const field = api.columnField(column, row) as number;
77

78
  return <PercentLabel value={field} />;
79
}
80

81
export function PercentLabel({ value }: { value: string | number }) {
82
  const label = typeof value === "number" ? formatter.format(value) + "%" : "-";
83

84
  return (
85
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
86
  );
87
}
88

89
export const PercentCell = memo(PercentCellImpl);
90

91
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
92
  if (!api.rowIsLeaf(row)) return null;
93

94
  const symbol = api.columnField(column, row) as string;
95
  const desc = row.data?.[1];
96

97
  return (
98
    <div className="text-ln-text-dark grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
99
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
100
        <img
101
          src={logos[symbol]}
102
          alt=""
103
          width={26}
104
          height={26}
105
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
106
        />
107
      </div>
108
      <div className="overflow-hidden text-ellipsis">{desc}</div>
109
    </div>
110
  );
111
}
112
export const SymbolCell = memo(SymbolCellImpl);

The cellSelections property expects an array of DataRect objects. A DataRect defines a rectangular selection area using the following interface. The rowEnd and columnEnd values are exclusive and are not included in the selected cells.

1
interface DataRect {
2
  readonly rowStart: number;
3
  readonly rowEnd: number;
4
  readonly columnStart: number;
5
  readonly columnEnd: number;
6
}

Warning

cellSelections refers to both an API method and a grid property:

API Method (api.cellSelections): Returns the current selection rectangles.
Property (cellSelections): Controls the selection state.

In controlled selection mode, api.cellSelections returns the same value you pass to cellSelections.

Header Highlights

Headers of columns containing selected cells receive the data-ln-cell-selected="true" attribute. Use this attribute to style those headers. In the demo below, CSS highlights any header whose column contains a selected cell.

Column Header Highlights

demo.tsx
components.tsx


18 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5

6
type StockData = (typeof stockData)[number];
7

8
export interface GridSpec {
9
  readonly data: StockData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
14
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
15
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
16
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
17
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
18
];
19

20
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
21

22
export default function CellDemo() {
23
  const ds = useClientDataSource({ data: stockData });
24

25
  return (
26
    <div
27
      className={[
28
        "ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs ln-cell-marker:border-e ln-cell-marker:border-ln-border-strong",
29
        "dark:ln-header:data-[ln-cell-selected=true]:bg-[#161D2A]",
30
        "ln-header:data-[ln-cell-selected=true]:bg-[#f2f7ff]",
31
      ].join(" ")}
32
      style={{ height: 500 }}
33
    >
34
      <Grid columns={columns} columnBase={base} rowSource={ds} cellSelectionMode="range" />
35
    </div>
36
  );
37
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

The demo uses the LyteNyte Grid Tailwind plugin to apply the following Tailwind CSS class:

"ln-header:data-[ln-cell-selected=true]:bg-ln-primary-05"

If you are not using Tailwind, the class is equivalent to the CSS below:

1
.ln-grid {
2
  [data-ln-header-cell="true"][data-ln-cell-selected="true"] {
3
    background-color: var(--ln-primary-05);
4
  }
5
}

Excluding Marker Column Selection

The marker column is an internal column that is automatically pinned to the start of the grid. It does not appear in the columns array you pass to the grid.

By default, selection ranges can include the marker column. Set cellSelectionExcludeMarker to true to prevent selection of this column.

Tip

LyteNyte Grid also applies the data-ln-cell-selected attribute to rows that contain selected cells. Use the attribute for row-level styling.

Exclude Marker Column

demo.tsx
components.tsx


18 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5

6
type StockData = (typeof stockData)[number];
7

8
export interface GridSpec {
9
  readonly data: StockData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
14
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
15
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
16
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
17
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
18
];
19

20
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
21

22
const marker: Grid.ColumnMarker<GridSpec> = {
23
  on: true,
24
  cellRenderer: (p) => {
25
    return <div className="flex h-full w-full items-center justify-center text-xs">{p.rowIndex + 1}</div>;
26
  },
27
};
28

29
export default function CellDemo() {
30
  const ds = useClientDataSource({ data: stockData });
31

32
  return (
33
    <div
34
      className={[
35
        "ln-grid ln-cell:text-xs ln-cell:font-light",
36
        "ln-header:text-xs",
37
        "ln-row:data-[ln-cell-selected=true]:ln-cell-marker:bg-[#f2f7ff]",
38
        "dark:ln-row:data-[ln-cell-selected=true]:ln-cell-marker:bg-[#161D2A]",
39
        "dark:ln-header:data-[ln-cell-selected=true]:bg-[#161D2A]",
40
        "ln-header:data-[ln-cell-selected=true]:bg-[#f2f7ff]",
41
      ].join(" ")}
42
      style={{ height: 500 }}
43
    >
44
      <Grid
45
        columns={columns}
46
        columnBase={base}
47
        rowSource={ds}
48
        cellSelectionMode="range"
49
        cellSelectionExcludeMarker
50
        columnMarker={marker}
51
      />
52
    </div>
53
  );
54
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

Even with cellSelectionExcludeMarker set to true, the grid still reserves space for the marker column. When the marker column is enabled, it uses column index 0, so the first non-marker column always has column index 1.

Column and Row Selection

To select an entire row or column, set the cellSelections prop to a selection rectangle that covers the target cells. This works regardless of cellSelectionMode. The demo below illustrates this:

Column Selection: Click a header to select the entire column.
Row Selection: Click a cell in the marker column to select an entire row.

By default, LyteNyte Grid clears selection when focus moves to a non-cell element, such as a header cell. Set cellSelectionMaintainOnNonCellPosition to preserve selection when headers receive focus.

Column / Row Selection

demo.tsx
components.tsx


19 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5
import { useMemo, useState } from "react";
6

7
type StockData = (typeof stockData)[number];
8

9
export interface GridSpec {
10
  readonly data: StockData;
11
}
12

13
const columns: Grid.Column<GridSpec>[] = [
14
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
15
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
16
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
17
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
18
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
19
];
20

21
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
22

23
const marker: Grid.ColumnMarker<GridSpec> = {
24
  on: true,
25
  cellRenderer: (p) => {
26
    return <div className="flex h-full w-full items-center justify-center text-xs">{p.rowIndex + 1}</div>;
27
  },
28
};
29

30
export default function CellDemo() {
31
  const [cellSelections, setCellSelection] = useState<Grid.T.DataRect[]>([]);
32
  const ds = useClientDataSource({ data: stockData });
33

34
  return (
35
    <div
36
      className={[
37
        "ln-grid ln-cell:text-xs ln-cell:font-light",
38
        "ln-header:text-xs",
39
        "ln-row:data-[ln-cell-selected=true]:ln-cell-marker:bg-[#f2f7ff]",
40
        "dark:ln-row:data-[ln-cell-selected=true]:ln-cell-marker:bg-[#161D2A]",
41
        "dark:ln-header:data-[ln-cell-selected=true]:bg-[#161D2A]",
42
        "ln-header:data-[ln-cell-selected=true]:bg-[#f2f7ff]",
43
      ].join(" ")}
44
      style={{ height: 500 }}
45
    >
46
      <Grid
47
        columns={columns}
48
        columnBase={base}
49
        rowSource={ds}
50
        cellSelectionExcludeMarker
51
        cellSelections={cellSelections}
52
        columnMarker={marker}
53
        cellSelectionMode="range"
54
        cellSelectionMaintainOnNonCellPosition
55
        onCellSelectionChange={setCellSelection}
56
        events={useMemo<Grid.Events<GridSpec>>(
57
          () => ({
58
            cell: {
59
              pointerDown: ({ column, layout, api }) => {
60
                if (column.id !== "lytenyte-marker-column") return;
61

62
                const view = api.columnView();
63
                setCellSelection([
64
                  {
65
                    columnStart: 1,
66
                    columnEnd: view.visibleColumns.length,
67
                    rowStart: layout.rowIndex,
68
                    rowEnd: layout.rowIndex + 1,
69
                  },
70
                ]);
71
              },
72
            },
73
            headerCell: {
74
              pointerDown: ({ column, layout, api }) => {
75
                if (column.id === "lytenyte-marker-column") return;
76

77
                const index = layout.colStart;
78
                const rowView = api.rowView();
79

80
                setCellSelection([
81
                  { columnStart: index, columnEnd: index + 1, rowStart: 0, rowEnd: rowView.rowCount },
82
                ]);
83
              },
84
            },
85
          }),
86
          [],
87
        )}
88
      />
89
    </div>
90
  );
91
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

Spanned Cell Selection

When a selection includes a spanning cell, LyteNyte Grid expands the selection rectangle to cover the cell’s full row/column span. In the demo below, selecting a spanning cell expands the selected area accordingly.

Cell Selection With Spans

demo.tsx
components.tsx


13 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/pill-manager.css";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import {
5
  ExchangeCell,
6
  makePerfHeaderCell,
7
  NetworkCell,
8
  PercentCell,
9
  PercentCellPositiveNegative,
10
  SymbolCell,
11
} from "./components.jsx";
12
import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
13
import { data as rawData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14

15
export interface GridSpec {
16
  readonly data: DEXPerformanceData;
17
}
18

19
const exchangeCounts: Record<string, number> = {};
20
const data = Object.values(
21
  Object.groupBy(rawData, (x) => {
22
    return x.exchange;
23
  }),
24
).flatMap((x) => {
25
  exchangeCounts[x![0].exchange] = Math.min(x!.length, 5);
26
  return x!.slice(0, 5); // Only take the first 5
27
}) as DEXPerformanceData[];
28

29
const columns: Grid.Column<GridSpec>[] = [
30
  {
31
    id: "symbol",
32
    cellRenderer: SymbolCell,
33
    width: 250,
34
    name: "Symbol",
35
    rowSpan: (r) => {
36
      const exchange = r.row.data?.exchange as string;
37
      return exchangeCounts[exchange] ?? 1;
38
    },
39
  },
40
  { id: "network", cellRenderer: NetworkCell, width: 220, hide: true, name: "Network" },
41
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, hide: true, name: "Exchange" },
42

43
  {
44
    id: "change24h",
45
    cellRenderer: PercentCellPositiveNegative,
46
    headerRenderer: makePerfHeaderCell("Change", "24h"),
47
    name: "Change % 24h",
48
    type: "number,",
49
  },
50

51
  {
52
    id: "perf1w",
53
    cellRenderer: PercentCellPositiveNegative,
54
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
55
    name: "Perf % 1W",
56
    type: "number,",
57
  },
58
  {
59
    id: "perf1m",
60
    cellRenderer: PercentCellPositiveNegative,
61
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
62
    name: "Perf % 1M",
63
    type: "number,",
64
  },
65
  {
66
    id: "perf3m",
67
    cellRenderer: PercentCellPositiveNegative,
68
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
69
    name: "Perf % 3M",
70
    type: "number,",
71
  },
72
  {
73
    id: "perf6m",
74
    cellRenderer: PercentCellPositiveNegative,
75
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
76
    name: "Perf % 6M",
77
    type: "number,",
78
  },
79
  {
80
    id: "perfYtd",
81
    cellRenderer: PercentCellPositiveNegative,
82
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
83
    name: "Perf % YTD",
84
    type: "number",
85
  },
86
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
87
  {
88
    id: "volatility1m",
89
    cellRenderer: PercentCell,
90
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
91
    name: "Volatility 1M",
92
    type: "number",
93
  },
94
];
95

96
const base: Grid.ColumnBase<GridSpec> = { width: 80 };
97

98
export default function CellDemo() {
99
  const ds = useClientDataSource({ data: data });
100

101
  return (
102
    <div
103
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
104
      style={{ height: 500 }}
105
    >
106
      <Grid columns={columns} columnBase={base} rowSource={ds} cellSelectionMode="range" />
107
    </div>
108
  );
109
}

1
import type { ClassValue } from "clsx";
2
import clsx from "clsx";
3
import { twMerge } from "tailwind-merge";
4
import { exchanges, networks, symbols } from "@1771technologies/grid-sample-data/dex-pairs-performance";
5

6
export function tw(...c: ClassValue[]) {
7
  return twMerge(clsx(...c));
8
}
9
import type { Grid } from "@1771technologies/lytenyte-pro";
10
import type { GridSpec } from "./demo";
11

12
export function SymbolCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
13
  if (!api.rowIsLeaf(row) || !row.data) return null;
14

15
  const ticker = row.data.symbolTicker;
16
  const symbol = row.data.symbol;
17
  const image = symbols[row.data.symbolTicker];
18

19
  return (
20
    <div className="grid grid-cols-[20px_auto_auto] items-center gap-1.5">
21
      <div>
22
        <img
23
          src={image}
24
          alt={`Logo for symbol ${symbol}`}
25
          className="h-full w-full overflow-hidden rounded-full"
26
        />
27
      </div>
28
      <div className="bg-ln-gray-20 text-ln-text-dark flex h-fit items-center justify-center rounded-lg px-2 py-px text-[10px]">
29
        {ticker}
30
      </div>
31
      <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
32
    </div>
33
  );
34
}
35

36
export function NetworkCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
37
  if (!api.rowIsLeaf(row) || !row.data) return null;
38

39
  const name = row.data.network;
40
  const image = networks[name];
41

42
  return (
43
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
44
      <div>
45
        <img
46
          src={image}
47
          alt={`Logo for network ${name}`}
48
          className="h-full w-full overflow-hidden rounded-full"
49
        />
50
      </div>
51
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
52
    </div>
53
  );
54
}
55

56
export function ExchangeCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
57
  if (!api.rowIsLeaf(row) || !row.data) return null;
58

59
  const name = row.data.exchange;
60
  const image = exchanges[name];
61

62
  return (
63
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
64
      <div>
65
        <img
66
          src={image}
67
          alt={`Logo for exchange ${name}`}
68
          className="h-full w-full overflow-hidden rounded-full"
69
        />
70
      </div>
71
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
72
    </div>
73
  );
74
}
75

76
export function PercentCellPositiveNegative({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row) || !row.data) return null;
78

79
  const field = api.columnField(column, row);
80

81
  if (typeof field !== "number") return "-";
82

83
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
84

85
  return (
86
    <div
87
      className={tw(
88
        "h-ful flex w-full items-center justify-end tabular-nums",
89
        field < 0 ? "text-red-600 dark:text-red-300" : "text-green-600 dark:text-green-300",
90
      )}
91
    >
92
      {value}
93
    </div>
94
  );
95
}
96

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

100
  const field = api.columnField(column, row);
101

102
  if (typeof field !== "number") return "-";
103

104
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
105

106
  return <div className="h-ful flex w-full items-center justify-end tabular-nums">{value}</div>;
107
}
108

109
export const makePerfHeaderCell = (name: string, subname: string) => {
110
  return (_: Grid.T.HeaderParams<GridSpec>) => {
111
    return (
112
      <div className="flex h-full w-full flex-col items-end justify-center tabular-nums">
113
        <div>{name}</div>
114
        <div className="text-ln-text-light font-mono uppercase">{subname}</div>
115
      </div>
116
    );
117
  };
118
};

Pinned Area Selection

Rows and columns can be pinned to the edges of the grid, keeping them visible while the rest of the grid scrolls.

When you drag a selection from the scrollable area toward a pinned area, the grid includes pinned cells only after the viewport reaches the pinned edge. This ensures the selection range remains continuous:

Pinned Start/Top: The grid must be scrolled to the start or top.
Pinned End/Bottom: The grid must be scrolled to the end or bottom.

As you drag toward the edge, LyteNyte Grid automatically scrolls the viewport. Once the viewport reaches the pinned edge, the selection expands to include the pinned cells. These constraints only apply when the selection begins outside the pinned area.

The demo includes pinned rows at the top and bottom, and columns at the start and end. Select different areas to see how selection expands into pinned regions.

Pinned Cell Selection

demo.tsx
components.tsx


27 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5
import { ViewportShadows } from "@1771technologies/lytenyte-pro/components";
6

7
type StockData = (typeof stockData)[number];
8

9
export interface GridSpec {
10
  readonly data: StockData;
11
}
12

13
const columns: Grid.Column<GridSpec>[] = [
14
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220, pin: "start" },
15
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 200 },
16
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 200 },
17
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 200 },
18
  {
19
    field: 6,
20
    id: "volume",
21
    name: "Volume",
22
    type: "number",
23
    cellRenderer: CompactNumberCell,
24
    width: 130,
25
    pin: "end",
26
  },
27
];
28

29
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
30

31
export default function CellDemo() {
32
  const ds = useClientDataSource({
33
    data: stockData.slice(2, -2),
34
    topData: stockData.slice(0, 2),
35
    botData: stockData.slice(-2),
36
  });
37

38
  return (
39
    <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
40
      <Grid
41
        columns={columns}
42
        columnBase={base}
43
        rowSource={ds}
44
        cellSelectionMode="range"
45
        slotShadows={ViewportShadows}
46
      />
47
    </div>
48
  );
49
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

When a selection spans pinned areas, the selection rectangle appears visually split. This split indicates that the selection crosses both pinned and scrollable viewport regions. Despite the visual separation, the cellSelections state contains a single, continuous selection rectangle.

Multi-Range Selection

Set cellSelectionMode to "multi-range" to enable multiple selection ranges.

Add Range: Hold Control (or Command) and drag to add a new range.
Deselect Area: Hold Control (or Command) and start a selection inside an existing range to deselect that area.

Multiple Range Selections

demo.tsx
components.tsx


18 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import { PercentCell, CurrencyCell, SymbolCell, CompactNumberCell } from "./components.jsx";
5

6
type StockData = (typeof stockData)[number];
7

8
export interface GridSpec {
9
  readonly data: StockData;
10
}
11

12
const columns: Grid.Column<GridSpec>[] = [
13
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
14
  { field: 3, id: "price", type: "number", name: "Price", cellRenderer: CurrencyCell, width: 110 },
15
  { field: 5, id: "change", type: "number", name: "Change", cellRenderer: PercentCell, width: 130 },
16
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
17
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
18
];
19

20
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
21

22
export default function CellDemo() {
23
  const ds = useClientDataSource({ data: stockData });
24

25
  return (
26
    <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
27
      <Grid columns={columns} columnBase={base} rowSource={ds} cellSelectionMode="multi-range" />
28
    </div>
29
  );
30
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row);
15
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
16

17
  return (
18
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
19
      <span>{label}</span>
20
      <span className="font-semibold">{suffix}</span>
21
    </div>
22
  );
23
}
24

25
export const CompactNumberCell = memo(CompactNumberCellImpl);
26
function formatCompactNumber(n: number) {
27
  const suffixes = ["", "K", "M", "B", "T"];
28
  let magnitude = 0;
29
  let num = Math.abs(n);
30

31
  while (num >= 1000 && magnitude < suffixes.length - 1) {
32
    num /= 1000;
33
    magnitude++;
34
  }
35

36
  const decimals = 2;
37
  const formatted = num.toFixed(decimals);
38

39
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
40
}
41

42
const formatter = new Intl.NumberFormat("en-US", {
43
  minimumFractionDigits: 2,
44
  maximumFractionDigits: 2,
45
});
46

47
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
48
  const field = api.columnField(column, row);
49

50
  const label = typeof field === "number" ? formatter.format(field) : "-";
51

52
  return (
53
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
54
      <div className="flex items-baseline gap-1">
55
        <span>{label}</span>
56
        <span className="text-[9px]">USD</span>
57
      </div>
58
    </div>
59
  );
60
}
61

62
export const CurrencyCell = memo(CurrencyCellImpl);
63

64
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
65
  const field = api.columnField(column, row) as number;
66

67
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
68

69
  return (
70
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
71
  );
72
}
73

74
export const PercentCell = memo(PercentCellImpl);
75

76
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row)) return null;
78

79
  const symbol = api.columnField(column, row) as string;
80
  const desc = row.data?.[1];
81

82
  return (
83
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
84
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
85
        <img
86
          src={logos[symbol]}
87
          alt=""
88
          width={26}
89
          height={26}
90
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
91
        />
92
      </div>
93
      <div className="overflow-hidden text-ellipsis">{desc}</div>
94
    </div>
95
  );
96
}
97
export const SymbolCell = memo(SymbolCellImpl);

Multiple ranges are useful for comparing values across separate cell groups. However, they complicate operations like copying. When multiple ranges exist, the cellSelections state stores multiple selection rectangles, which can make it unclear which range to copy.

Use "range" mode unless your application specifically requires multiple ranges.

Styling Cell Selections

LyteNyte Grid renders inert div overlays to visualize selections. These elements are unstyled by default. To style selection rectangles, target their data attributes.

The CSS below illustrates the approach used by built-in themes. For more information, refer to the Grid Theming guide.

1
[data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
2
  background-color: var(--ln-primary-10);
3
  box-sizing: border-box;
4

5
  &[data-ln-cell-selection-is-deselect="true"] {
6
    background-color: var(--ln-red-30);
7

8
    &[data-ln-cell-selection-border-top="true"],
9
    &[data-ln-cell-selection-border-bottom="true"],
10
    &[data-ln-cell-selection-border-start="true"],
11
    &[data-ln-cell-selection-border-end="true"] {
12
      border-color: var(--ln-red-50);
13
    }
14
  }
15

16
  &[data-ln-cell-selection-border-top="true"] {
17
    border-top: 1px solid var(--ln-primary-50);
18
  }
19
  &[data-ln-cell-selection-border-bottom="true"] {
20
    border-bottom: 1px solid var(--ln-primary-50);
21
  }
22
  &[data-ln-cell-selection-border-start="true"] {
23
    border-inline-start: 1px solid var(--ln-primary-50);
24
  }
25
  &[data-ln-cell-selection-border-end="true"] {
26
    border-inline-end: 1px solid var(--ln-primary-50);
27
  }
28
}

Next Steps

Cell Renderers: Render custom cell content with React components.
Cell Tooltips & Popovers: Render custom tooltips or popovers on hover or click.
Bulk Cell Editing: Programmatically update large datasets via the API.

Cell Range Selection

Single-Range Selection

Single-Range Selection

Uncontrolled Cell Selection

Copy-to-Clipboard

Controlled Cell Selection

Selection Status Bar

Warning

Header Highlights

Column Header Highlights

Excluding Marker Column Selection

Tip

Exclude Marker Column

Column and Row Selection

Column / Row Selection

Spanned Cell Selection

Cell Selection With Spans

Pinned Area Selection

Pinned Cell Selection

Multi-Range Selection

Multiple Range Selections

Styling Cell Selections

Next Steps

On this page