Server Data Loading

Data Updates

To handle live data updates and display real-time views, the server data source requests update ticks at a configurable interval.

Processing Updates

By default, the server data source doesn’t poll for row updates and requests new data only when the view changes. To request data for the current view on demand, call the data source refresh method. You can build a real-time grid in two steps:

Set up the data grid view using the standard non-updating configuration with the useServerDataSource hook.
Call the refresh method whenever the grid should update its rows.

The demo below uses setInterval to poll the server every second, then calls refresh on each interval to fetch updated rows. It uses a grouped view to show that update ticks work for both flat and grouped data.

Server Data Ticking

1
"use client";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { useEffect, useMemo } from "react";
4
import { Server } from "./server.js";
5
import type { DataEntry } from "./data";
6
import { HeaderCell, NumberCell } from "./components.js";
7
import { Grid, useServerDataSource } from "@1771technologies/lytenyte-pro";
8
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
9
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
10

11
export interface GridSpec {
12
  readonly data: DataEntry;
13
  readonly column: { agg?: string };
14
}
15

16
const columns: Grid.Column<GridSpec>[] = [
17
  {
18
    id: "bid",
19
    name: "Bid",
20
    type: "number",
21
    cellRenderer: NumberCell,
22
    width: 120,
23
    widthFlex: 1,
24
    agg: "avg",
25
  },
26
  {
27
    id: "ask",
28
    name: "Ask",
29
    type: "number",
30
    cellRenderer: NumberCell,
31
    width: 120,
32
    widthFlex: 1,
33
    agg: "avg",
34
  },
35
  {
36
    id: "spread",
37
    name: "Spread",
38
    type: "number",
39
    cellRenderer: NumberCell,
40
    width: 120,
41
    widthFlex: 1,
42
    agg: "avg",
43
  },
44

45
  {
46
    id: "volatility",
47
    name: "Volatility",
48
    type: "number",
49
    cellRenderer: NumberCell,
50
    width: 120,
51
    widthFlex: 1,
52
    agg: "first",
53
  },
54
  {
55
    id: "latency",
56
    name: "Latency",
57
    type: "number",
58
    cellRenderer: NumberCell,
59
    width: 120,
60
    widthFlex: 1,
61
    agg: "first",
62
  },
63
  {
64
    id: "symbol",
65
    name: "Symbol",
66
    hide: true,
67
    type: "number",
68
    agg: "first",
69
  },
70
];
71

72
const base: Grid.ColumnBase<GridSpec> = { headerRenderer: HeaderCell };
73
const group: Grid.RowGroupColumn<GridSpec> = {
74
  cellRenderer: (p) => {
75
    return (
76
      <RowGroupCell
77
        {...p}
78
        groupLabel={(row) => {
79
          const symbol = row.key;
80

81
          return (
82
            <div className="flex h-full w-full items-center gap-2 overflow-hidden text-nowrap">
83
              <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
84
                <img
85
                  src={logos[symbol!]}
86
                  alt={`Logo of ${symbol}`}
87
                  className="h-6.5 min-h-6.5 w-6.5 min-w-[26] rounded-full bg-black p-1"
88
                />
89
              </div>
90
              <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl bg-teal-600/20 px-1 py-0.5 text-xs">
91
                {symbol}
92
              </div>
93
            </div>
94
          );
95
        }}
96
      />
97
    );
98
  },
99
  pin: "start",
100
  width: 170,
101
};
102

