Client Row Source

Client Row Overview

Learn how to handle client-side data to deliver a seamless user experience. LyteNyte Grid allows you to display, edit, sort, group, and filter row data directly in the browser.

Client data in LyteNyte Grid refers to the complete set of row data available in the browser. Use client data when you can load all the grid’s rows directly into the browser. A common upper bound is around 10,000 rows, but the practical limit depends on available network bandwidth for both your server and your users.

Client Row Source

LyteNyte Grid exposes the useClientDataSource hook to create a grid row source for client data. A row source is an object that implements the RowSource interface shown below. You don’t implement RowSource directly; LyteNyte Grid provides hooks that generate row sources for each supported data source type.

This guide covers the Client Row Source. LyteNyte also includes these row sources:

Server Row Source: Partially loading large datasets on demand from your backend.
Tree Row Source: A client row source for row data stored as an object instead of an array.

1
export interface RowSource<T = any> {
2
  readonly useRowCount: () => number;
3
  readonly useTopCount: () => number;
4
  readonly useBottomCount: () => number;
5
  readonly useRows: () => { get: (i: number) => RowNode<T> | null | undefined; size: number };
6

7
  readonly useMaxRowGroupDepth: () => number;
8

9
  readonly rowIndexToRowId: (index: number) => string | null | undefined;
10
  readonly rowIdToRowIndex: (id: string) => number | null | undefined;
11
  readonly rowByIndex: (row: number) => RowAtom<RowNode<T> | null>;
12
  readonly rowById: (id: string) => RowNode<T> | null;
13
  readonly rowParents: (id: string) => string[];
14
  readonly rowIsSelected: (id: string) => boolean;
15
  readonly rowChildren: (id: string) => string[];
16
  readonly rowLeafs: (id: string) => string[];
17
  readonly rowsBetween: (start: string, end: string) => string[];
18
  readonly rowInvalidate: (row?: number) => void;
19
  readonly rowsSelected: () => { state: RowSelectionState; rows: RowNode<T>[] };
20
  readonly rowSelectionState: () => RowSelectionState;
21
  readonly useSelectionState: () => RowSelectionState;
22

23
  // Methods the LyteNyte will call
24
  readonly onViewChange: (view: SpanLayout) => void;
25
  readonly onRowGroupExpansionChange: (deltaChanges: Record<string, boolean>) => void;
26
  readonly onRowsUpdated: (rows: Map<RowNode<T>, T>) => void;
27
  readonly onRowsSelected: (params: {
28
    readonly selected: string[] | "all";
29
    readonly deselect?: boolean;
30
    readonly mode: "single" | "multiple" | "none";
31
  }) => void;
32
}

Using Client Row Source

The useClientDataSource hook requires an array of data. Each item in the array becomes a row in the grid. Updates to the data property declaratively update the row source. The client row source is therefore derived state.

The demo below provides a simple example of how to use the client row source. The remaining guides in this section explore the different capabilities of LyteNyte Grid’s client data source.

1
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
2

76 collapsed lines
3
import "@1771technologies/lytenyte-pro/light-dark.css";
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 } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14

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

19
const columns: Grid.Column<GridSpec>[] = [
20
  { id: "symbol", cellRenderer: SymbolCell, width: 250, name: "Symbol" },
21
  { id: "network", cellRenderer: NetworkCell, width: 220, name: "Network" },
22
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, name: "Exchange" },
23

24
  {
25
    id: "change24h",
26
    cellRenderer: PercentCellPositiveNegative,
27
    headerRenderer: makePerfHeaderCell("Change", "24h"),
28
    name: "Change % 24h",
29
    type: "number,",
30
  },
31

32
  {
33
    id: "perf1w",
34
    cellRenderer: PercentCellPositiveNegative,
35
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
36
    name: "Perf % 1W",
37
    type: "number,",
38
  },
39
  {
40
    id: "perf1m",
41
    cellRenderer: PercentCellPositiveNegative,
42
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
43
    name: "Perf % 1M",
44
    type: "number,",
45
  },
46
  {
47
    id: "perf3m",
48
    cellRenderer: PercentCellPositiveNegative,
49
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
50
    name: "Perf % 3M",
51
    type: "number,",
52
  },
53
  {
54
    id: "perf6m",
55
    cellRenderer: PercentCellPositiveNegative,
56
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
57
    name: "Perf % 6M",
58
    type: "number,",
59
  },
60
  {
61
    id: "perfYtd",
62
    cellRenderer: PercentCellPositiveNegative,
63
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
64
    name: "Perf % YTD",
65
    type: "number",
66
  },
67
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
68
  {
69
    id: "volatility1m",
70
    cellRenderer: PercentCell,
71
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
72
    name: "Volatility 1M",
73
    type: "number",
74
  },
75
];
76

77
const base: Grid.ColumnBase<GridSpec> = { width: 80 };
78

79
export default function ClientDemo() {
80
  const ds = useClientDataSource({ data: data });
81

82
  return (
83
    <div
84
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
85
      style={{ height: 500 }}
86
    >
87
      <Grid columns={columns} columnBase={base} rowSource={ds} />
88
    </div>
89
  );
90
}

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
};

Next Steps

Client Row Data: Learn how to manage client row data in LyteNyte Grid.
Client Row Filtering: Explore how to filter rows when using the client row source.
Client Row Sorting: Sort rows in ascending or descending order with the client row source.

Client Row Overview

Client Row Source

Using Client Row Source

Client Row Data Source

Next Steps

On this page