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