103
export default function ServerDataDemo() {
104
  const ds = useServerDataSource<DataEntry>({
105
    queryFn: async (params) => {
106
      return await Server(params.requests, ["symbol"], {
107
        time: { fn: "first" },
108
        volume: { fn: "group" },
109
        bid: { fn: "avg" },
110
        ask: { fn: "avg" },
111
        spread: { fn: "avg" },
112
        volatility: { fn: "first" },
113
        latency: { fn: "first" },
114
        pnl: { fn: "first" },
115
        symbol: { fn: "first" },
116
      });
117
    },
118
    hasRowBranches: true,
119
    queryKey: [],
120
    blockSize: 50,
121
  });
122

123
  useEffect(() => {
124
    const i = setInterval(() => {
125
      ds.refresh();
126
    }, 1000);
127

128
    return () => clearInterval(i);
129
  }, [ds]);
130

131
  const isLoading = ds.isLoading.useValue();
132

133
  return (
134
    <>
135
      <div className="ln-grid" style={{ height: 500 }}>
136
        <Grid
137
          rowSource={ds}
138
          columns={columns}
139
          columnBase={base}
140
          rowGroupColumn={group}
141
          styles={useMemo(() => {
142
            return { viewport: { style: { scrollbarGutter: "stable" } } };
143
          }, [])}
144
          slotViewportOverlay={
145
            isLoading && (
146
              <div className="bg-ln-gray-20/40 absolute left-0 top-0 z-20 h-full w-full animate-pulse"></div>
147
            )
148
          }
149
        />
150
      </div>
151
    </>
152
  );
153
}

1
import "./component.css";
2
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
3
import { useEffect, useMemo, useRef } from "react";
4

5
import type { ClassValue } from "clsx";
6
import clsx from "clsx";
7
import { twMerge } from "tailwind-merge";
8
import type { Grid } from "@1771technologies/lytenyte-pro";
9
import type { GridSpec } from "./demo";
10
import { ArrowDownIcon, ArrowUpIcon } from "@radix-ui/react-icons";
11

12
export function tw(...c: ClassValue[]) {
13
  return twMerge(clsx(...c));
14
}
15

16
const formatter = new Intl.NumberFormat("en-US", {
17
  minimumFractionDigits: 2,
18
  maximumFractionDigits: 2,
19
});
20

21
export function NumberCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
22
  const field = api.columnField(column, row) as number;
23

24
  const prevValue = useRef(field);
25

26
  const diff = useMemo(() => {
27
    if (prevValue.current === field) return 0;
28

29
    const diff = field - prevValue.current;
30
    prevValue.current = field;
31

32
    return diff;
33
  }, [field]);
34

35
  const value = typeof field === "number" ? formatter.format(field) : "-";
36
  const ref = useRef<HTMLDivElement>(null);
37

38
  useEffect(() => {
39
    if (!ref.current || diff === 0) return;
40

41
    ref.current.style.animation = "none";
42
    void ref.current.clientHeight; // Forces layout changes to be applied
43
    requestAnimationFrame(() => {
44
      if (!ref.current) return;
45

46
      ref.current.style.animation = "fadeOut 3s ease-out forwards";
47
    });
48
  }, [diff]);
49

50
  return (
51
    <div className="flex h-full items-center justify-end gap-2 tabular-nums tracking-tighter">
52
      <div
53
        ref={ref}
54
        className={clsx(
55
          "flex items-center rounded px-1 text-[10px]",
56

57
          diff < 0 && "bg-red-800/20 text-red-500",
58
          diff > 0 && "bg-green-500/20 text-green-500",
59
        )}
60
      >
61
        {diff < 0 && <ArrowDownIcon width={12} height={12} />}
62
        {diff > 0 && <ArrowUpIcon width={12} height={12} />}
63
        <span>{diff !== 0 && diff.toFixed(2)}</span>
64
      </div>
65

66
      {value}
67
    </div>
68
  );
69
}
70

71
function CaretRight() {
72
  return (
73
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
74
      <path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"></path>
75
    </svg>
76
  );
77
}
78

