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