Server Data Loading

Server Row Overview

Use the server row data source to load and manage server-side row data in LyteNyte Grid.

The server data source handles the largest datasets in LyteNyte Grid by using partial data loading to render millions of rows.

What Problem Does Server Data Loading Solve?

When the amount of row data exceeds what is feasible to transfer to a browser at once, a partial data loading solution becomes necessary. Developers typically choose one of these approaches:

Pagination: Load one page of data at a time.
Infinite scrolling: Lazily load more data as the user scrolls down.
Viewport-based loading: Load only the rows currently in view.

LyteNyte Grid supports all three approaches. The guides in this section focus on viewport-based loading, which is flexible but can be complex to configure. Since LyteNyte Grid handles client-side loading, you only need to implement the server-side logic.

Why Use Server Data Loading?

Server data loading delivers a client-side experience with the expected trade-off of network latency. It provides:

Direct Row Interaction: When a user scrolls to a specific index, like row 9,500, the grid requests the surrounding rows from the server.
Advanced Operations: Natively supports pivoting and grouping, which are complex or limited when using pagination and infinite scrolling.

Enabling Server Data Source

To enable the server data source, developers must provide LyteNyte Grid with:

Total Row Count: Sets the size of the scrollable area. With row grouping, provide group-specific row counts that the grid combines to represent the full dataset.
queryFn: A function LyteNyte Grid calls to fetch rows from your server.

Server Data Flow

The server data source follows a well defined lifecycle:

Initial Data Fetch

When the grid first renders, LyteNyte Grid calls the dataFetcher function with an initial request payload. At this stage, LyteNyte Grid has no cached view data. The initial response provides the rowCount and the first rows to display.
User Scrolls (View Changes)

LyteNyte Grid tracks which rows are visible. When the view changes, it determines whether to request more data from the server. If necessary, multiple requests may be issued.
Actions That Reset the View

Certain actions trigger a full view reset and a fresh data request. Sorting a column or grouping rows, for example, alters the dataset and requires the grid to re-fetch the data.

Other operations extend this basic flow. LyteNyte Grid’s server data source supports various advanced configurations. A simple example of a server data loading grid is shown below.

Basic Server Data

1
"use client";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { Grid, useServerDataSource } from "@1771technologies/lytenyte-pro";
4

5
import { useMemo } from "react";
6
import { Server } from "./server.js";
7
import type { MovieData } from "./data";
8
import {
9
  GenreRenderer,
10
  LinkRenderer,
11
  NameCellRenderer,
12
  RatingRenderer,
13
  ReleasedRenderer,
14
  TypeRenderer,
15
} from "./components.js";
16

17
export interface GridSpec {
18
  readonly data: MovieData;
19
}
20

21
const columns: Grid.Column<GridSpec>[] = [
22
  {
23
    id: "#",
24
    name: "",
25
    width: 30,
26
    field: "link",
27
    widthMin: 30,
28
    widthMax: 30,
29
    cellRenderer: LinkRenderer,
30
  },
31
  { id: "name", name: "Title", width: 250, widthFlex: 1, cellRenderer: NameCellRenderer },
32
  { id: "released_at", name: "Released", width: 120, cellRenderer: ReleasedRenderer },
33
  { id: "genre", name: "Genre", cellRenderer: GenreRenderer },
34
  { id: "type", name: "Type", width: 120, cellRenderer: TypeRenderer },
35
  { id: "imdb_rating", name: "Rating", width: 120, cellRenderer: RatingRenderer },
36
];
37

38
export default function ServerDataDemo() {
39
  const ds = useServerDataSource<GridSpec["data"], []>({
40
    queryFn: async (params) => {
41
      return await Server(params.requests);
42
    },
43
    queryKey: [],
44
    blockSize: 50,
45
  });
46

47
  const isLoading = ds.isLoading.useValue();
48

49
  return (
50
    <div className="ln-grid" style={{ height: 500 }}>
51
      <Grid
52
        rowSource={ds}
53
        columns={columns}
54
        styles={useMemo(() => {
55
          return { viewport: { style: { scrollbarGutter: "stable" } } };
56
        }, [])}
57
        slotViewportOverlay={
58
          isLoading && (
59
            <div className="bg-ln-gray-20/40 absolute left-0 top-0 z-20 h-full w-full animate-pulse"></div>
60
          )
61
        }
62
      />
63
    </div>
64
  );
65
}

1
import { format } from "date-fns";
2
import type { JSX } from "react";
3
import { Rating, ThinRoundedStar } from "@smastrom/react-rating";
4
import "@smastrom/react-rating/style.css";
5
import { Link1Icon } from "@radix-ui/react-icons";
6
import type { Grid } from "@1771technologies/lytenyte-pro";
7
import type { GridSpec } from "./demo";
8

9
function SkeletonLoading() {
10
  return (
11
    <div className="h-full w-full p-2">
12
      <div className="bg-ln-gray-20 h-full w-full animate-pulse rounded-xl"></div>
13
    </div>
14
  );
15
}
16

17
export const NameCellRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
18
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
19

20
  const field = params.api.columnField(params.column, params.row) as string;
21