79
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
80
  if (api.rowIsGroup(row)) {
81
    const symbol = row.key;
82

83
    const isExpanded = row.expanded;
84

85
    return (
86
      <div className="flex h-full w-full items-center gap-2 overflow-hidden text-nowrap px-3">
87
        <button
88
          className={tw(
89
            "hover:bg-ln-gray-10 w-5 cursor-pointer rounded transition-colors",
90
            isExpanded && "rotate-90",
91
          )}
92
          onClick={() => {
93
            api.rowGroupToggle(row);
94
          }}
95
        >
96
          <span className="sr-only">Toggle the row group</span>
97
          <CaretRight />
98
        </button>
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={`Logo of `}
103
            className="h-6.5 min-h-6.5 w-6.5 min-w-[26] rounded-full bg-black p-1"
104
          />
105
        </div>
106
        <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl bg-teal-600/20 px-1 py-0.5 text-xs">
107
          {symbol}
108
        </div>
109
      </div>
110
    );
111
  }
112
  if (!api.rowIsLeaf(row)) return null;
113

114
  const symbol = row.data?.["symbol"] as string;
115

116
  return (
117
    <div className="flex h-full w-full items-center justify-end gap-3 overflow-hidden text-nowrap px-3">
118
      <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl px-1 py-0.5 text-xs opacity-50">
119
        {symbol}
120
      </div>
121
    </div>
122
  );
123
}
124

125
export const HeaderCell = ({ column }: Grid.T.HeaderParams<GridSpec>) => {
126
  const aggName = column.agg;
127

128
  return (
129
    <div
130
      className={clsx(
131
        "flex h-full w-full items-center gap-2 text-sm",
132
        column.type === "number" && "flex-row-reverse",
133
      )}
134
    >
135
      <div>{column.name ?? column.id}</div>
136
      {aggName && (
137
        <span className="focus-visible:ring-ln-primary-50 text-ln-primary-50 rounded px-1 py-1 text-xs focus:outline-none focus-visible:ring-1">
138
          ({aggName as string})
139
        </span>
140
      )}
141
    </div>
142
  );
143
};

1
import type { DataRequest, DataResponse } from "@1771technologies/lytenyte-pro";
2
import { data, type DataEntry } from "./data.js";
3

4
const sleep = () => new Promise((res) => setTimeout(res, 600));
5

6
export async function Server(
7
  reqs: DataRequest[],
8
  groupModel: string[],
9
  aggModel: { [columnId: string]: { fn: string } },
10
) {
11
  // Simulate latency and server work.
12
  await sleep();
13

14
  return reqs.map((c) => {
15
    // Return flat items if there are no row groups
16
    if (!groupModel.length) {
17
      return {
18
        asOfTime: Date.now(),
19
        data: data.slice(c.start, c.end).map((x) => {
20
          return {
21
            kind: "leaf",
22
            id: x.id,
23
            data: x,
24
          };
25
        }),
26
        start: c.start,
27
        end: c.end,
28
        kind: "center",
29
        path: c.path,
30
        size: data.length,
31
      } satisfies DataResponse;
32
    }
33

34
    const groupLevel = c.path.length;
35
    const groupKeys = groupModel.slice(0, groupLevel + 1);
36

37
    const filteredForGrouping = data.filter((row) => {
38
      return c.path.every((v, i) => {
39
        const groupKey = groupModel[i];
40
        return `${row[groupKey as keyof DataEntry]}` === v;
41
      });
42
    });
43

44
    // This is the leaf level of the grouping
45
    if (groupLevel === groupModel.length) {
46
      return {
47
        kind: "center",
48
        asOfTime: Date.now(),
49
        start: c.start,
50
        end: c.end,
51
        path: c.path,
52
        data: filteredForGrouping.slice(c.start, c.end).map((x) => {
53
          return {
54
            kind: "leaf",
55
            id: x.id,
56
            data: x,
57
          };
58
        }),
59
        size: filteredForGrouping.length,
60
      } satisfies DataResponse;
61
    }
62

63
    const groupedData = Object.groupBy(filteredForGrouping, (r) => {
64
      const groupPath = groupKeys.map((g) => {
65
        if (typeof g !== "string")
66
          throw new Error("Non-string groups are not supported by this dummy implementation");
67

68
        return r[g as keyof DataEntry];
69
      });
70

71
      return groupPath.join(" / ");
72
    });
73

74
    const rows = Object.entries(groupedData);
75

76
    return {
77
      kind: "center",
78
      asOfTime: Date.now(),
79
      data: rows.slice(c.start, c.end).map((x) => {
80
        const childRows = x[1]!;
81

82
        const nextGroup = groupLevel + 1;
83
        let childCnt: number;
84
        if (nextGroup === groupModel.length) childCnt = childRows.length;
85
        else {
86
          childCnt = Object.keys(
87
            Object.groupBy(childRows, (x) => {
88
              const groupKey = groupModel[nextGroup];
89
              return `${x[groupKey as keyof DataEntry]}`;
90
            }),
91
          ).length;
92
        }
93

94
        const aggData = Object.fromEntries(
95
          Object.entries(aggModel)
96
            .map(([column, m]) => {
97
              if (typeof m.fn !== "string")
98
                throw new Error("Non-string aggregations are not supported by this dummy implementation");
99

100
              const id = column as keyof DataEntry;
101

102
              if (m.fn === "first") return [column, childRows[0][id]];
103
              if (m.fn === "last") return [column, childRows.at(-1)![id]];
104

105
              if (m.fn === "avg")
106
                return [column, childRows.reduce((acc, x) => acc + (x[id] as number), 0) / childRows.length];
107

108
              if (m.fn === "sum") return [column, childRows.reduce((acc, x) => acc + (x[id] as number), 0)];
109

110
              if (m.fn === "min") return [column, Math.min(...childRows.map((x) => x[id] as number))];
111
              if (m.fn === "max") return [column, Math.max(...childRows.map((x) => x[id] as number))];
112
            })
113
            .filter(Boolean) as [string, number | string][],
114
        );
115

116
        return {
117
          kind: "branch",
118
          childCount: childCnt,
119
          data: aggData,
120
          id: x[0],
121
          key: x[0].split(" / ").at(-1)!,
122
        };
123
      }),
124

125
      path: c.path,
126
      start: c.start,
127
      end: c.end,
128
      size: rows.length,
129
    } satisfies DataResponse;
130
  });
131
}

