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