22
  return <div className="overflow-hidden text-ellipsis">{field}</div>;
23
};
24

25
export const ReleasedRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
26
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
27
  const field = params.api.columnField(params.column, params.row) as string;
28

29
  const formatted = field ? format(field, "dd MMM yyyy") : "-";
30

31
  return <div>{formatted}</div>;
32
};
33

34
export const GenreRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
35
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
36
  const field = params.api.columnField(params.column, params.row) as string;
37

38
  const splits = field ? field.split(",") : [];
39

40
  return (
41
    <div className="flex h-full w-full items-center gap-1">
42
      {splits.map((c) => {
43
        return (
44
          <div
45
            className="border-(--primary-200) text-(--primary-700) dark:text-(--primary-500) bg-(--primary-200)/20 rounded border p-1 px-2 text-xs"
46
            key={c}
47
          >
48
            {c}
49
          </div>
50
        );
51
      })}
52
    </div>
53
  );
54
};
55

56
const FilmRealIcon = (props: JSX.IntrinsicElements["svg"]) => {
57
  return (
58
    <svg
59
      xmlns="http://www.w3.org/2000/svg"
60
      width="20"
61
      height="20"
62
      fill="currentcolor"
63
      viewBox="0 0 256 256"
64
      {...props}
65
    >
66
      <path d="M232,216H183.36A103.95,103.95,0,1,0,128,232H232a8,8,0,0,0,0-16ZM40,128a88,88,0,1,1,88,88A88.1,88.1,0,0,1,40,128Zm88-24a24,24,0,1,0-24-24A24,24,0,0,0,128,104Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,128,72Zm24,104a24,24,0,1,0-24,24A24,24,0,0,0,152,176Zm-32,0a8,8,0,1,1,8,8A8,8,0,0,1,120,176Zm56-24a24,24,0,1,0-24-24A24,24,0,0,0,176,152Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,176,120ZM80,104a24,24,0,1,0,24,24A24,24,0,0,0,80,104Zm0,32a8,8,0,1,1,8-8A8,8,0,0,1,80,136Z"></path>
67
    </svg>
68
  );
69
};
70

71
const MonitorPlayIcon = (props: JSX.IntrinsicElements["svg"]) => {
72
  return (
73
    <svg
74
      xmlns="http://www.w3.org/2000/svg"
75
      width="20"
76
      height="20"
77
      fill="currentcolor"
78
      viewBox="0 0 256 256"
79
      {...props}
80
    >
81
      <path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Zm-3.56-110.66-48-32A8,8,0,0,0,104,88v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,137.05V103l25.58,17Z"></path>
82
    </svg>
83
  );
84
};
85

86
export const TypeRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
87
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
88
  const field = params.api.columnField(params.column, params.row) as string;
89

90
  const isMovie = field === "Movie";
91
  const Icon = isMovie ? FilmRealIcon : MonitorPlayIcon;
92

93
  return (
94
    <div className="flex h-full w-full items-center gap-2">
95
      <span className={isMovie ? "text-(--primary-500)" : "text-ln-primary-50"}>
96
        <Icon />
97
      </span>
98
      <span>{field}</span>
99
    </div>
100
  );
101
};
102

103
export const RatingRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
104
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
105
  const field = params.api.columnField(params.column, params.row) as string;
106
  const rating = field ? Number.parseFloat(field.split("/")[0]) : null;
107
  if (rating == null || Number.isNaN(rating)) return "-";
108

109
  return (
110
    <div className="flex h-full w-full items-center">
111
      <Rating
112
        style={{ maxWidth: 100 }}
113
        halfFillMode="svg"
114
        value={Math.round(rating / 2)}
115
        itemStyles={{
116
          activeFillColor: "hsla(173, 78%, 34%, 1)",
117
          itemShapes: ThinRoundedStar,
118
          inactiveFillColor: "transparent",
119
          inactiveBoxBorderColor: "transparent",
120
          inactiveBoxColor: "transparent",
121
          inactiveStrokeColor: "transparent",
122
        }}
123
        readOnly
124
      />
125
    </div>
126
  );
127
};
128

129
export const LinkRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
130
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
131
  const field = params.api.columnField(params.column, params.row) as string;
132

133
  return (
134
    <a href={field} className="text-(--primary-500)">
135
      <Link1Icon />
136
    </a>
137
  );
138
};

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

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

6
export async function Server(reqs: DataRequest[]) {
7
  // Simulate latency and server work.
8
  await sleep();
9

10
  return reqs.map((c) => {
11
    return {
12
      asOfTime: Date.now(),
13
      data: data.slice(c.start, c.end).map((x) => {
14
        return {
15
          kind: "leaf",
16
          id: x.uniq_id,
17
          data: x,
18
        };
19
      }),
20
      start: c.start,
21
      end: c.end,
22
      kind: "center",
23
      path: c.path,
24
      size: data.length,
25
    } satisfies DataResponse;
26
  });
27
}

Next Steps

Data Interface: Request and response interface of the LyteNyte Grid server data source.
Server Row Data: Slice and load rows from the server.
Server Row Grouping: Use the server data source to load and manage group slices.
Data Updates: Learn the steps for updating server-loaded data.