@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
75 lines (74 loc) • 3.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "@1771technologies/lytenyte-design/light-dark.css";
import "@1771technologies/lytenyte-design/shadcn-vars.css";
import "../../../css/pill-manager.css";
import { PillManager } from "./root.js";
import { useState } from "react";
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"], grouped: true },
{ id: "day", groupPath: ["Alpha", "Beta"] },
{ id: "month", groupPath: ["Alpha"], grouped: true },
{ id: "duration", grouped: true },
{ id: "campaign", grouped: true },
{ id: "pdays", groupPath: ["Carlson"] },
{ id: "previous", groupPath: ["Carlson", "Delta"] },
{ id: "poutcome" },
{ id: "y" },
];
export default function Demo() {
const [state, setState] = useState([
{
id: "columns",
type: "columns",
label: "Columns",
pills: columns.map((x) => ({ ...x, active: !x.hide, movable: true, tags: ["groupable"] })),
},
{
id: "group",
type: "row-groups",
label: "Row Groups",
accepts: ["groupable"],
pills: columns.filter((x) => x.grouped).map((x) => ({ ...x, active: true, movable: true })),
},
]);
return (_jsxs("div", { className: "ln-shadcn", style: { display: "flex", gap: 8, flexDirection: "column" }, children: [_jsx("div", { style: { height: "200px" }, children: _jsx(PillManager, { rows: state, onPillRowChange: (p) => {
setState(p.full);
}, onPillItemThrown: (x) => {
setState((prev) => {
const next = [...prev];
next[x.index] = {
...next[x.index],
pills: next[x.index].pills.filter((item) => item.id !== x.item.id),
};
return next;
});
}, onPillItemActiveChange: (p) => {
setState((prev) => {
const next = [...prev];
next.splice(p.index, 1, p.row);
return next;
});
} }) }), _jsx("div", { style: { height: "200px", display: "flex", flexDirection: "column", alignItems: "center" }, children: _jsx("div", { style: { width: 400 }, children: _jsx(PillManager, { orientation: "vertical", rows: state, onPillRowChange: (p) => {
setState(p.full);
}, onPillItemThrown: (x) => {
setState((prev) => {
const next = [...prev];
next[x.index] = {
...next[x.index],
pills: next[x.index].pills.filter((item) => item.id !== x.item.id),
};
return next;
});
}, onPillItemActiveChange: (p) => {
setState((prev) => {
const next = [...prev];
next.splice(p.index, 1, p.row);
return next;
});
} }) }) })] }));
}