@progress/kendo-react-grid/GridComponent.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid 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 It=require("react"),c=require("@progress/kendo-react-common"),Nt=require("@progress/kendo-data-query"),b=require("@progress/kendo-react-data-tools"),qt=require("./cells/hierarchycell/GridHierarchyCell.js"),kt=require("./cells/editcell/GridEditCell.js"),xt=require("./header/Header.js"),Dt=require("./header/HeaderRow.js"),Tt=require("./header/FilterRow.js"),Ht=require("./header/GroupPanel.js"),Pt=require("./footer/Footer.js"),u=require("./utils/index.js"),Kt=require("./cells/datacell/GridCell.js"),ze=require("./cells/groupcell/GridGroupCell.js"),At=require("./rows/GridRow.js"),Ot=require("./header/GridHeaderSelectionCell.js"),Ve=require("./components/noRecords/GridNoRecords.js"),je=require("./filterCommon.js"),Ft=require("./footer/FooterRow.js"),Lt=require("./paging/GridPagerSettings.js"),$e=require("./package-metadata.js"),Mt=require("./cells/detailcell/GridDetailCell.js"),Bt=require("./cells/GridDetailHierarchyCell.js"),Qe=require("./components/noRecords/GridNoRecordsContainer.js"),Ue=require("./GridClientWrapper.js"),_t=require("./components/colGroup/GridColGroup.js"),Wt=require("./components/table/GridTable.js"),Je=require("./components/GridDropClue.js"),Xe=require("./components/GridDragClue.js"),Ye=require("./components/table/GridTableBody.js"),zt=require("./components/PagerContainer.js"),Vt=require("./components/table/GridTableScrollable.js"),Ze=require("./components/GridElementContainer.js"),jt=require("./components/GridContainerElementContainer.js"),$t=require("./components/VirtualScrollHeightContainer.js"),ae=require("./messages/index.js"),Qt=require("./components/GridDraggableRowsContainer.js"),Ut=require("./cells/rowreordercell/GridRowReorderCell.js"),Jt=require("./header/client/GridHeaderRowReorderCell.js"),pe=require("./components/GridLoader.js"),Xt=require("./utils/premium.js"),et=require("@progress/kendo-react-intl"),Yt=require("./utils/virtualColumns.js"),Zt=require("./components/GridEditDialog.js"),pt=require("./cells/datacell/GridCellServer.js"),el=require("./cells/editcell/GridEditCellServer.js"),tl=require("./cells/selectioncell/GridSelectionCellServer.js"),ll=require("./cells/selectioncell/GridSelectionCell.js"),al=require("./cells/hierarchycell/GridHierarchyCellServer.js"),rl=require("./cells/rowreordercell/GridRowReorderCellServer.js"),nl=require("./cells/detailcell/GridDetailCellServer.js"),il=require("./cells/groupcell/GridGroupCellServer.js");function ol(e){const H=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const y in e)if(y!=="default"){const G=Object.getOwnPropertyDescriptor(e,y);Object.defineProperty(H,y,G.get?G:{enumerable:!0,get:()=>e[y]})}}return H.default=e,Object.freeze(H)}const a=ol(It),tt=a.forwardRef((e,H)=>{var xe,De,Te,He,Pe,Ke,Ae,Oe,Fe,Le,Me,Be;const y=e.id+"-role-element-id",G=e.navigatable?y:"";let N=e.columnsState||[];const lt=(t,i,n,d,o,l,s)=>{const g=[],T=u.flatData(g,t,i,{index:n},d!==void 0,o,l,Ct.defaultExpand,s);return{flattedData:g,resolvedGroupsCount:T}},at=t=>{const i=t.filter(n=>n&&n.type&&n.type.displayName==="KendoReactGridColumn");return u.readColumns(i,N,{prevId:0,idPrefix:G})},rt=()=>{const t=[],i=(n,d)=>n==null?void 0:n.forEach(o=>{const l=o.hidden||d;t.push({...o,hidden:l}),i(o.children,l)});return i(N,!1),t},nt=t=>{const i=rt();return t.filter(n=>{var d;return!n.hidden&&!((d=i.find(o=>o.id===n.id))!=null&&d.hidden)})},it=(t,i)=>{m=at(t),m.filter(n=>!n.hidden).length===0&&(m=u.autoGenerateColumns(w,e.group,{column:K.column},{prevId:0,idPrefix:G})),dt(m,i),m=nt(m),P=u.mapColumns(m,!0),oe=m.map(u.clientColumn)},ot=(t,i)=>{const n=d=>{var l;const o=i.find(s=>s.id===d.id);return o?(o.children=(l=d.children)==null?void 0:l.map(n),o):u.getColumnState(d)};N=t.filter(d=>d.parentIndex===-1).map(n)},dt=(t,i)=>{t.filter(l=>l.columnType==="checkbox").forEach(l=>{l.width=l.width||"50px",l.defaultCell=e.isClient?ll.GridSelectionCell:tl.GridSelectionCellServer,l.defaultHeaderCell=Ot.GridHeaderSelectionCell,l._type="edit"}),x!==void 0&&t.filter(l=>l.columnType==="reorder").forEach(l=>{l.width=l.width||"50px",l.defaultCell=e.isClient?Ut.GridRowReorderCell:rl.GridRowReorderCellServer,l.defaultHeaderCell=Jt.GridHeaderRowReorderCell,l.sortable=!1,l.filterable=!1,l.editable=!1});const n=u.getFlatColumnsState(N);ot(t,n);const d={id:"",resizable:!0,width:"32px",title:" ",declarationIndex:-1,orderIndex:-1,children:[],parentIndex:-1,depth:0,colSpan:0,headerColSpan:0,rowSpan:0,left:0,right:0,index:0,rightBorder:!1,ariaColumnIndex:0,isAccessible:!0};let o=0;if(K.enabled&&e.detail){const l={...d,_type:"expand",id:b.tableKeyboardNavigationTools.generateNavigatableId(`${o++}`,"expand","column"),defaultCell:e.isClient?qt.GridHierarchyCell:al.GridHierarchyCellServer,field:K.column,headerClassName:c.classNames(f.hierarchyCell({}))};t.unshift(l),N.unshift(n.find(s=>s.id===l.id)||u.getColumnState(l))}for(let l=0;l<i;l++){const s={...d,isAccessible:!1,defaultCell:e.isClient?ze.GridGroupCell:il.GridGroupCellServer,id:b.tableKeyboardNavigationTools.generateNavigatableId(`${o++}`,"group","column"),field:"value",locked:e.lockGroups};t.unshift(s),N.unshift(n.find(g=>g.id===s.id)||u.getColumnState(s))}t.slice(o).forEach(l=>{l.parentIndex>=0&&(l.parentIndex+=o),l.rowSpannable=l.rowSpannable!==void 0?u.getRowSpanOptions(l.rowSpannable):me})},re=()=>e.isClient?m:oe,ne=t=>{const i=[];let n=null,d=0;if(C.forEach((o,l)=>{const s=parseFloat((o.width||"").toString())||10;if(d){d--,n&&(n.width+=s);return}const g=Math.min(u.getColSpan(o,t),C.length-l);d=g-1,n={width:s,colSpan:g,columnIndex:l},i.push(n)}),e.columnVirtualization){const o=st.current||0,l=ut.current||parseFloat(((e.style||{}).width||"").toString());return Yt.getVirtualCellsToRender({cellModels:i,columns:C,tableViewPortWidth:l,scrollLeft:o})}return i},ct=()=>{const{pageable:t,take:i,pageSize:n}=e;if(!v)return 0;if(!t){if(i)return i;if(n)return n}const d=e.rowHeight||gt.current,o=mt.current;return o&&d?Math.ceil(o/d*1.5):0};let h=[],ie,m=[],oe=[],P=[[]];const st=e.scrollLeftRef||{current:0},ut=e.widthRef||{current:0},mt=e.containerHeightRef||{current:0},gt=e.minRowHeightRef||{current:0},_=e.localization||new et.LocalizationService(e.language),ft=e.intl||new et.IntlService((xe=e.locale)!=null?xe:"en"),k=e.unstyled,f=k&&k.uGrid?k.uGrid:c.uGrid,x=u.isRowReorderEnabled(e.rowReorderable),v=e.scrollable==="virtual"||e.scrollable===void 0&&c.hasValidLicense($e.packageMetadata),D=e.autoProcessData===!0?{group:!0,sort:!0,filter:!0,search:!0,page:!0}:e.autoProcessData;let w,q;if(Array.isArray(e.data)?(w=e.data,q=(De=e.total)!=null?De:w.length):(w=((Te=e.data)==null?void 0:Te.data)||[],q=(Ke=(Pe=e.total)!=null?Pe:(He=e.data)==null?void 0:He.total)!=null?Ke:w.length),D){const t=D.page&&!(v&&!e.pageable),{data:i,total:n}=Nt.process(w,{group:D.group?e.group:void 0,sort:D.sort?e.sort:void 0,filter:b.combineFilters(D.filter?e.filter:void 0,D.search?e.search:void 0),...t?{take:e.pageable?e.take||10:e.take,skip:e.skip||0}:{}});w=i,q=(Ae=e.total)!=null?Ae:n}const W=w.length===q,{size:R="medium"}=e,bt=typeof e.groupable=="object"&&e.groupable.footer||"none",z=e.groupable===!0||typeof e.groupable=="object"&&e.groupable.enabled!==!1,K=b.getDetailExpandableOptions(!!e.detail),Ct=b.getGroupExpandableOptions(typeof e.groupable=="object"&&e.groupable.enabled!==!1?e.groupable.expandable:e.groupable),de=!!((Oe=e.group)!=null&&Oe.length),{resolvedGroupsCount:yt,flattedData:ht}=lt(w,bt,W?0:e.skip||0,e.group,e.detailExpand,e.groupExpand,e.dataItemKey);h=ht;const ce=ct(),Q=((Fe=e.virtualSkipRef)==null?void 0:Fe.current)||0;let se=q;if(v){let t=e.skip||0;(de||e.pageable)&&(t=Q,se=h.length),(W||de||e.pageable)&&(ie=h.slice(t,t+ce))}const ue=b.getSelectionOptions(e.selectable),me=u.getRowSpanOptions(e.rowSpannable),Gt=ue&&ue.drag?"none":void 0,V=a.useMemo(()=>a.Children.toArray(e.children),[e.children]);it(V,yt);const U=a.useMemo(()=>{const t=Xt.gridPremiumFeatures(e,m);return{premium:t.length>0,features:t}},[e,m]),ge=a.useMemo(()=>U.premium?!c.validatePackage($e.packageMetadata,{component:"Grid",features:U.features}):!1,[U.premium]),fe=V.map(t=>t&&t.type&&t.type.displayName==="KendoReactGridToolbar"?a.cloneElement(t,{...t.props,_ariaControls:y,ariaLabel:"Top toolbar"}):null),j=V.filter(t=>t&&t.type&&t.type.displayName==="KendoReactGridNoRecords"),be=V.filter(t=>t&&t.type&&t.type.displayName==="KendoReactGridStatusBar"),C=m.filter(t=>t.children.length===0),Ce=z&&a.createElement(Ht.GroupPanel,{columns:re(),group:e.group||[],ariaControls:y}),ye=a.createElement(xt.Header,{size:R,staticHeaders:e.scrollable!=="none",draggable:e.reorderable||z,headerRow:a.createElement(Dt.HeaderRow,{cells:e.cells,sort:e.sort,sortable:e.sortable,group:e.group||[],groupable:z,filter:e.filter,filterable:e.filterable,filterOperators:e.filterOperators||je.operators,columnMenu:e.columnMenu,columnMenuIcon:e.columnMenuIcon,columns:m,columnsMap:P,navigatable:!!e.navigatable,localization:_,unstyled:k,headerSelectionValue:!!(e.select&&h.filter(t=>t.rowType==="data").every(t=>e.select&&e.dataItemKey&&c.getter(e.dataItemKey)(t.dataItem)!==void 0?e.select[c.getter(e.dataItemKey)(t.dataItem)]:void 0))}),filterRow:e.filterable&&a.createElement(Tt.FilterRow,{cells:e.cells,size:R,columns:m,filter:e.filter,filterOperators:e.filterOperators||je.operators,sort:e.sort,navigatable:!!e.navigatable,ariaRowIndex:P.length+1,localization:_})||void 0,cols:C.map((t,i)=>a.createElement("col",{key:i.toString(),width:u.getColumnWidth(t)}))}),he=C.findIndex(t=>typeof t.colSpan=="function")>-1;let J;he||(J=ne(null));const X=((Le=e.editable)==null?void 0:Le.mode)==="dialog",wt=(Me=e.editable)==null?void 0:Me.enabled,St=(t,i,n,d,o)=>{let l=!1;const s=e.select&&e.dataItemKey&&c.getter(e.dataItemKey)(t.dataItem)!==void 0?e.select[c.getter(e.dataItemKey)(t.dataItem)]:void 0;return he&&(J=ne(t.dataItem)),{row:J.map(({columnIndex:g,colSpan:T})=>{var $,B,_e,We;const r=C[g];let S;if(($=r.rowSpannable)!=null&&$.enabled&&t.rowType==="data"&&r.field&&o){const I=r.field?(_e=(B=r.rowSpannable).valueGetter)==null?void 0:_e.call(B,t.dataItem,r.field):null;S={value:I,count:1},o[r.field]&&((We=o[r.field])==null?void 0:We.value)===I&&o[r.field]!==null?(o[r.field].count++,S.count=null):o[r.field]=S}const O=r.id?r.id:g,E=c.classNames(f.contentSticky({locked:r.locked}),r.className),ee=r.left!==void 0?{left:r.left,right:r.right}:{};let F=!1;if(r.editable&&e.editable){const I=e.edit&&e.dataItemKey?e.edit[c.getter(e.dataItemKey)(t.dataItem)]:void 0,le=typeof I=="boolean"?I:Array.isArray(I)?r.field&&I.indexOf(r.field)>-1:r.field!==void 0&&I===r.field;le&&r.columnType==="data"&&(le===!0||le===r.field)&&(l=!0,X||(F=!0))}const te=r._type==="expand",L={locked:e.lockGroups,id:b.tableKeyboardNavigationTools.generateNavigatableId(`${i}-${String(g)}`,G,te||t.rowType==="groupHeader"||t.rowType==="groupFooter"||r.field==="value"?"nodata":"cell"),colSpan:T,dataItem:t.dataItem,field:r.field,editor:r.editor,format:r.format,columnType:r.columnType,rowReorderable:x,className:E,cells:u.resolveCells(e.cells,r.cells),columnIndex:g,columnsCount:C.length,rowType:t.rowType,level:t.level,expanded:t.expanded,dataIndex:t.dataIndex,rowDataIndex:n,columnPosition:ee,style:{},ariaColumnIndex:r.ariaColumnIndex,isSelected:!!((r==null?void 0:r._type)==="edit"?s:Array.isArray(s)&&s.indexOf(g)>-1),isSorted:!!u.isSorted(r.field,e.sort),isInEdit:F,isAlt:d,unstyled:k,group:t.group,localization:_,intl:ft,_rowSpan:S},M=r.defaultCell||F&&(e.isClient?kt.GridEditCell:el.GridEditCellServer)||(e.isClient?Kt.GridCell:pt.GridCellServer);return a.createElement(M,{key:O,cellProps:L})}),isInEdit:l,isSelected:typeof s=="boolean"&&s}};let Et=0,Y=null;const Ge=t=>t>=h.length-Et,Z=[],we=!h.length;let A=0;if(h.length){const t=P.length+(e.filterable?1:0)+1;let i=e.skip||0,n=-1,d=0;const o=me.enabled?{}:void 0;if(v){if(Q>0){const l=h.slice(0,Q).filter(s=>s.rowType==="data").length;n+=l,i+=l}!e.pageable&&W&&(n+=e.skip||0)}(ie||h).forEach((l,s)=>{l.rowType==="data"&&n++;const g=l.dataIndex%2!==0,T=e.dataItemKey&&c.getter(e.dataItemKey)(l.dataItem),r=s+i,S=T||"ai"+r,O=S+"_1",E=St(l,S,n,g,o);if(A=r+t+d,X&&wt&&E.isInEdit&&(Y=l.dataItem),Z.push(a.createElement(At.GridRow,{key:S,dataItem:l.dataItem,isAltRow:g,isInEdit:E.isInEdit&&!X,rowType:l.rowType,isRowReorderable:x,isHidden:Ge(s),onClick:null,onDoubleClick:null,rowHeight:e.rowHeight,ariaRowIndex:A,absoluteRowIndex:r,dataIndex:n,isSelected:E.isSelected,rows:e.rows},E.row)),e.detail&&l.rowType==="data"&&l.expanded){const ee=C.length-(K.enabled?1:0)-(e.group?e.group.length:0)||1;d++,A=r+t+d;const F=e.isClient?Mt.GridDetailCell:nl.GridDetailCellServer;Z.push(a.createElement("tr",{key:O,className:c.classNames(f.detailTr({isAlt:g})),style:{visibility:Ge(s)?"hidden":"",height:e.detailRowHeight},role:"row","aria-rowindex":A},e.group&&e.group.map((te,L)=>{var B;const M=(B=E==null?void 0:E.row[L])==null?void 0:B.props.style,$=M?{left:M.left,right:M.right}:{};return a.createElement(ze.GridGroupCell,{key:L,cellProps:{id:"",dataItem:l.dataItem,field:te.field,dataIndex:l.dataIndex,columnPosition:$,style:{},ariaColumnIndex:1+L,isSelected:!1,locked:e.lockGroups,cells:e.cells,group:l.group}})}),K.enabled&&a.createElement(Bt.GridDetailHierarchyCell,{unstyled:k,id:b.tableKeyboardNavigationTools.generateNavigatableId(`${O}-dhcell`,G)}),a.createElement(F,{dataItem:l.dataItem,dataIndex:l.dataIndex,colSpan:ee,ariaColIndex:2+(e.group?e.group.length:0),detail:e.detail,id:b.tableKeyboardNavigationTools.generateNavigatableId(`${O}-dcell`,G)})))}})}const Se={size:R,total:q,skip:e.skip||0,take:(e.take!==void 0?e.take:e.pageSize)||10,...Lt.normalize(e.pageable||{})},Ee=a.createElement(zt.PagerContainer,null,e.pager?a.createElement(e.pager,{...Se}):a.createElement(b.Pager,{className:c.classNames(f.pager({})),...Se})),vt=(t,i)=>a.createElement("col",{key:i.toString(),width:u.getColumnWidth(t)}),ve=(Be=e.cells)!=null&&Be.footerCell||m.some(t=>{var i;return!!((i=t.cells)!=null&&i.footerCell)})?a.createElement(Pt.Footer,{size:R,staticHeaders:e.scrollable!=="none",row:a.createElement(Ft.FooterRow,{cells:e.cells,idPrefix:G,columns:m,ariaRowIndex:A+1}),cols:C.map(vt)}):null,Re=a.createElement(_t.GridColGroup,null,C.map((t,i)=>a.createElement("col",{key:i.toString(),className:u.isSorted(t.field,e.sort)?c.classNames(f.sorted({})):void 0,width:u.getColumnWidth(t)}))),Ie=e.reorderable||z,{detail:dl,cells:cl,rows:sl,...Rt}=e,Ne=a.createElement("tbody",{role:"rowgroup",className:c.classNames(f.tbody({})),...b.tableKeyboardNavigationBodyAttributes},Z),qe=Y?a.createElement(Zt.GridEditDialog,{columns:C,customEditDialog:e.editDialog,dataItem:Y}):null;let p=Ne;x&&(p=a.createElement(Qt.GridReorderableRowsContainer,{unstyled:f,columns:m,rowReorderSettings:e.rowReorderable},Ne));const ke={gridRef:H,innerGrid:e.innerGrid,gridProps:Rt,columnsRef:re(),columnsMapRef:P,columnsState:N,dataRef:h,id:y,virtualTotal:se,isAllData:W,virtualPageSize:ce,isVirtualScroll:v,detailExpandable:!!e.detail};return e.scrollable==="none"?a.createElement(Ue.GridClientWrapper,{...ke},a.createElement(Ze.GridElementContainer,null,a.createElement("div",{id:e.id,style:e.style,className:c.classNames(f.wrapper({size:R}),e.className),...b.tableKeyboardNavigationScopeAttributes},fe,Ce,a.createElement(Wt.GridTable,{selectable:e.selectable,className:c.classNames(f.table({size:R}))},Re,ye,a.createElement(Ye.GridTableBody,{rowReorderable:x},p),ve),we&&a.createElement(Qe.GridNoRecordsContainer,null,j.length?j:a.createElement(Ve.GridNoRecords,null)),Ie&&a.createElement(a.Fragment,null,a.createElement(Je.GridDropClue,null),a.createElement(Xe.GridDragClue,null)))),be,e.pageable&&Ee,a.createElement(pe.GridLoader,{loader:e.loader,showLoader:e.showLoader}),qe,ge&&a.createElement(c.WatermarkOverlay,null)):a.createElement(Ue.GridClientWrapper,{...ke},a.createElement(Ze.GridElementContainer,null,a.createElement("div",{id:e.id,style:e.style,className:c.classNames(f.wrapper({size:R,virtual:v}),e.className),...b.tableKeyboardNavigationScopeAttributes},fe,Ce,a.createElement("div",{className:c.classNames(f.ariaRoot({})),role:"grid","aria-colcount":C.length,"aria-rowcount":q,id:y,"aria-label":_.toLanguageString(ae.gridAriaLabel,ae.messages[ae.gridAriaLabel])},ye,a.createElement("div",{className:c.classNames(f.container({})),role:"presentation"},a.createElement(jt.GridContainerElementContainer,null,a.createElement("div",{className:c.classNames(f.content({})),role:"presentation"},a.createElement("div",{className:c.classNames(f.tableWrap({})),role:"presentation"},a.createElement(Vt.GridTableScrollable,{selectable:e.selectable,tableClassName:c.classNames(f.table({size:R})),tableStyle:{userSelect:Gt}},Re,a.createElement(Ye.GridTableBody,{rowReorderable:x},p)),we&&a.createElement(Qe.GridNoRecordsContainer,null,j.length?j:a.createElement(Ve.GridNoRecords,null))),v&&a.createElement("div",{className:c.classNames(f.heightContainer({})),role:"presentation"},a.createElement($t.VirtualScrollHeightContainer,{isVirtualScroll:v}))))),ve,Ie&&a.createElement(a.Fragment,null,a.createElement(Je.GridDropClue,null),a.createElement(Xe.GridDragClue,null)),ge&&a.createElement(c.WatermarkOverlay,null)),be,e.pageable&&Ee,a.createElement(pe.GridLoader,{loader:e.loader,showLoader:e.showLoader}),qe)))});tt.displayName="KendoReactGridComponent";exports.GridComponent=tt;