@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
81 lines (80 loc) • 4.92 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import "../../../main.css";
import "./cell-selection.css";
import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
import { useLyteNyte } from "../../state/use-lytenyte.js";
import { useId } from "react";
import { Viewport } from "../../grid/viewport.js";
import { Root } from "../../grid/root.js";
import { Header } from "../../grid/header.js";
import { HeaderRow } from "../../grid/header-row.js";
import { HeaderGroupCell } from "../../grid/header-group-cell.js";
import { HeaderCell } from "../../grid/header-cell.js";
import { RowsContainer } from "../../grid/rows-container.js";
import { RowsBottom, RowsCenter, RowsTop } from "../../grid/rows-sections.js";
import { RowHandler } from "../test-utils/row-handler.js";
import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
const columns = [
{ id: "age" },
{ id: "job" },
{ id: "balance", pin: "start" },
{ id: "education" },
{ id: "marital" },
{ id: "default" },
{ id: "housing" },
{ id: "loan" },
{ id: "contact" },
{ id: "day" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome", name: "P Outcome" },
{ id: "y" },
];
export default function CellSelection({ data = bankDataSmall }) {
const ds = useClientRowDataSource({
data: data,
topData: data.slice(0, 2),
bottomData: data.slice(0, 2),
});
const g = useLyteNyte({
gridId: useId(),
columns,
rowDataSource: ds,
cellSelectionMode: "range",
columnBase: {
uiHints: {
movable: true,
resizable: true,
},
},
});
const view = g.view.useValue();
const selections = g.state.cellSelections.useValue();
return (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { onClick: () => g.state.rtl.set((prev) => !prev), children: ["RTL: ", g.state.rtl.get() ? "Yes" : "No"] }), _jsx("button", { onClick: () => g.state.columnMarkerEnabled.set((prev) => !prev), children: "Toggle Marker" }), _jsx("button", { onClick: () => g.state.cellSelectionMode.set((prev) => prev === "multi-range" ? "range" : "multi-range"), children: "Range Selection" }), _jsx("pre", { children: JSON.stringify(selections) })] }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
if (c.kind === "group") {
return (_jsx(HeaderGroupCell, { cell: c, style: {
paddingInline: "16px",
background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
color: "light-dark(black,white)",
display: "flex",
alignItems: "center",
borderBottom: "1px solid light-dark(gray, #444242)",
borderRight: "1px solid light-dark(gray, #444242)",
} }, c.idOccurrence));
}
return (_jsx(HeaderCell, { cell: c, style: {
paddingInline: "16px",
background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
color: "light-dark(black,white)",
display: "flex",
alignItems: "center",
borderBottom: "1px solid light-dark(gray, #444242)",
borderRight: "1px solid light-dark(gray, #444242)",
} }, c.column.id));
}) }, i));
}) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) })] }));
}