@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
134 lines (133 loc) • 4.45 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
import * as n from "react";
import { useUnstyled as j, uGrid as F, getter as U, classNames as g } from "@progress/kendo-react-common";
import { TableSelection as W, tableKeyboardNavigationTopPinnedAttributes as _, tableKeyboardNavigationBottomPinnedAttributes as q } from "@progress/kendo-react-data-tools";
import { GridContext as J } from "../utils/GridContext.mjs";
import { GridRowRenderer as O } from "../rows/GridRowRenderer.mjs";
import { getRowContents as Q } from "../getRowContents.mjs";
const ee = ({
size: h,
colGroups: y,
dataRowContext: s,
position: I,
pinnedItems: p,
isStackedMode: k,
groupLevelCount: N,
stackedLayoutSettings: w,
rowHeight: C,
rows: a,
selectable: i,
edit: G
}) => {
const d = j(), E = d != null && d.uGrid ? d.uGrid : F, o = n.useContext(J), r = I === "top", f = r ? o.pinnedTopRef : o.pinnedBottomRef, P = r ? o.pinnedTopTableRef : o.pinnedBottomTableRef, u = n.useRef(null), R = n.useRef(!1);
n.useImperativeHandle(P, () => ({
setWidth: (e) => {
u.current && (u.current.style.width = e ? e + "px" : "");
},
setScrollLeft: (e) => {
f.current && f.current.scrollLeft !== e && (R.current = !0, f.current.scrollLeft = e, R.current = !1);
}
}));
const v = n.useCallback(
(e) => {
var c;
const t = (c = o.containerElementRef) == null ? void 0 : c.current;
if (!t || R.current)
return;
const l = e.currentTarget.scrollLeft;
t.scrollLeft !== l && (t.scrollLeft = l);
},
[o.containerElementRef]
), L = n.useCallback(
(e) => {
var t;
(t = o.columnResizeRef) != null && t.current && (r ? o.columnResizeRef.current.colGroupPinnedTop = e : o.columnResizeRef.current.colGroupPinnedBottom = e);
},
[o.columnResizeRef, r]
), K = a != null && a.pinnedData ? { ...a, data: a.pinnedData } : a, S = p.map((e, t) => {
var T;
const l = {
dataItem: e,
rowType: "data",
level: 0,
expanded: !1,
dataIndex: t
}, c = s.dataItemKey, b = "pinned_" + ((c ? U(c)(e) : void 0) || "ai" + t), m = Q(s, G, l, b, t, !1);
return /* @__PURE__ */ n.createElement(
O,
{
key: b,
isStackedMode: !!k,
item: l,
rowId: b,
dataIndex: t,
ariaRowIndex: t + 1,
absoluteRowIndex: t,
isAltRow: t % 2 !== 0,
isHidden: !1,
isRowReorderable: !1,
rowHeight: C,
rows: K,
leafColumns: s.leafColumns,
groupLevelCount: N || 0,
stackedLayoutSettings: w,
cells: s.cells,
editMode: (T = s.editable) == null ? void 0 : T.mode,
isSelected: m.isSelected,
isHighlighted: m.isHighlighted,
isInEdit: m.isInEdit && !s.isEditDialog,
preparedCells: m.row,
showDetailToggle: !1,
isDetailExpanded: !1
}
);
}), B = g("k-grid-pinned-container", {
"k-pos-bottom": !r
}), D = g(E.table({ size: h })), z = y ? n.cloneElement(y, { colGroupRef: L }) : null, A = n.useCallback(
(e) => {
var l;
const t = p[e.startRowIndex];
t && ((l = o.pinnedSelectionRelease) == null || l.call(o, e, t));
},
[o, p]
), H = n.useMemo(() => i && { ...typeof i == "object" ? i : {}, enabled: !0, drag: !1 }, [i]), M = r ? _ : q;
return /* @__PURE__ */ n.createElement(
"div",
{
className: B,
style: {
display: S.length ? "" : "none"
}
},
/* @__PURE__ */ n.createElement("div", { className: "k-grid-pinned-wrap", ref: f, onScroll: v }, /* @__PURE__ */ n.createElement(
W,
{
selectable: H,
onRelease: A,
childRef: (e) => {
u.current = e;
}
},
/* @__PURE__ */ n.createElement(
"table",
{
ref: u,
className: D,
"aria-label": r ? "Pinned top rows" : "Pinned bottom rows"
},
z,
/* @__PURE__ */ n.createElement("tbody", { className: g(E.tbody({})), ...M }, S)
)
))
);
};
export {
ee as PinnedRowsTable
};