Manually Refreshing the Grid

The refresh method is a convenience wrapper around two underlying server data source methods:

requestsForView: Returns data request objects for the current view.
pushRequests: Sends data request objects to the server to force an update for the specified slices.

The following code blocks are equivalent:

1
const ds = useServerDataSource({ ... })
2

3
ds.refresh()
4
// Is equivalent to
5
ds.pushRequests(ds.requestsForView.get())

Data Updating Considerations

Live ticking data grids introduce several subtle and complex synchronization challenges. The LyteNyte Grid server data source handles these complexities automatically.

High-Frequency Updates

Some views can display hundreds or thousands of visible cells that can update simultaneously and at high frequency.

LyteNyte Grid renders these visual updates efficiently, but server-driven updates can bottleneck in your application’s data-processing layer:

Serialization: Browser serialization and deserialization of server payloads can add overhead.
Network limits: You’ll often hit network update limits before LyteNyte Grid hits cell-rendering limits.

To optimize performance, batch updates when the update rate is high. For example, call refresh every 5 seconds to apply updates in 5-second intervals. The exact timing depends on your specific use case. If you notice performance dips, they are likely in your application’s data-processing layer.

Consistent Group Updates

When row groups are present, data requests occur per group row and its children. For example, if a single expanded row group is in view, the view consists of:

The root data slice containing the group rows
The child rows of the expanded group

These represent two separate data requests. LyteNyte Grid’s queryFn provides both slices simultaneously, but if your implementation splits them into multiple server requests, the returned data may become out of sync. This can occur if the server data ticks between requests. To prevent this, handle refresh requests together to ensure data consistency.

Next Steps

Unbalanced Rows (Tree Data): Handle asymmetric row groups of varying depths.
Optimistic Loading: Pre-fetch data using optimistic loading to reduce perceived latency.
Server Row Grouping: Use the server data source to load and manage group slices.
Handling Load Failures: Recover from failed data requests and retry loads.