@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
57 lines (56 loc) • 3.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// import { useTheme } from "@1771technologies/play-frame";
import "@1771technologies/lytenyte-design/shadcn-vars.css";
import "@1771technologies/lytenyte-design/fonts.css";
import "../../css/grid-full.css";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { ViewportShadows } from "@1771technologies/lytenyte-core/components";
import { useClientDataSource } from "../data-source-client/use-client-data-source.js";
import { useMemo, useState } from "react";
import { RowGroupCell } from "../components/row-group-cell.js";
import { Grid } from "../index.js";
const columns = [
{ id: "age", name: "bob", groupPath: ["Alpha", "Beta"], type: "number" },
{ id: "marital", groupPath: ["Alpha"] },
{ id: "default", groupPath: ["Top Dog"] },
{ id: "housing" },
{ id: "loan" },
{ id: "contact", groupPath: ["Alpha", "Beta", "Carlson"] },
{ id: "day", groupPath: ["Alpha", "Beta"] },
{ id: "month", groupPath: ["Alpha"] },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays", groupPath: ["Carlson"] },
{ id: "previous", groupPath: ["Carlson", "Delta"] },
{ id: "poutcome" },
{ id: "y" },
];
const sumAge = (_, rows) => rows.reduce((acc, x) => x.data.balance + acc, 0);
export default function Experimental() {
const [pivotMode, setPivotMode] = useState(false);
const ds = useClientDataSource({
data: bankDataSmall,
rowGroupDefaultExpansion: true,
group: [{ id: "marital" }, { id: "contact" }, { id: "age" }],
pivotMode,
pivotGrandTotals: "bottom",
pivotModel: {
columns: [{ id: "contact" }, { id: "education" }],
rows: [{ id: "marital" }, { id: "age" }],
measures: [
{
dim: { id: "Balance", type: "number" },
fn: sumAge,
},
],
},
});
const pivotProps = ds.usePivotProps();
const [rowGroupColumn, setRowGroupColumn] = useState({
cellRenderer: RowGroupCell,
});
return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", padding: "8px" }, children: _jsx("button", { onClick: () => setPivotMode((prev) => !prev), children: "Toggle Pivot Mode" }) }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid ln-shadcn", style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, columnBase: useMemo(() => ({ movable: true, resizable: true, width: 100 }), []), slotShadows: ViewportShadows, columnGroupRenderer: (props) => {
const label = props.groupPath.at(-1);
return (_jsxs("div", { children: [label, props.collapsible && (_jsx("button", { onClick: () => props.api.columnToggleGroup(props.groupPath), children: ">" }))] }));
}, rowSource: ds, rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, rowSelectionMode: "multiple", ...pivotProps }) }) })] }));
}