@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
80 lines (79 loc) • 3.43 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import "@1771technologies/lytenyte-design/shadcn-vars.css";
import "@1771technologies/lytenyte-design/fonts.css";
import "../../css/grid-full.css";
import { useState } from "react";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useClientDataSource } from "../data-source-client/use-client-data-source.js";
import { Grid } from "../index.js";
import { annotationBorder } from "./renderers/border.js";
import { annotationArrow } from "./renderers/arrow.js";
import { annotationComment } from "./renderers/comment.js";
const columns = [
{ id: "age", pin: "start", width: 90 },
{ id: "job", pin: "start", width: 130 },
{ id: "balance", width: 110 },
{ id: "marital", width: 110 },
{ id: "education", width: 110 },
{ id: "default", width: 90 },
{ id: "housing", width: 90 },
{ id: "loan", width: 90 },
{ id: "contact", width: 110 },
{ id: "day", width: 90 },
{ id: "month", width: 90 },
{ id: "duration", width: 110 },
{ id: "campaign", pin: "end", width: 110 },
{ id: "y", pin: "end", width: 90 },
];
export default function AnnotationsPlay() {
const [sync, setSync] = useState(false);
const ds = useClientDataSource({
data: bankDataSmall,
topData: bankDataSmall.slice(0, 2),
botData: bankDataSmall.slice(0, 2),
});
const annotations = [
{
id: "range-corner",
anchor: { kind: "range", rowStart: 0, rowEnd: 2, colStart: 0, colEnd: 2 },
render: annotationBorder({ color: "#ef4444", width: 3 }),
},
{
id: "range-center",
anchor: { kind: "range", rowStart: 10, rowEnd: 13, colStart: 3, colEnd: 6 },
render: annotationBorder({ color: "#22c55e" }),
},
{
id: "point-comment",
anchor: { kind: "point", x: 700, y: 800 },
render: annotationComment({ text: "This scrolls with the data" }),
},
{
id: "header-arrow-end",
anchor: { kind: "header", colStart: 12, colEnd: 13 },
render: annotationArrow({ direction: "down", color: "#3b82f6" }),
},
{
id: "header-arrow-center",
anchor: { kind: "header", colStart: 5, colEnd: 6 },
render: annotationArrow({ direction: "down", color: "#f59e0b" }),
},
{
id: "range-by-id",
anchor: {
kind: "range",
rowStart: "leaf-15",
rowEnd: "leaf-17",
colStart: "contact",
colEnd: "duration",
},
render: annotationBorder({ color: "#a855f7", width: 3 }),
},
{
id: "range-bad-id",
anchor: { kind: "range", rowStart: "does-not-exist", rowEnd: "leaf-17", colStart: 0, colEnd: 2 },
render: annotationBorder({ color: "#000000" }),
},
];
return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setSync((s) => !s), children: "Toggle suppressScrollFlash (sync mode)" }), _jsx("div", { style: { width: "100%", height: "90vh" }, className: "ln-grid ln-shadcn", children: _jsx(Grid, { columns: columns, columnBase: { resizable: true }, rowSource: ds, suppressScrollFlash: sync, annotations: annotations }) })] }));
}