Infinite Data Loading

Infinite Rows

Use the server data source to implement infinite scrolling and fetch rows as the user scrolls toward the bottom of the grid viewport.

Note

Infinite row loading uses the server data source. This guide assumes you’re familiar with the concepts covered in the Server Row Overview guide.

Infinite Row Loading

Infinite row loading detects when a user scrolls near the end of the viewport. Once the scroll position reaches a defined threshold, the grid requests the next data slice.

The example below uses the grid’s events property 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 Scrolling

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 by sending a defined sort model to the server.
Infinite Row Filtering: Request filtered rows from the server as the user scrolls.
Data Interface: Request and response interface of the LyteNyte Grid server data source.