@progress/kendo-react-pivotgrid/PivotGrid.js

React PivotGrid (also called Pivot Table) can be data-bound to an OLAP service and customized extensively. KendoReact PivotGrid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const He=require("react"),c=require("@progress/kendo-react-common"),ke=require("./package-metadata.js"),Se=require("@progress/kendo-react-intl"),D=require("./messages/index.js"),Pe=require("./components/Row.js"),Ae=require("./components/Cell.js"),J=require("./hooks/useHeaders.js"),xe=require("./components/HeaderCell.js"),Te=require("./hooks/useHorizontalScrollSync.js"),Ne=require("./hooks/useVerticalScrollSync.js"),qe=require("./components/Column.js"),f=require("./utils/index.js"),u=require("@progress/kendo-pivotgrid-common");function De(n){const w=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const m in n)if(m!=="default"){const v=Object.getOwnPropertyDescriptor(n,m);Object.defineProperty(w,m,v.get?v:{enumerable:!0,get:()=>n[m]})}}return w.default=n,Object.freeze(w)}const t=De(He),Q=t.forwardRef((n,w)=>{const m=!c.validatePackage(ke.packageMetadata,{component:"PivotGrid"}),{rows:v,rowAxes:U,columns:Y,columnAxes:Z,data:ee}={...y,...n},s=t.useRef(null),E=t.useRef(null),d=t.useRef(null),b=t.useRef(null),O=t.useRef(null),z=t.useRef(null),S=t.useRef(null),te=Se.useLocalization(),ne=(e,r)=>{n.onRowAxesChange&&n.onRowAxesChange({value:e,target:E.current,syntheticEvent:r})},ae=(e,r)=>{n.onColumnAxesChange&&n.onColumnAxesChange({value:e,target:E.current,syntheticEvent:r})},L=u.toTree((v||[]).slice()),[,oe]=J.useHeaders((U||[]).slice(),L,ne),[I,C,re,G]=u.toRows(L),j=u.toTree((Y||[]).slice()),[,le]=J.useHeaders((Z||[]).slice(),j,ae),[R,i,,K]=u.toColumns(j),P=u.toData((ee||[]).slice(),i,C,K,re);t.useImperativeHandle(E,()=>({props:n,element:s.current,columnHeaderRows:R,rowHeaderRows:I,dataCells:P,rowHeaderBreadth:G,columnHeaderBreadth:K})),t.useImperativeHandle(w,()=>E.current);const B=[],V=[],W=[],[A,x]=c.useCustomComponent(n.row||y.row),[T,N]=c.useCustomComponent(n.column||y.column),[se,ce]=c.useCustomComponent(n.cell||y.cell),[_,M]=c.useCustomComponent(n.headerCell||y.headerCell),ie=n.columnHeadersRow||A,ue=n.columnHeadersColumn||T,de=n.columnHeadersCell||_,me=n.rowHeadersRow||A,Ce=n.rowHeadersColumn||T,pe=n.rowHeadersCell||_,he=n.dataRow||A,ge=n.dataColumn||T;for(let e=0;e<i.length;e++)B.push(t.createElement(ge,{key:String(i[e].path),...N,path:i[e].path})),W.push(t.createElement(ue,{key:String(i[e].path),...N,path:i[e].path}));for(let e=0;e<G;e++)V.push(t.createElement(Ce,{key:e,...N}));const fe=e=>{e.target.props.expandable&&le({type:u.HEADERS_ACTION.toggle,payload:e.target.props.dataItem.path},e.syntheticEvent)},we=e=>{e.target.props.expandable&&oe({type:u.HEADERS_ACTION.toggle,payload:e.target.props.dataItem.path},e.syntheticEvent)},F=Te.useHorizontalScrollSync(S,z),be=Ne.useVerticalScrollSync(S,O),ye=e=>{F(e),be(e)},X=t.useCallback(()=>{s.current&&b.current&&(s.current.style.gridTemplateRows="",s.current.style.gridTemplateRows=`${b.current.offsetHeight}px 1fr`)},[]),$=t.useCallback(()=>{s.current&&d.current&&(s.current.style.gridTemplateColumns="",s.current.style.gridTemplateColumns=`${d.current.offsetWidth}px 1fr`)},[]),p=t.useRef(new u.PivotGridNavigation({tabIndex:n.tabIndex||0}));t.useEffect(()=>{if(s.current){const e=n.tabIndex||0;if(p.current.stop(),p.current.tabIndex=e,n.navigatable){p.current.start(s.current);const r=p.current.first;r&&r.setAttribute("tabindex",String(e))}}return()=>{p.current.stop()}},[n.tabIndex,n.navigatable]),t.useEffect(()=>{p.current.update()}),t.useEffect(()=>{if(b.current){const e=new window.ResizeObserver(()=>{window.requestAnimationFrame(()=>{X()})});return e.observe(b.current),()=>{e.disconnect()}}},[X]),t.useEffect(()=>{if(d.current){const e=new window.ResizeObserver(()=>{window.requestAnimationFrame(()=>{$()})});return e.observe(d.current),()=>{e.disconnect()}}},[$]),c.useIsomorphicLayoutEffect(()=>{if(c.setScrollbarWidth(),d.current){const e=new window.ResizeObserver(()=>window.requestAnimationFrame(()=>{c.setScrollbarWidth()}));return e.observe(d.current),()=>{e.disconnect()}}},[]);const h=new Array(R.length).fill([]).map(()=>new Array(i.length));R.forEach((e,r)=>{let a=0;Array.from(e.cells).forEach(o=>{const l=!!(o&&o.children&&o.children.length),q=(o?f.generateKey(o.normalizedPath)+(o.total?"|[TOTAL]":"")+(l?"|[EXPANDED]":""):"").replace(/\s/g,"-");if(o)for(let k=0;k<(o.colSpan||1);k++){for(let g=0;g<(o.rowSpan||1);g++){const ve=h[r+g].findIndex((Ee,Re)=>Re>=a&&!Ee);h[r+g][ve]=q}a++}})});const H=P.map(e=>e.cells.map(r=>f.generateDataKey(r.rowTuple.members,r.columnTuple.members).replace(/\s/g,"-")));return t.createElement("div",{ref:s,id:n.id,style:n.style,tabIndex:n.navigatable?void 0:n.tabIndex,className:c.classNames("k-pivotgrid",n.className),role:"grid"},m&&t.createElement(c.WatermarkOverlay,null),t.createElement("span",{className:"k-pivotgrid-empty-cell"},t.createElement("span",{className:"k-sr-only"},te.toLanguageString(D.emptyCellAriaLabel,D.messages[D.emptyCellAriaLabel]))),t.createElement("div",{ref:z,className:"k-pivotgrid-column-headers",onScroll:F},t.createElement("table",{ref:b,className:"k-pivotgrid-table",role:"none"},t.createElement("colgroup",null,W),t.createElement("tbody",{className:"k-pivotgrid-tbody",role:"rowgroup"},R.map((e,r)=>{let a=!1;return t.createElement(ie,{key:e.name,role:"row",...x},e.cells.map((o,l)=>{const q=l!==0&&!a;o&&(a=!0);const k=o&&!!(o.children&&o.children.length),g=o&&o.hasChildren&&(!o.total||o.total&&o.parent.total);return o?t.createElement(de,{...M,key:h[r][l],"data-key":h[r][l],id:h[r][l],columnPath:o.normalizedPath,rowSpan:o.rowSpan||void 0,colSpan:o.colSpan||void 0,onIconClick:fe,dataItem:o,expanded:k,expandable:g,total:o.total,first:q,root:o.levelNum===0,role:"columnheader"},o.caption):null}))})))),t.createElement("div",{ref:O,className:"k-pivotgrid-row-headers"},t.createElement("table",{ref:d,className:"k-pivotgrid-table",role:"none"},t.createElement("colgroup",null,V),t.createElement("tbody",{className:"k-pivotgrid-tbody",role:"rowgroup"},I.map((e,r)=>t.createElement(me,{key:f.generateKey(C[r].path),...x,path:C[r].path,role:"row",ariaOwns:H[r].join(" ")},e.cells.filter(Boolean).map(a=>a?t.createElement(pe,{...M,key:f.generateKey(a.normalizedPath)+(a.total?"|[TOTAL]":"")+(a.children&&a.children.length?"|[EXPANDED]":""),"data-key":f.generateKey(a.normalizedPath)+(a.total?"|[TOTAL]":"")+(a.children&&a.children.length?"|[EXPANDED]":""),rowPath:a.normalizedPath,rowSpan:a.rowSpan||void 0,colSpan:a.colSpan||void 0,dataItem:a,expanded:!!(a.children&&a.children.length),expandable:a.hasChildren&&!a.total,total:a.total,onIconClick:we,root:a.levelNum===0,role:"rowheader"},a.caption):null)))))),t.createElement("div",{ref:S,className:"k-pivotgrid-values",onScroll:ye},t.createElement("table",{className:"k-pivotgrid-table",role:"none"},t.createElement("colgroup",null,B),t.createElement("tbody",{className:"k-pivotgrid-tbody",role:"none"},P.map((e,r)=>t.createElement(he,{key:f.generateKey(C[r].path),...x,path:C[r].path,role:"none"},e.cells.map((a,o)=>t.createElement(se,{key:H[r][o],"data-key":H[r][o],id:H[r][o],...ce,rowPath:a.rowTuple.members.map(l=>l.name),columnPath:a.columnTuple.members.map(l=>l.name),dataItem:a,total:C[r].total||i[o].total,role:"gridcell",ariaDescribedby:h.map(l=>l[o]).join(" ")},a&&a.data&&a.data.fmtValue?a.data.fmtValue:" "))))))))}),y={rowAxes:[],columnAxes:[],data:[],row:Pe.PivotGridRow,column:qe.PivotGridColumn,cell:Ae.PivotGridCell,headerCell:xe.PivotGridHeaderCell};Q.displayName="KendoReactPivotGrid";exports.PivotGrid=Q;