@1771technologies/lytenyte-pro/dist/__play__/server.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/server.js";
import { Grid } from "../index.js";
const columns = [
    {
        id: "Gender",
        width: 120,
        widthFlex: 1,
    },
    {
        id: "Education Level",
        name: "Education",
        width: 160,
        hide: true,
        widthFlex: 1,
    },
    {
        id: "Age",
        type: "number",
        width: 100,
        widthFlex: 1,
    },
    {
        id: "Years of Experience",
        name: "YoE",
        type: "number",
        width: 100,
        widthFlex: 1,
    },
    { id: "Salary", type: "number", width: 160, widthFlex: 1 },
];
export default function Experimental() {
    const ds = useServerDataSource({
        rowGroupDefaultExpansion: true,
        queryFn: async ({ requests }) => {
            return Server(requests, []);
        },
        queryKey: [],
        rowUpdateOptimistically: true,
        onRowsAdded: async () => {
            //
        },
        onRowsDeleted: async () => { },
    });
    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: [_jsxs("div", { style: { height: 40 }, children: [_jsxs(_Fragment, { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsx("div", { children: `${error}` })] }), _jsx("button", { onClick: () => {
                            ref.current?.rowSelect({ selected: "all" });
                        }, children: "Select All" }), _jsx("button", { onClick: () => ref.current?.rowAdd([{ id: crypto.randomUUID(), data: {}, kind: "leaf", depth: 0 }]), children: "Add Row" })] }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, rowSource: ds, rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, columnMarker: {
                            on: true,
                            cellRenderer: ({ api, row }) => {
                                return _jsx("button", { onClick: () => api.rowDelete([row]), children: "X" });
                            },
                        }, ref: ref }) }) })] }));
}