Infinite Data Loading

Infinite Rows

Load rows continuously as the user scrolls toward the bottom of the viewport.

Note

Infinite row loading in LyteNyte Grid uses the server data source. You must be familiar with the server data source before reading this guide.

Infinite Row Loading

Infinite row loading detects when the user scrolls near the end of the viewport and requests the next slice of data. When the scroll position reaches a defined threshold, retrieve the current view and request the next slice.

The following example uses the events property on the grid to register a scrollEnd listener. The listener checks whether the scroll position is within 100px of the total scroll height.

1
<Grid
2
  events={useMemo<Grid.Events<GridSpec>>(() => {
3
    return {
4
      viewport: {
5
        scrollEnd: ({ viewport }) => {
6
          const top = viewport.scrollTop;
7
          const left = viewport.scrollHeight - viewport.clientHeight - top;
8
          if (left < 100) {
9
            const req = ds.requestsForView.get().at(-1)!;
10
            const next = { ...req, start: req.end, end: req.end + 100 };
11
            ds.pushRequests([next]);
12
          }
13
        },
14
      },
15
    };
16
  }, [ds])}
17
/>

This example shows one approach to implementing infinite row loading. The key implementation detail is creating a request for the next data slice and calling ds.pushRequests to fetch it. For more details, see the Data Interface guide.

The demo below demonstrates infinite data loading using this approach. When you scroll near the end of the grid, the grid loads additional rows after a brief delay.

Infinite Rows

1
import "@1771technologies/lytenyte-pro/components.css";
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 InfiniteDemo() {
39
  const ds = useServerDataSource<GridSpec["data"], []>({
40
    queryFn: async ({ requests }) => {
41
      return await Server(requests);
42
    },
43
    queryKey: [],
44
    blockSize: 100,
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
        events={useMemo<Grid.Events<GridSpec>>(() => {
55
          return {
56
            viewport: {
57
              scrollEnd: ({ viewport }) => {
58
                const top = viewport.scrollTop;
59
                const left = viewport.scrollHeight - viewport.clientHeight - top;
60
                if (left < 100) {
61
                  const req = ds.requestsForView.get().at(-1)!;
62
                  const next = { ...req, start: req.end, end: req.end + 100 };
63
                  ds.pushRequests([next]);
64
                }
65
              },
66
            },
67
          };
68
        }, [ds])}
69
        styles={useMemo(() => {
70
          return { viewport: { style: { scrollbarGutter: "stable" } } };
71
        }, [])}
72
        slotViewportOverlay={
73
          isLoading && (
74
            <div className="bg-ln-gray-20/40 absolute left-0 top-0 z-20 h-full w-full animate-pulse"></div>
75
          )
76
        }
77
      />
78
    </div>
79
  );
80
}

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
  const pages = reqs.map((c) => {
11
    return {
12
      asOfTime: Date.now(),
13
      data: data.slice(c.start, c.end).map((x) => {
14
        return { kind: "leaf", id: x.uniq_id, data: x };
15
      }),
16
      start: c.start,
17
      end: c.end,
18
      kind: "center",
19
      path: c.path,
20
      size: Math.min(data.length, c.end),
21
    } satisfies DataResponse;
22
  });
23

24
  return pages;
25
}

Next Steps

Infinite Row Sorting: Infinitely load rows sorted on the server.
Infinite Row Filtering: Request filtered rows as the user scrolls infinitely.
Data Interface: Request and response interface of the LyteNyte Grid server data source.

Infinite Rows

Note

Infinite Row Loading

Infinite Rows

Next Steps

On this page