@1771technologies/lytenyte-pro/dist/__play__/paginated.play.js

Blazingly fast headless React data grid with 100s of features.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "@1771technologies/play-frame";
import "@1771technologies/lytenyte-design/fonts.css";
import "../../css/grid-full.css";
import { useRef, useState } from "react";
import { RowGroupCell } from "../components/row-group-cell.js";
import { useServerDataSource } from "../data-source-server/use-server-data-source.js";
import { Server } from "./basic-server-data/page-server.js";
import { Grid } from "../index.js";
const columns = [
    {
        id: "#",
        name: "",
        width: 30,
        field: "link",
        widthMin: 30,
        widthMax: 30,
    },
    { id: "name", name: "Title", width: 250, widthFlex: 1 },
    { id: "released_at", name: "Released", width: 120 },
    { id: "genre", name: "Genre" },
    { id: "type", name: "Type", width: 120 },
    { id: "imdb_rating", name: "Rating", width: 120 },
];
export default function Experimental() {
    const [page, setPage] = useState(0);
    const [pageCount, setPageCount] = useState(null);
    const [pageSize, setPageSize] = useState(20);
    const ds = useServerDataSource({
        rowGroupDefaultExpansion: true,
        queryFn: async ({ requests, queryKey }) => {
            const page = queryKey[0];
            const pageSize = queryKey[1];
            const result = await Server(requests, page, pageSize);
            setPageCount(pageCount);
            return result.pages;
        },
        queryKey: [page, pageSize],
    });
    const [rowGroupColumn, setRowGroupColumn] = useState({
        cellRenderer: RowGroupCell,
    });
    const isLoading = ds.isLoading.useValue();
    const error = ds.loadingError.useValue();
    const { resolvedTheme } = useTheme();
    const ref = useRef(null);
    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { height: 40 }, children: _jsxs(_Fragment, { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsx("div", { children: `${error}` })] }) }), _jsx("div", { children: _jsx("button", { onClick: () => setPageSize((prev) => prev + 10), children: "Page " }) }), _jsx("div", { children: _jsx("button", { onClick: () => setPage((next) => next + 1), children: "Next" }) }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "50vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, rowSource: ds, rowHeight: "fill:30", rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, virtualizeRows: false, ref: ref }) }) })] }));
}