@progress/kendo-react-grid/components/PinnedRowsTable.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @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";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),d=require("@progress/kendo-react-common"),E=require("@progress/kendo-react-data-tools"),H=require("../utils/GridContext.js"),_=require("../rows/GridRowRenderer.js"),F=require("../getRowContents.js");function U(s){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const p=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(c,r,p.get?p:{enumerable:!0,get:()=>s[r]})}}return c.default=s,Object.freeze(c)}const n=U(A),W=({size:s,colGroups:c,dataRowContext:r,position:p,pinnedItems:y,isStackedMode:P,groupLevelCount:h,stackedLayoutSettings:C,rowHeight:G,rows:i,selectable:u,edit:I})=>{const m=d.useUnstyled(),k=m!=null&&m.uGrid?m.uGrid:d.uGrid,o=n.useContext(H.GridContext),a=p==="top",R=a?o.pinnedTopRef:o.pinnedBottomRef,v=a?o.pinnedTopTableRef:o.pinnedBottomTableRef,b=n.useRef(null),S=n.useRef(!1);n.useImperativeHandle(v,()=>({setWidth:e=>{b.current&&(b.current.style.width=e?e+"px":"")},setScrollLeft:e=>{R.current&&R.current.scrollLeft!==e&&(S.current=!0,R.current.scrollLeft=e,S.current=!1)}}));const D=n.useCallback(e=>{var f;const t=(f=o.containerElementRef)==null?void 0:f.current;if(!t||S.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&&(a?o.columnResizeRef.current.colGroupPinnedTop=e:o.columnResizeRef.current.colGroupPinnedBottom=e)},[o.columnResizeRef,a]),j=i!=null&&i.pinnedData?{...i,data:i.pinnedData}:i,w=y.map((e,t)=>{var N;const l={dataItem:e,rowType:"data",level:0,expanded:!1,dataIndex:t},f=r.dataItemKey,T="pinned_"+((f?d.getter(f)(e):void 0)||"ai"+t),g=F.getRowContents(r,I,l,T,t,!1);return n.createElement(_.GridRowRenderer,{key:T,isStackedMode:!!P,item:l,rowId:T,dataIndex:t,ariaRowIndex:t+1,absoluteRowIndex:t,isAltRow:t%2!==0,isHidden:!1,isRowReorderable:!1,rowHeight:G,rows:j,leafColumns:r.leafColumns,groupLevelCount:h||0,stackedLayoutSettings:C,cells:r.cells,editMode:(N=r.editable)==null?void 0:N.mode,isSelected:g.isSelected,isHighlighted:g.isHighlighted,isInEdit:g.isInEdit&&!r.isEditDialog,preparedCells:g.row,showDetailToggle:!1,isDetailExpanded:!1})}),q=d.classNames("k-grid-pinned-container",{"k-pos-bottom":!a}),K=d.classNames(k.table({size:s})),O=c?n.cloneElement(c,{colGroupRef:L}):null,z=n.useCallback(e=>{var l;const t=y[e.startRowIndex];t&&((l=o.pinnedSelectionRelease)==null||l.call(o,e,t))},[o,y]),B=n.useMemo(()=>u&&{...typeof u=="object"?u:{},enabled:!0,drag:!1},[u]),M=a?E.tableKeyboardNavigationTopPinnedAttributes:E.tableKeyboardNavigationBottomPinnedAttributes;return n.createElement("div",{className:q,style:{display:w.length?"":"none"}},n.createElement("div",{className:"k-grid-pinned-wrap",ref:R,onScroll:D},n.createElement(E.TableSelection,{selectable:B,onRelease:z,childRef:e=>{b.current=e}},n.createElement("table",{ref:b,className:K,"aria-label":a?"Pinned top rows":"Pinned bottom rows"},O,n.createElement("tbody",{className:d.classNames(k.tbody({})),...M},w)))))};exports.PinnedRowsTable=W;