@prioticket/design-system-web 1.6.3 → 1.7.0-beta.1

package/dist/components/pd-table.cjs.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?m(e,t):e,n=p.length-1,i;n>=0;n--)(i=p[n])&&(r=(a?i(e,t,r):i(r))||r);return a&&r&&b(e,t,r),r};exports.PdTable=class extends o.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._displayDataCache=[],this._displayDataCacheKey="",this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}return this._displayDataCacheKey=e,this._displayDataCache=t,t}willUpdate(e){super.willUpdate(e),e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}_computeCacheKey(){let e="empty";if(this.data.length>0){const t=this.rowKey(this.data[0],0),a=this.rowKey(this.data[this.data.length-1],this.data.length-1),r=this.data.length>2?this.rowKey(this.data[Math.floor(this.data.length/2)],Math.floor(this.data.length/2)):"";e=`${this.data.length}-${t}-${r}-${a}`}return`${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,n)=>{const i=r[t],s=n[t];if(i==null&&s==null)return 0;if(i==null)return a==="asc"?1:-1;if(s==null)return a==="asc"?-1:1;if(typeof i=="number"&&typeof s=="number")return a==="asc"?i-s:s-i;if(i instanceof Date&&s instanceof Date)return a==="asc"?i.getTime()-s.getTime():s.getTime()-i.getTime();const h=String(i).toLowerCase(),c=String(s).toLowerCase();return h<c?a==="asc"?-1:1:h>c?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_getActualDataIndex(e){return this.data.indexOf(e)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,n)=>{a.add(this._getRowKey(r,n))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),n=new Set(this._selectedRowKeys);a?n.add(r):n.delete(r),this._selectedRowKeys=n,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const n=r.target,i=e[a.id];let s=n.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(n.value);s=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:s,previousValue:i},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{e.target.classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),e.target.classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&(this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:a,toIndex:t,item:this.data[a]},bubbles:!0,composed:!0}))),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<this.data.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:e,toIndex:t,item:this.data[e]},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.detail.value,10);this.pageSize=t,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:t},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js"),b=require("lit/directives/ref.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?y(e,t):e,s=p.length-1,n;s>=0;s--)(n=p[s])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&m(e,t,r),r};exports.PdTable=class extends i.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._displayDataCache=[],this._displayDataCacheKey="",this._reactRoots=new Map,this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}return this._displayDataCacheKey=e,this._displayDataCache=t,t}disconnectedCallback(){super.disconnectedCallback(),this._reactRoots.forEach(({unmount:e})=>e()),this._reactRoots.clear()}willUpdate(e){super.willUpdate(e),e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}_computeCacheKey(){let e="empty";if(this.data.length>0){const t=this.rowKey(this.data[0],0),a=this.rowKey(this.data[this.data.length-1],this.data.length-1),r=this.data.length>2?this.rowKey(this.data[Math.floor(this.data.length/2)],Math.floor(this.data.length/2)):"";e=`${this.data.length}-${t}-${r}-${a}`}return`${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,s)=>{const n=r[t],o=s[t];if(n==null&&o==null)return 0;if(n==null)return a==="asc"?1:-1;if(o==null)return a==="asc"?-1:1;if(typeof n=="number"&&typeof o=="number")return a==="asc"?n-o:o-n;if(n instanceof Date&&o instanceof Date)return a==="asc"?n.getTime()-o.getTime():o.getTime()-n.getTime();const h=String(n).toLowerCase(),c=String(o).toLowerCase();return h<c?a==="asc"?-1:1:h>c?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_getActualDataIndex(e){return this.data.indexOf(e)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,s)=>{a.add(this._getRowKey(r,s))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),s=new Set(this._selectedRowKeys);a?s.add(r):s.delete(r),this._selectedRowKeys=s,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const s=r.target,n=e[a.id];let o=s.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(s.value);o=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:o,previousValue:n},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{e.target.classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),e.target.classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&(this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:a,toIndex:t,item:this.data[a]},bubbles:!0,composed:!0}))),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<this.data.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:e,toIndex:t,item:this.data[e]},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.detail.value,10);this.pageSize=t,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:t},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return i.html`
       <thead>
         <tr role="row">
-          ${this.draggableRows?o.html`
+          ${this.draggableRows?i.html`
             <th class="drag-handle-header" role="columnheader" aria-label="Reorder">
               <span class="visually-hidden">Reorder</span>
             </th>
-          `:o.nothing}
+          `:i.nothing}
 
-          ${this.selectable?o.html`
+          ${this.selectable?i.html`
             <th class="checkbox-cell" role="columnheader">
               <pd-checkbox
                 aria-label="Select all rows"
@@ -16,18 +16,18 @@
                 @change=${this._handleSelectAll}
               ></pd-checkbox>
             </th>
-          `:o.nothing}
+          `:i.nothing}
 
           ${this.columns.map((a,r)=>this._renderHeaderCell(a,r))}
         </tr>
       </thead>
-    `}_renderHeaderCell(e,t){const a=this._isColumnSortable(e),r=this._getColumnAlignment(e),n=this._sortColumn===e.id,i=this._draggedColumnIndex===t,s=this._dragOverColumnIndex===t&&!i,h=n?this._sortDirection==="asc"?"ascending":"descending":"none";return o.html`
+    `}_renderHeaderCell(e,t){const a=this._isColumnSortable(e),r=this._getColumnAlignment(e),s=this._sortColumn===e.id,n=this._draggedColumnIndex===t,o=this._dragOverColumnIndex===t&&!n,h=s?this._sortDirection==="asc"?"ascending":"descending":"none";return i.html`
       <th
         role="columnheader"
-        class=${g.classMap({sortable:a,sorted:n,[`align-${r}`]:!0,"column-draggable":this.draggableColumns,"column-dragging":i,"column-drag-over":s})}
+        class=${g.classMap({sortable:a,sorted:s,[`align-${r}`]:!0,"column-draggable":this.draggableColumns,"column-dragging":n,"column-drag-over":o})}
         style=${e.width?`width: ${e.width};`:""}${e.minWidth?` min-width: ${e.minWidth};`:""}
-        aria-sort=${a?h:o.nothing}
-        tabindex=${a||this.draggableColumns?"0":o.nothing}
+        aria-sort=${a?h:i.nothing}
+        tabindex=${a||this.draggableColumns?"0":i.nothing}
         draggable=${this.draggableColumns?"true":"false"}
         @click=${()=>this._handleSort(e)}
         @keydown=${c=>{this._handleHeaderKeyDown(c,e),this._handleColumnHeaderKeyDown(c,t)}}
@@ -37,54 +37,54 @@
         @dragend=${c=>this._onColumnDragEnd(c)}
       >
         <div class=${g.classMap({"header-content":!0,[`align-${r}`]:!0})}>
-          ${this.draggableColumns?o.html`
+          ${this.draggableColumns?i.html`
             <pd-icon
               class="column-drag-handle"
               name="drag_indicator"
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          `:o.nothing}
+          `:i.nothing}
           <span class="header-text">${e.header}</span>
-          ${a?o.html`
+          ${a?i.html`
             <pd-icon
-              class=${g.classMap({"sort-icon":!0,"sort-icon-visible":n,"sort-icon-desc":n&&this._sortDirection==="desc"})}
+              class=${g.classMap({"sort-icon":!0,"sort-icon-visible":s,"sort-icon-desc":s&&this._sortDirection==="desc"})}
               name="arrow_upward"
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          `:o.nothing}
+          `:i.nothing}
         </div>
       </th>
-    `}_renderCell(e,t,a){if(a.cellTemplate)return a.cellTemplate(e,t);const r=e[a.id];if(a.editable)return this._renderEditableCell(e,t,a,r);switch(a.type){case"currency":return this._formatCurrency(r,a.currencyCode);case"number":return this._formatNumber(r);case"date":return this._formatDate(r);case"boolean":return this._renderBoolean(r);default:return r!=null?String(r):""}}_renderEditableCell(e,t,a,r){const n=a.type==="number"||a.type==="currency"?"number":"text";return o.html`
+    `}_renderCell(e,t,a){if(a.cellTemplate){const s=a.cellTemplate(e,t);if(this._isReactElement(s)){const n=`${this.rowKey(e,t)}-${a.id}`;return this._renderReactCellContent(s,n)}return s}const r=e[a.id];if(a.editable)return this._renderEditableCell(e,t,a,r);switch(a.type){case"currency":return this._formatCurrency(r,a.currencyCode);case"number":return this._formatNumber(r);case"date":return this._formatDate(r);case"boolean":return this._renderBoolean(r);default:return r!=null?String(r):""}}_renderEditableCell(e,t,a,r){const s=a.type==="number"||a.type==="currency"?"number":"text";return i.html`
       <pd-text-field
-        type=${n}
+        type=${s}
         .value=${r!=null?String(r):""}
         aria-label="${a.header}"
-        @change=${i=>this._handleCellChange(e,t,a,i)}
-        @click=${i=>i.stopPropagation()}
+        @change=${n=>this._handleCellChange(e,t,a,n)}
+        @click=${n=>n.stopPropagation()}
         style="width: 100%;"
       ></pd-text-field>
-    `}_formatCurrency(e,t){const a=Number(e);if(e==null||isNaN(a))return String(e??"");const r=t||this.currencyCode;try{return a.toLocaleString(this.locale,{style:"currency",currency:r})}catch{return a.toLocaleString(this.locale)}}_formatNumber(e){const t=Number(e);return e==null||isNaN(t)?String(e??""):t.toLocaleString(this.locale)}_formatDate(e){if(e==null)return"";const t=e instanceof Date?e:new Date(String(e));return isNaN(t.getTime())?String(e):t.toLocaleDateString(this.locale)}_renderBoolean(e){const t=!!e;return o.html`
+    `}_formatCurrency(e,t){const a=Number(e);if(e==null||isNaN(a))return String(e??"");const r=t||this.currencyCode;try{return a.toLocaleString(this.locale,{style:"currency",currency:r})}catch{return a.toLocaleString(this.locale)}}_formatNumber(e){const t=Number(e);return e==null||isNaN(t)?String(e??""):t.toLocaleString(this.locale)}_formatDate(e){if(e==null)return"";const t=e instanceof Date?e:new Date(String(e));return isNaN(t.getTime())?String(e):t.toLocaleDateString(this.locale)}_renderBoolean(e){const t=!!e;return i.html`
       <pd-icon
         name=${t?"check":"close"}
         size="small"
         aria-label=${t?"Yes":"No"}
         class=${g.classMap({"boolean-true":t,"boolean-false":!t})}
       ></pd-icon>
-    `}_renderRow(e,t){const a=this._getRowKey(e,t),r=this._selectedRowKeys.has(a),n=this._draggedRowIndex===t,i=this._dragOverRowIndex===t&&!n;return o.html`
+    `}_isReactElement(e){return typeof e=="object"&&e!==null&&"$$typeof"in e}_renderReactCellContent(e,t){return i.html`<span style="display:contents" ${b.ref(a=>{if(!a){this._reactRoots.get(t)?.unmount(),this._reactRoots.delete(t);return}const r=this._reactRoots.get(t);if(r){r.render(e);return}Promise.resolve().then(()=>require("../client-CjTRT4wy.cjs")).then(s=>s.client).then(({createRoot:s})=>{if(this._reactRoots.has(t))this._reactRoots.get(t).render(e);else{const n=s(a);n.render(e),this._reactRoots.set(t,{render:o=>n.render(o),unmount:()=>n.unmount()})}})})}></span>`}_renderRow(e,t){const a=this._getRowKey(e,t),r=this._selectedRowKeys.has(a),s=this._draggedRowIndex===t,n=this._dragOverRowIndex===t&&!s;return i.html`
       <tr
         role="row"
-        class=${g.classMap({selected:r,draggable:this.draggableRows,dragging:n,"drag-over":i})}
-        aria-selected=${this.selectable?String(r):o.nothing}
+        class=${g.classMap({selected:r,draggable:this.draggableRows,dragging:s,"drag-over":n})}
+        aria-selected=${this.selectable?String(r):i.nothing}
         draggable=${this.draggableRows?"true":"false"}
-        @dragstart=${s=>this._onDragStart(s,t)}
-        @dragover=${s=>this._onDragOver(s,t)}
-        @drop=${s=>this._onDrop(s,t)}
-        @dragend=${s=>this._onDragEnd(s)}
+        @dragstart=${o=>this._onDragStart(o,t)}
+        @dragover=${o=>this._onDragOver(o,t)}
+        @drop=${o=>this._onDrop(o,t)}
+        @dragend=${o=>this._onDragEnd(o)}
         @click=${()=>this._handleRowClick(e,t)}
       >
-        ${this.draggableRows?o.html`
+        ${this.draggableRows?i.html`
           <td class="drag-handle-cell" role="cell">
             <pd-icon
               name="drag_indicator"
@@ -95,32 +95,32 @@
               aria-label="Drag to reorder row. Use arrow keys to move up or down."
               @mousedown=${this._handleDragHandleMouseDown}
               @mouseup=${this._handleDragHandleMouseUp}
-              @keydown=${s=>this._handleDragHandleKeyDown(s,t)}
+              @keydown=${o=>this._handleDragHandleKeyDown(o,t)}
             ></pd-icon>
           </td>
-        `:o.nothing}
+        `:i.nothing}
 
-        ${this.selectable?o.html`
+        ${this.selectable?i.html`
           <td class="checkbox-cell" role="cell">
             <pd-checkbox
               aria-label="Select row"
               ?checked=${r}
-              @change=${s=>{const h=s.target;this._handleSelectRow(e,t,h.checked)}}
-              @click=${s=>s.stopPropagation()}
+              @change=${o=>{const h=o.target;this._handleSelectRow(e,t,h.checked)}}
+              @click=${o=>o.stopPropagation()}
             ></pd-checkbox>
           </td>
-        `:o.nothing}
+        `:i.nothing}
 
-        ${this.columns.map(s=>o.html`
+        ${this.columns.map(o=>i.html`
           <td
             role="cell"
-            class=${g.classMap({[`align-${this._getColumnAlignment(s)}`]:!0,editable:!!s.editable})}
+            class=${g.classMap({[`align-${this._getColumnAlignment(o)}`]:!0,editable:!!o.editable})}
           >
-            ${this._renderCell(e,t,s)}
+            ${this._renderCell(e,t,o)}
           </td>
         `)}
       </tr>
-    `}_renderEmptyState(){return o.html`
+    `}_renderEmptyState(){return i.html`
       <tr class="state-row">
         <td colspan=${this._getColspan()} class="no-data">
           <slot name="no-data">
@@ -131,7 +131,7 @@
           </slot>
         </td>
       </tr>
-    `}_renderLoadingState(){return o.html`
+    `}_renderLoadingState(){return i.html`
       <tr class="state-row">
         <td colspan=${this._getColspan()} class="loading-cell">
           <slot name="loading">
@@ -141,7 +141,7 @@
           </slot>
         </td>
       </tr>
-    `}_renderPagination(){if(!this.pagination)return o.nothing;const e=this._totalCount,t=e===0?0:this.pageIndex*this.pageSize+1,a=Math.min((this.pageIndex+1)*this.pageSize,e),r=this.pageIndex===0,n=this.pageIndex>=this._totalPages-1||e===0;return o.html`
+    `}_renderPagination(){if(!this.pagination)return i.nothing;const e=this._totalCount,t=e===0?0:this.pageIndex*this.pageSize+1,a=Math.min((this.pageIndex+1)*this.pageSize,e),r=this.pageIndex===0,s=this.pageIndex>=this._totalPages-1||e===0;return i.html`
       <nav class="pagination">
         <div class="items-per-page">
           <label id="page-size-label-${this._uniqueId}">Items per page:</label>
@@ -150,7 +150,7 @@
               variant="filled"
               aria-labelledby="page-size-label-${this._uniqueId}"
               .value=${this.pageSize.toString()}
-              .options=${this.pageSizeOptions.map(i=>({value:String(i),label:String(i)}))}
+              .options=${this.pageSizeOptions.map(n=>({value:String(n),label:String(n)}))}
               @change=${this._handlePageSizeChange}
             ></pd-select>
           </div>
@@ -177,19 +177,19 @@
           <pd-icon-button
             icon="chevron_right"
             aria-label="Next page"
-            ?disabled=${n}
+            ?disabled=${s}
             @click=${()=>this._handlePageChange(this.pageIndex+1)}
           ></pd-icon-button>
           <pd-icon-button
             icon="last_page"
             aria-label="Last page"
-            ?disabled=${n}
+            ?disabled=${s}
             @click=${()=>this._handlePageChange(this._totalPages-1)}
           ></pd-icon-button>
         </div>
 
       </nav>
-    `}render(){const e=this._displayData,t=e.length===0&&!this.loading;return o.html`
+    `}render(){const e=this._displayData,t=e.length===0&&!this.loading;return i.html`
       <div class="table-wrapper">
         <div class="table-container">
           <table
@@ -199,15 +199,15 @@
           >
             ${this._renderHeader()}
             <tbody>
-              ${this.loading?this._renderLoadingState():o.nothing}
-              ${t?this._renderEmptyState():o.nothing}
-              ${this.loading?o.nothing:u.repeat(e,a=>{const r=this._getActualDataIndex(a);return this._getRowKey(a,r)},a=>{const r=this._getActualDataIndex(a);return this._renderRow(a,r)})}
+              ${this.loading?this._renderLoadingState():i.nothing}
+              ${t?this._renderEmptyState():i.nothing}
+              ${this.loading?i.nothing:u.repeat(e,a=>{const r=this._getActualDataIndex(a);return this._getRowKey(a,r)},a=>{const r=this._getActualDataIndex(a);return this._renderRow(a,r)})}
             </tbody>
           </table>
         </div>
         ${this._renderPagination()}
       </div>
-    `}clearSelection(){this._selectedRowKeys=new Set,this._emitSelectionChange()}selectByKeys(e){this._selectedRowKeys=new Set(e.map(t=>String(t))),this._emitSelectionChange()}selectAll(){const e=this.data.map((t,a)=>this._getRowKey(t,a));this._selectedRowKeys=new Set(e),this._emitSelectionChange()}getSelectedRows(){return this.data.filter((e,t)=>this._selectedRowKeys.has(this._getRowKey(e,t)))}getSelectedKeys(){return Array.from(this._selectedRowKeys)}clearSort(){this._sortColumn=null,this._sortDirection="asc"}setSort(e,t="asc"){this._sortColumn=e,this._sortDirection=t}goToPage(e){this._handlePageChange(e)}invalidateCache(){this._displayDataCacheKey=""}};exports.PdTable.styles=o.css`
+    `}clearSelection(){this._selectedRowKeys=new Set,this._emitSelectionChange()}selectByKeys(e){this._selectedRowKeys=new Set(e.map(t=>String(t))),this._emitSelectionChange()}selectAll(){const e=this.data.map((t,a)=>this._getRowKey(t,a));this._selectedRowKeys=new Set(e),this._emitSelectionChange()}getSelectedRows(){return this.data.filter((e,t)=>this._selectedRowKeys.has(this._getRowKey(e,t)))}getSelectedKeys(){return Array.from(this._selectedRowKeys)}clearSort(){this._sortColumn=null,this._sortDirection="asc"}setSort(e,t="asc"){this._sortColumn=e,this._sortDirection=t}goToPage(e){this._handlePageChange(e)}invalidateCache(){this._displayDataCacheKey=""}};exports.PdTable.styles=i.css`
     :host {
       display: block;
 

package/dist/components/pd-table.es.js

@@ -1,24 +1,25 @@
-import { css as b, LitElement as y, nothing as g, html as d } from "lit";
-import { property as c, state as u, customElement as _ } from "lit/decorators.js";
+import { css as b, LitElement as _, nothing as g, html as d } from "lit";
+import { property as c, state as u, customElement as y } from "lit/decorators.js";
 import { repeat as f } from "lit/directives/repeat.js";
 import { classMap as m } from "lit/directives/class-map.js";
+import { ref as v } from "lit/directives/ref.js";
 import "./pd-icon.es.js";
 import "./pd-checkbox.es.js";
 import "./pd-text-field.es.js";
 import "./pd-icon-button.es.js";
 import "./pd-select.es.js";
 import "./pd-menu-item.es.js";
-var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
-  for (var o = r > 1 ? void 0 : r ? w(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (o = (r ? s(t, a, o) : s(o)) || o);
-  return r && o && v(t, a, o), o;
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? C(t, a) : t, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (s = (r ? o(t, a, s) : o(s)) || s);
+  return r && s && w(t, a, s), s;
 };
-let i = class extends y {
+let i = class extends _ {
   constructor() {
     super(...arguments), this.columns = [], this.data = [], this.rowKey = (e, t) => {
       const a = e.id;
       return a != null ? String(a) : `__idx_${t}`;
-    }, this.selectable = !1, this.sortable = !1, this.pagination = !1, this.pageSize = 10, this.pageIndex = 0, this.totalItems = 0, this.draggableRows = !1, this.draggableColumns = !1, this.loading = !1, this.clearSelectionOnDataChange = !1, this.currencyCode = "EUR", this.pageSizeOptions = [5, 10, 25, 50, 100], this._sortColumn = null, this._sortDirection = "asc", this._selectedRowKeys = /* @__PURE__ */ new Set(), this._draggedRowIndex = null, this._dragOverRowIndex = null, this._isDragHandleGrabbed = !1, this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._displayDataCache = [], this._displayDataCacheKey = "", this._uniqueId = Math.random().toString(36).substring(2, 9);
+    }, this.selectable = !1, this.sortable = !1, this.pagination = !1, this.pageSize = 10, this.pageIndex = 0, this.totalItems = 0, this.draggableRows = !1, this.draggableColumns = !1, this.loading = !1, this.clearSelectionOnDataChange = !1, this.currencyCode = "EUR", this.pageSizeOptions = [5, 10, 25, 50, 100], this._sortColumn = null, this._sortDirection = "asc", this._selectedRowKeys = /* @__PURE__ */ new Set(), this._draggedRowIndex = null, this._dragOverRowIndex = null, this._isDragHandleGrabbed = !1, this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._displayDataCache = [], this._displayDataCacheKey = "", this._reactRoots = /* @__PURE__ */ new Map(), this._uniqueId = Math.random().toString(36).substring(2, 9);
   }
   // ---------------------------------------------------------------------------
   // Getters
@@ -53,6 +54,9 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._reactRoots.forEach(({ unmount: e }) => e()), this._reactRoots.clear();
+  }
   willUpdate(e) {
     super.willUpdate(e), e.has("data") && this.clearSelectionOnDataChange && (this._selectedRowKeys = /* @__PURE__ */ new Set()), (e.has("data") || e.has("pageSize")) && this.pageIndex >= this._totalPages && this._totalPages > 0 && (this.pageIndex = this._totalPages - 1);
   }
@@ -69,16 +73,16 @@ let i = class extends y {
   }
   _sortData(e) {
     const t = this._sortColumn, a = this._sortDirection;
-    return [...e].sort((r, o) => {
-      const n = r[t], s = o[t];
-      if (n == null && s == null) return 0;
+    return [...e].sort((r, s) => {
+      const n = r[t], o = s[t];
+      if (n == null && o == null) return 0;
       if (n == null) return a === "asc" ? 1 : -1;
-      if (s == null) return a === "asc" ? -1 : 1;
-      if (typeof n == "number" && typeof s == "number")
-        return a === "asc" ? n - s : s - n;
-      if (n instanceof Date && s instanceof Date)
-        return a === "asc" ? n.getTime() - s.getTime() : s.getTime() - n.getTime();
-      const p = String(n).toLowerCase(), h = String(s).toLowerCase();
+      if (o == null) return a === "asc" ? -1 : 1;
+      if (typeof n == "number" && typeof o == "number")
+        return a === "asc" ? n - o : o - n;
+      if (n instanceof Date && o instanceof Date)
+        return a === "asc" ? n.getTime() - o.getTime() : o.getTime() - n.getTime();
+      const p = String(n).toLowerCase(), h = String(o).toLowerCase();
       return p < h ? a === "asc" ? -1 : 1 : p > h ? a === "asc" ? 1 : -1 : 0;
     });
   }
@@ -121,13 +125,13 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   _handleSelectAll(e) {
     const t = e.target, a = /* @__PURE__ */ new Set();
-    t.checked && this.data.forEach((r, o) => {
-      a.add(this._getRowKey(r, o));
+    t.checked && this.data.forEach((r, s) => {
+      a.add(this._getRowKey(r, s));
     }), this._selectedRowKeys = a, this._emitSelectionChange();
   }
   _handleSelectRow(e, t, a) {
-    const r = this._getRowKey(e, t), o = new Set(this._selectedRowKeys);
-    a ? o.add(r) : o.delete(r), this._selectedRowKeys = o, this._emitSelectionChange();
+    const r = this._getRowKey(e, t), s = new Set(this._selectedRowKeys);
+    a ? s.add(r) : s.delete(r), this._selectedRowKeys = s, this._emitSelectionChange();
   }
   _emitSelectionChange() {
     const e = this.data.filter(
@@ -153,18 +157,18 @@ let i = class extends y {
     }));
   }
   _handleCellChange(e, t, a, r) {
-    const o = r.target, n = e[a.id];
-    let s = o.value;
+    const s = r.target, n = e[a.id];
+    let o = s.value;
     if (a.type === "number" || a.type === "currency") {
-      const p = parseFloat(o.value);
-      s = isNaN(p) ? null : p;
+      const p = parseFloat(s.value);
+      o = isNaN(p) ? null : p;
     }
     this.dispatchEvent(new CustomEvent("pd-table-cell-change", {
       detail: {
         row: e,
         rowIndex: t,
         columnId: a.id,
-        value: s,
+        value: o,
         previousValue: n
       },
       bubbles: !0,
@@ -322,17 +326,17 @@ let i = class extends y {
     `;
   }
   _renderHeaderCell(e, t) {
-    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), o = this._sortColumn === e.id, n = this._draggedColumnIndex === t, s = this._dragOverColumnIndex === t && !n, p = o ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
+    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), s = this._sortColumn === e.id, n = this._draggedColumnIndex === t, o = this._dragOverColumnIndex === t && !n, p = s ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
     return d`
       <th
         role="columnheader"
         class=${m({
       sortable: a,
-      sorted: o,
+      sorted: s,
       [`align-${r}`]: !0,
       "column-draggable": this.draggableColumns,
       "column-dragging": n,
-      "column-drag-over": s
+      "column-drag-over": o
     })}
         style=${e.width ? `width: ${e.width};` : ""}${e.minWidth ? ` min-width: ${e.minWidth};` : ""}
         aria-sort=${a ? p : g}
@@ -364,8 +368,8 @@ let i = class extends y {
             <pd-icon
               class=${m({
       "sort-icon": !0,
-      "sort-icon-visible": o,
-      "sort-icon-desc": o && this._sortDirection === "desc"
+      "sort-icon-visible": s,
+      "sort-icon-desc": s && this._sortDirection === "desc"
     })}
               name="arrow_upward"
               size="small"
@@ -380,8 +384,14 @@ let i = class extends y {
   // Rendering - Cells
   // ---------------------------------------------------------------------------
   _renderCell(e, t, a) {
-    if (a.cellTemplate)
-      return a.cellTemplate(e, t);
+    if (a.cellTemplate) {
+      const s = a.cellTemplate(e, t);
+      if (this._isReactElement(s)) {
+        const n = `${this.rowKey(e, t)}-${a.id}`;
+        return this._renderReactCellContent(s, n);
+      }
+      return s;
+    }
     const r = e[a.id];
     if (a.editable)
       return this._renderEditableCell(e, t, a, r);
@@ -399,10 +409,10 @@ let i = class extends y {
     }
   }
   _renderEditableCell(e, t, a, r) {
-    const o = a.type === "number" || a.type === "currency" ? "number" : "text";
+    const s = a.type === "number" || a.type === "currency" ? "number" : "text";
     return d`
       <pd-text-field
-        type=${o}
+        type=${s}
         .value=${r != null ? String(r) : ""}
         aria-label="${a.header}"
         @change=${(n) => this._handleCellChange(e, t, a, n)}
@@ -444,26 +454,53 @@ let i = class extends y {
       ></pd-icon>
     `;
   }
+  _isReactElement(e) {
+    return typeof e == "object" && e !== null && "$$typeof" in e;
+  }
+  _renderReactCellContent(e, t) {
+    return d`<span style="display:contents" ${v((a) => {
+      if (!a) {
+        this._reactRoots.get(t)?.unmount(), this._reactRoots.delete(t);
+        return;
+      }
+      const r = this._reactRoots.get(t);
+      if (r) {
+        r.render(e);
+        return;
+      }
+      import("../client-C4NwtAXt.js").then((s) => s.c).then(({ createRoot: s }) => {
+        if (this._reactRoots.has(t))
+          this._reactRoots.get(t).render(e);
+        else {
+          const n = s(a);
+          n.render(e), this._reactRoots.set(t, {
+            render: (o) => n.render(o),
+            unmount: () => n.unmount()
+          });
+        }
+      });
+    })}></span>`;
+  }
   // ---------------------------------------------------------------------------
   // Rendering - Rows
   // ---------------------------------------------------------------------------
   _renderRow(e, t) {
-    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !o;
+    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), s = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !s;
     return d`
       <tr
         role="row"
         class=${m({
       selected: r,
       draggable: this.draggableRows,
-      dragging: o,
+      dragging: s,
       "drag-over": n
     })}
         aria-selected=${this.selectable ? String(r) : g}
         draggable=${this.draggableRows ? "true" : "false"}
-        @dragstart=${(s) => this._onDragStart(s, t)}
-        @dragover=${(s) => this._onDragOver(s, t)}
-        @drop=${(s) => this._onDrop(s, t)}
-        @dragend=${(s) => this._onDragEnd(s)}
+        @dragstart=${(o) => this._onDragStart(o, t)}
+        @dragover=${(o) => this._onDragOver(o, t)}
+        @drop=${(o) => this._onDrop(o, t)}
+        @dragend=${(o) => this._onDragEnd(o)}
         @click=${() => this._handleRowClick(e, t)}
       >
         ${this.draggableRows ? d`
@@ -477,7 +514,7 @@ let i = class extends y {
               aria-label="Drag to reorder row. Use arrow keys to move up or down."
               @mousedown=${this._handleDragHandleMouseDown}
               @mouseup=${this._handleDragHandleMouseUp}
-              @keydown=${(s) => this._handleDragHandleKeyDown(s, t)}
+              @keydown=${(o) => this._handleDragHandleKeyDown(o, t)}
             ></pd-icon>
           </td>
         ` : g}
@@ -487,24 +524,24 @@ let i = class extends y {
             <pd-checkbox
               aria-label="Select row"
               ?checked=${r}
-              @change=${(s) => {
-      const p = s.target;
+              @change=${(o) => {
+      const p = o.target;
       this._handleSelectRow(e, t, p.checked);
     }}
-              @click=${(s) => s.stopPropagation()}
+              @click=${(o) => o.stopPropagation()}
             ></pd-checkbox>
           </td>
         ` : g}
 
-        ${this.columns.map((s) => d`
+        ${this.columns.map((o) => d`
           <td
             role="cell"
             class=${m({
-      [`align-${this._getColumnAlignment(s)}`]: !0,
-      editable: !!s.editable
+      [`align-${this._getColumnAlignment(o)}`]: !0,
+      editable: !!o.editable
     })}
           >
-            ${this._renderCell(e, t, s)}
+            ${this._renderCell(e, t, o)}
           </td>
         `)}
       </tr>
@@ -545,7 +582,7 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   _renderPagination() {
     if (!this.pagination) return g;
-    const e = this._totalCount, t = e === 0 ? 0 : this.pageIndex * this.pageSize + 1, a = Math.min((this.pageIndex + 1) * this.pageSize, e), r = this.pageIndex === 0, o = this.pageIndex >= this._totalPages - 1 || e === 0;
+    const e = this._totalCount, t = e === 0 ? 0 : this.pageIndex * this.pageSize + 1, a = Math.min((this.pageIndex + 1) * this.pageSize, e), r = this.pageIndex === 0, s = this.pageIndex >= this._totalPages - 1 || e === 0;
     return d`
       <nav class="pagination">
         <div class="items-per-page">
@@ -585,13 +622,13 @@ let i = class extends y {
           <pd-icon-button
             icon="chevron_right"
             aria-label="Next page"
-            ?disabled=${o}
+            ?disabled=${s}
             @click=${() => this._handlePageChange(this.pageIndex + 1)}
           ></pd-icon-button>
           <pd-icon-button
             icon="last_page"
             aria-label="Last page"
-            ?disabled=${o}
+            ?disabled=${s}
             @click=${() => this._handlePageChange(this._totalPages - 1)}
           ></pd-icon-button>
         </div>
@@ -1098,7 +1135,7 @@ l([
   u()
 ], i.prototype, "_dragOverColumnIndex", 2);
 i = l([
-  _("pd-table")
+  y("pd-table")
 ], i);
 export {
   i as PdTable

package/dist/types/components/pd-table.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult, type PropertyValues } from 'lit';
+import type { ReactElement } from 'react';
 import './pd-icon';
 import './pd-checkbox';
 import './pd-text-field';
@@ -29,8 +30,8 @@ export interface PdTableColumn<T extends PdTableRowData = PdTableRowData> {
     type?: 'text' | 'number' | 'currency' | 'date' | 'boolean' | 'action';
     /** Currency code for currency type (overrides table-level currencyCode) */
     currencyCode?: string;
-    /** Custom cell renderer */
-    cellTemplate?: (row: T, index: number) => TemplateResult | string;
+    /** Custom cell renderer. Accepts a Lit TemplateResult, a plain string, or a React element (e.g. MUI components). */
+    cellTemplate?: (row: T, index: number) => TemplateResult | string | ReactElement;
 }
 export interface PdTableSortEvent {
     columnId: string;
@@ -120,6 +121,7 @@ export declare class PdTable<T extends PdTableRowData = PdTableRowData> extends
     private _dragOverColumnIndex;
     private _displayDataCache;
     private _displayDataCacheKey;
+    private _reactRoots;
     /** Whether server-side pagination is active */
     private get _isServerSidePagination();
     /** Total count for pagination display */
@@ -131,6 +133,7 @@ export declare class PdTable<T extends PdTableRowData = PdTableRowData> extends
      * Results are memoized for performance.
      */
     private get _displayData();
+    disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     private _computeCacheKey;
     private _sortData;
@@ -176,6 +179,8 @@ export declare class PdTable<T extends PdTableRowData = PdTableRowData> extends
     private _formatNumber;
     private _formatDate;
     private _renderBoolean;
+    private _isReactElement;
+    private _renderReactCellContent;
     private _renderRow;
     private _renderEmptyState;
     private _renderLoadingState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prioticket/design-system-web",
-  "version": "1.6.3",
+  "version": "1.7.0-beta.1",
   "type": "module",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/prioticket-design-system-web.cjs.js",