@progress/kendo-react-treelist/TreeList.js

React TreeList enables the display of self-referencing tabular data. KendoReact TreeList package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 Q=require("react"),n=require("prop-types"),g=require("@progress/kendo-react-common"),h=require("@progress/kendo-react-data-tools"),A=require("./utils/index.js"),X=require("./cells/TreeListCell.js"),Y=require("./TreeListNoRecords.js"),Z=require("./rows/TreeListRow.js"),P=require("./package-metadata.js");function ee(R){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(R){for(const e in R)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(R,e);Object.defineProperty(l,e,t.get?t:{enumerable:!0,get:()=>R[e]})}}return l.default=R,Object.freeze(l)}const d=ee(Q),M=class M extends d.Component{constructor(l){super(l),this.element=null,this.wrapperScrollLeft=0,this.wrapperScrollTop=0,this.updateOnScroll=!1,this.tbodyOffsetTop=0,this.prevData=[],this.flattedData=[],this.extendedColumn=[],this.columnsMap=[],this.contextStateRef={current:void 0},this.navigationStateRef={current:void 0},this.showLicenseWatermark=!1,this.licenseMessage=void 0,this.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{scrollable:o,rowHeight:s=0}=this.props;if(o==="virtual"||s)this.element.scroll(0,(t-1)*s);else{const r=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(r){const i=r.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,i)}}},this.getExtendedColumn=g.memoizeOne((e,t)=>h.readColumns(e,{prevId:0,idPrefix:t})),this.getColumnsMap=g.memoizeOne((e,t)=>h.mapColumns(e,t)),this.onKeyDown=e=>{if(h.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:o}=h.getSelectionOptions(this.props.selectable),s={dataItems:this.getLeafDataItems(),mode:t,cell:o,componentId:this._treeListId,selectedField:this.props.selectedField||"",...this.getArguments(e)};this.props.onKeyDown.call(void 0,s)}},this.onFocus=e=>{h.tableKeyboardNavigation.onFocus(e,{contextStateRef:this.contextStateRef})},this.onRowDrag=e=>{this.props.onRowDrag&&this.props.onRowDrag.call(void 0,{...e,target:this})},this.onRowDrop=e=>{this.props.onRowDrop&&this.props.onRowDrop.call(void 0,{...e,target:this})},this.columnReorder=(e,t,o)=>{const s=this.extendedColumn[e].depth,r=c=>{do c++;while(c<this.extendedColumn.length&&this.extendedColumn[c].depth>s);return c},i=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-i.length):t,0,...i),this.extendedColumn.filter(c=>c.declarationIndex>=0).forEach((c,m)=>c.orderIndex=m),this.props.onColumnReorder){const c={target:this,columns:this.columns,nativeEvent:o};this.props.onColumnReorder.call(void 0,c)}},this.onResize=(e,t,o,s,r)=>{if(this.props.onColumnResize){const i=this.extendedColumn.filter(m=>m.children.length===0).reduce((m,f)=>m+=parseFloat(String(f.width)),0),c={columns:this.columns,totalWidth:i,index:e,nativeEvent:s,newWidth:t,oldWidth:o,end:r,target:this};this.props.onColumnResize.call(void 0,c)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,o=e.currentTarget.scrollTop,{columnVirtualization:s,scrollable:r,rowHeight:i=0}=this.props,c=i,m=0;let f=!1;s&&Math.abs(this.wrapperScrollLeft-t)>m&&(this.wrapperScrollLeft=t,f=!0),r==="virtual"&&Math.abs(this.wrapperScrollTop-o)>c&&(this.wrapperScrollTop=o,f=!0),f&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||this.props.scrollable==="none")return;const t=Array.from(e.childNodes),o=t.find(i=>i.nodeName==="TABLE"),s=this.props.toolbar&&t.find(i=>i.nodeType===1&&i.classList.contains("k-grid-toolbar"));let r=0;if(s){const i=s.style.boxSizing;s.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(s).height))||s.offsetHeight,s.style.boxSizing=i,s.getAttribute("style")||s.removeAttribute("style")}this.tbodyOffsetTop=o.tBodies[0].offsetTop,A.setHeaderRowsTop(o,r)},this.itemChange=e=>{const t=this.props.onItemChange;if(e.field===this.props.expandField){const o=this.props.onExpandChange;if(o){const s={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};o.call(void 0,s)}return}if(t){const o={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,o)}},this.onHeaderSelectionChange=e=>{if(this.props.onHeaderSelectionChange){const t={field:e.field,nativeEvent:e.syntheticEvent&&e.syntheticEvent.nativeEvent,syntheticEvent:e.syntheticEvent,target:this,dataItems:this.getLeafDataItems()};this.props.onHeaderSelectionChange.call(void 0,t)}},this.selectionRelease=e=>{if(this.props.onSelectionChange){const t={syntheticEvent:void 0,target:this,selectedField:this.props.selectedField||"",componentId:this._treeListId,dataItems:this.getLeafDataItems(),dataItem:null,level:[],...e};this.props.onSelectionChange.call(void 0,t)}},this.sortChange=(e,t,o)=>{this.raiseDataEvent(this.props.onSortChange,{sort:t,field:o},e)},this.headerFilterChange=(e,t,o)=>{this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:o},e)},this.filterChange=e=>{const{filter:t,field:o}=e;this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:o},e.syntheticEvent)},this.columnMenuFilterChange=(e,t,o)=>{const{onColumnMenuFilterChange:s}=this.props;if(!s||!o)return;const r={syntheticEvent:e,filter:t,field:o,target:this,nativeEvent:e.nativeEvent};s.call(void 0,r)},this.expandChange=(e,t,o)=>{const{expandField:s,onExpandChange:r}=this.props;if(s&&r){const i={...this.getArguments(e),dataItem:t,level:o,value:this.expanded(t)};r.call(void 0,i)}},this.rowClick=(e,t)=>{if(this.props.onRowClick&&e.target.nodeName==="TD"){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowClick.call(void 0,o)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&e.target.nodeName==="TD"){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowDoubleClick.call(void 0,o)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&e.target.nodeName==="TD"){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowContextMenu.call(void 0,o)}},this.onPageChange=e=>{if(this.props.onPageChange){const t={...this.getArguments(e.syntheticEvent),skip:e.skip,take:e.take};this.props.onPageChange.call(void 0,t)}},this.expandedSubItems=e=>{const t=[];return this.expanded(e)&&this.hasChildren(e)&&t.push(...g.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map(e=>e.dataItem),this.expanded=e=>!!g.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!g.getNestedValue(this.props.subItemsField,e),this.showLicenseWatermark=!g.validatePackage(P.packageMetadata,{component:"TreeList"}),this.licenseMessage=g.getLicenseMessage(P.packageMetadata),this.dragLogic=new h.CommonDragLogic(this.columnReorder,g.noop,g.noop),this.columnResize=new h.ColumnResize(this.onResize.bind(this)),h.tableKeyboardNavigation.onConstructor({navigatable:!!l.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(g.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),h.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return h.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(l){l.columns!==this.props.columns&&this.calculateSizes(this.element),h.tableKeyboardNavigation.onComponentDidUpdate({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}componentWillUnmount(){this.columnsMap=[],this.prevData=[],this.flattedData=[],this.updateOnScroll=!1,this.getExtendedColumn.clear(),this.getColumnsMap.clear()}render(){const{columns:l=[],filterRow:e,scrollable:t="scrollable",resizable:o=!1,reorderable:s=!1,skip:r,take:i}=this.props,c=l.some(a=>!!a.filter||!!a.filterCell)||e!==void 0,m=e||h.FilterRow,f=h.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef),L=this.getExtendedColumn(l,f),O=L.length!==this.extendedColumn.length;this.extendedColumn=L,this.columnsMap=this.getColumnsMap(this.extendedColumn,O);const C=this.extendedColumn.filter(a=>a.children.length===0);this.columnResize.columns=this.extendedColumn,this.columnResize.resizable=o,this.dragLogic.columns=this.extendedColumn,this.dragLogic.reorderable=s,this.dragLogic.groupable=!1;const D=d.createElement(h.Header,{headerRow:d.createElement(h.HeaderRow,{sort:this.props.sort,sortable:this.props.sortable,sortChange:this.sortChange,selectionChange:this.onHeaderSelectionChange,columns:this.extendedColumn,columnsMap:this.columnsMap,cellRender:this.props.headerCellRender,columnResize:this.columnResize,columnMenu:this.props.columnMenu,columnMenuFilter:this.props.columnMenuFilter,columnMenuFilterChange:this.columnMenuFilterChange,pressHandler:this.dragLogic.pressHandler,dragHandler:this.dragLogic.dragHandler,releaseHandler:this.dragLogic.releaseHandler,filterChange:this.headerFilterChange}),reorderable:this.props.reorderable,filterRow:c&&d.createElement(m,{columns:C,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),N=this.props.style||{},{colSpans:V,hiddenColumns:B}=h.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:C,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((N.width||"").toString())}),U=(a,S,w,E,k,x)=>C.map((p,u)=>{if(B[u])return null;const v=p.id?p.id:u,F=`${p.className?p.className+" ":""}${p.locked?"k-grid-content-sticky":""}`,y={id:h.tableKeyboardNavigationTools.generateNavigatableId(`${w}-${String(u)}`,f),colSpan:V[u],dataItem:a.dataItem,field:p.field,format:p.format,className:F||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?T=>{this.selectionChange({event:T,item:a,columnIndex:u,dataIndex:k})}:void 0,level:a.level,expandable:p.expandable,expanded:E,hasChildren:this.hasChildren(a.dataItem),onExpandChange:this.expandChange,colIndex:u,ariaColumnIndex:p.ariaColumnIndex,style:p.left!==void 0&&{left:p.left,right:p.right,borderRightWidth:p.rightBorder?"1px":""}||{},isSelected:Array.isArray(x)&&x.indexOf(u)>-1};return S&&p.editCell?d.createElement(p.editCell,{key:v,...y,onChange:this.itemChange}):p.cell?d.createElement(p.cell,{key:v,...y}):d.createElement(X.TreeListCell,{key:v,...y})});let b=this.flatData;const K=b.length;r!==void 0&&i!==void 0&&(b=b.slice(r,r+i)),t==="virtual"&&(b=A.tableRowsVirtualization({rows:b,tableViewPortHeight:parseFloat((N.height||N.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const j=b.map(a=>a.level),q=this.columnsMap.length+(c?1:0)+1,W=b.length>0&&b.map((a,S)=>{const w=g.getAbsoluteVirtualRowIndex(t,a,S),E=g.getNestedValue(this.props.editField,a.dataItem),k=this.props.dataItemKey&&g.getter(this.props.dataItemKey)(a.dataItem),x=String(k||a.level.join(".")),p=this.expanded(a.dataItem),u=this.props.selectedField?g.getNestedValue(this.props.selectedField,a.dataItem):void 0,v={key:x,level:a.level,levels:j,dataItem:a.dataItem,selectedField:this.props.selectedField,rowHeight:t==="virtual"?a.height:this.props.rowHeight,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:I=>this.rowClick(I,a),onDoubleClick:I=>this.rowDoubleClick(I,a),onContextMenu:I=>this.rowContextMenu(I,a),isAltRow:w%2!==0,expanded:p,rowIndex:w,ariaRowIndex:q+w,ariaSetSize:a.levelCount,ariaPosInSet:a.level[a.level.length-1]+1,isSelected:typeof u=="boolean"&&u},F=this.props.editRow,y=this.props.row||Z.TreeListRow,T=U(a,E,x,p,w,u);return E&&F?d.createElement(F,{...v,key:v.key},T):d.createElement(y,{...v,key:v.key},T)})||d.createElement("tr",{className:"k-table-row k-grid-norecords"},d.createElement("td",{colSpan:C.length},this.props.noRecords||d.createElement(Y.TreeListNoRecords,null))),_=a=>this.props.sort&&this.props.sort.some(S=>S.field===a),$=d.createElement("colgroup",{ref:a=>{this.columnResize.colGroupMain=a}},C.map((a,S)=>d.createElement("col",{key:S.toString(),className:_(a.field)?"k-sorted":void 0,style:a.width!==void 0?{width:a.width}:void 0}))),G=this.props.columnVirtualization||this.props.scrollable==="virtual",J=this.props.selectable&&this.props.selectable.drag?"none":void 0,H=this.props.tableProps||{};return d.createElement(h.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},d.createElement("div",{id:this.props.id,style:this.props.style,className:g.classNames("k-grid","k-treelist",this.props.className,{"k-treelist-scrollable":t!=="none"}),ref:a=>{this.element=a},onScroll:G?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":K,"aria-colcount":C.length,role:"treegrid",...h.tableKeyboardNavigationScopeAttributes},this.props.toolbar,d.createElement(h.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},d.createElement("table",{className:"k-table k-grid-table",...H,style:{...H.style||{},userSelect:J},role:"presentation"},$,D,d.createElement("tbody",{className:"k-table-tbody",...h.tableKeyboardNavigationBodyAttributes,role:"presentation"},W))),this.props.pager&&d.createElement(this.props.pager,{className:"k-grid-pager",total:K,skip:r,take:i,onPageChange:this.onPageChange}),s&&d.createElement(d.Fragment,null,d.createElement(h.DropClue,{ref:this.dragLogic.refDropElementClue}),d.createElement(h.DragClue,{ref:this.dragLogic.refDragElementClue})),this.showLicenseWatermark&&d.createElement(g.WatermarkOverlay,{message:this.licenseMessage})))}get columns(){const l=this.extendedColumn.filter(t=>t.declarationIndex>=0&&t.parentIndex===-1),e=t=>(t.sort((o,s)=>o.declarationIndex-s.declarationIndex),t.map(o=>{const{declarationIndex:s,parentIndex:r,depth:i,colSpan:c,rowSpan:m,index:f,kFirst:L,groupable:O,children:C,...D}=o;return C.length?{children:e(C),...D}:D}));return e(l)}get flatData(){const{data:l=[],rowHeight:e=0}=this.props;let t=0;const o=r=>{const i={height:e,offsetTop:t};return t+=i.height,i},s=this.updateOnScroll&&this.prevData===l&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:h.flatData(l,this.expandedSubItems,o);return this.prevData=l,this.flattedData=s,s}selectionChange(l){if(this.props.onSelectionChange){const{event:e,item:t,dataIndex:o,columnIndex:s}=l,{mode:r,cell:i}=h.getSelectionOptions(this.props.selectable),c={...this.getArguments(e.syntheticEvent),dataItem:t.dataItem,level:t.level,startColIndex:s,endColIndex:s,startRowIndex:o,endRowIndex:o,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:r,cell:i,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,c)}}raiseDataEvent(l,e,t){const o=this.props.onDataStateChange;if(l)l.call(void 0,{...this.getArguments(t),...e});else if(o){const s={...this.getArguments(t),dataState:{...this.getDataState(),...e}};o.call(void 0,s)}}getDataState(){return{filter:this.props.filter,sort:this.props.sort}}getArguments(l){return{nativeEvent:l&&l.nativeEvent,syntheticEvent:l,target:this}}};M.propTypes={data:n.array,resizable:n.bool,reorderable:n.bool,sortable:n.oneOfType([n.bool,n.shape({mode:n.oneOf(["single","multiple"]),allowUnsort:n.bool})]),onSortChange:n.func,sort:n.array,columns:n.arrayOf(n.object),columnVirtualization:n.bool,filter:n.array,onFilterChange:n.func,filterRow:n.any,toolbar:n.any,noRecords:n.any,onExpandChange:n.func,expandField:n.string,subItemsField:n.string,selectedField:n.string,onSelectionChange:n.func,onHeaderSelectionChange:n.func,onRowClick:n.func,onItemChange:n.func,editField:n.string,scrollable:n.oneOf(["none","scrollable","virtual"]),rowHeight:n.number,style:n.object,tableProps:n.object,pager:n.any,skip:n.number,take:n.number,onPageChange:n.func,onDataStateChange:n.func,onColumnResize:n.func,onColumnReorder:n.func,dataItemKey:n.string,navigatable:n.bool},M.contextType=h.TableKeyboardNavigationContext;let z=M;exports.TreeList=z;