react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Table/Table.js

@@ -1 +1,1332 @@
-"use strict";"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import Yn,{forwardRef as Un,useState as O,useCallback as u,useMemo as me,useEffect as _,useRef as $}from"react";import{TableRoot as Qn,Toolbar as _n,ToolbarGroup as Ie,SearchInput as qn,ToolbarButton as K,TableWrapper as Gn,StyledTable as Xn,TableHeader as Zn,HeaderRow as er,HeaderCell as we,TableBody as tr,TableRow as nr,TableCell as ve,Checkbox as Et,ExpandButton as rr,ExpandedRow as or,ExpandedCell as ir,TableFooter as lr,FooterRow as ar,FooterCell as Re,PaginationWrapper as sr,PaginationInfo as dr,PaginationControls as cr,PageButton as q,PageSizeSelect as hr,QuickJumper as fr,EmptyState as pr,LoadingOverlay as ur,LoadingSpinner as gr,EditableCell as Cr,CellEditor as yr,ColumnTogglePanel as Tt,ColumnToggleHeader as Nt,ColumnToggleSearch as Lt,ColumnToggleList as Mt,ColumnToggleItem as Je,SelectionIndicator as br,SelectionCount as kr}from"./elements";import{useSortState as Sr,useFilterState as Fr,usePaginationState as xr,useRowSelection as mr,useRowExpansion as wr,useColumnVisibility as vr,useTableDebounce as Rr,sortData as $r,filterData as Ye,paginateData as Er,getNestedValue as G,exportToCSV as Tr,exportToExcel as Nr}from"./hooks";import{getFilterComponent as Lr}from"./filters";import{Tooltip as Mr}from"../Tooltip";const Pr=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"11",cy:"11",r:"8"}),t("path",{d:"M21 21l-4.35-4.35",strokeLinecap:"round"})]}),jr=({size:M=14})=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{width:M,height:M},children:t("path",{d:"M12 19V5M5 12l7-7 7 7"})}),Br=({size:M=14})=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{width:M,height:M},children:t("path",{d:"M12 5v14M5 12l7 7 7-7"})}),Lo=()=>t("svg",{viewBox:"0 0 10 10",fill:"currentColor",children:t("path",{d:"M5 0L10 6H0L5 0z"})}),Mo=()=>t("svg",{viewBox:"0 0 10 10",fill:"currentColor",children:t("path",{d:"M5 10L0 4h10L5 10z"})}),Pt=({order:M})=>{const $e=()=>{switch(M){case"asc":return{up:16,down:10};case"desc":return{up:10,down:16};default:return{up:14,down:14}}},{up:I,down:de}=$e();return s("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",gap:2,color:"white"},children:[t(jr,{size:I}),t(Br,{size:de})]})},Wr=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M15 18l-6-6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),Dr=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M9 18l6-6-6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),Vr=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5",strokeLinecap:"round",strokeLinejoin:"round"})}),zr=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M13 7l5 5-5 5M6 7l5 5-5 5",strokeLinecap:"round",strokeLinejoin:"round"})}),Hr=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M9 18l6-6-6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),jt=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M18 6L6 18M6 6l12 12",strokeLinecap:"round",strokeLinejoin:"round"})}),Ar=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z",strokeLinecap:"round",strokeLinejoin:"round"})}),Or=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3",strokeLinecap:"round",strokeLinejoin:"round"})}),Kr=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),t("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),Ir=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:[t("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),t("path",{d:"M3 9h18M9 3v18",strokeLinecap:"round"})]}),Jr=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M23 4v6h-6M1 20v-6h6",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15",strokeLinecap:"round",strokeLinejoin:"round"})]}),Yr=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2",strokeLinecap:"round",strokeLinejoin:"round"}),t("rect",{x:"6",y:"14",width:"12",height:"8"})]}),Po=()=>s("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("path",{d:"M12 8v4M12 16h.01",strokeLinecap:"round",strokeLinejoin:"round"})]});export const Table=Un(function($e,I){const{id:de,data:g,columns:R,keyField:E="_id",loading:Bt=!1,loadingIndicator:Wt,pagination:ce=!0,paginationConfig:Ue,totalSize:N,remote:Qe=!0,defaultSort:Dt,sort:Vt,filterable:zt=!1,defaultFilters:Ht,filters:At,defaultShowFilters:Ot=!0,showFilters:_e,onShowFiltersChange:qe,showFilterToggle:Ge=!0,searchable:Xe=!0,searchPlaceholder:Kt="Search...",defaultSearchValue:It="",searchValue:Jt,searchDebounce:Yt=300,rowSelection:P,expandable:p,editMode:J="dblclick",showEditIcon:Ut=!1,onCellEdit:Ze,exportable:Qt=!0,exportFileName:_t="table_export",exportFormat:Ee="csv",columnToggle:qt=!1,bordered:Gt=!0,striped:Xt=!1,hover:Zt=!0,compact:x=!1,cellPadding:he,stickyHeader:et=!1,maxHeight:en,rowClassName:Te,rowStyle:Ne,classNames:b={},styles:k={},className:tn,style:nn,emptyText:rn="No data available",onChange:w,onPageChange:fe,onSortChange:tt,onFilterChange:pe,onSearch:nt,onRowClick:Le,onRowDoubleClick:Me,onClearFilters:rt,toolbar:ue,hideToolbar:on=!1,showFooter:ln=!1,caption:ot,isDelete:Ur=!1,isEditModify:Qr,isUpdate:_r,isExport:an,isSelectRow:it,getNonSelectableRows:sn,nonSelectableStyle:dn,isView:qr=!1,fileName:cn,hideExcelSheet:ge=!1,onSelectedRow:hn,selectedRowStyle:fn,selectedRowClassName:pn,onUpdateItem:X,onPageSizeChange:Ce,onFilter:Pe,clearAllFilter:un,onDelete:Gr,onEdit:Xr,onView:Zr,dynamicStylingFields:eo,fieldTypeConfig:Y,showRowNumber:Z=!1,rowNumberWidth:lt=50,rowNumberTitle:gn="#",rowNumberRender:at,toolbarPosition:to="top",toolbarLeft:Cn,toolbarRight:yn,toolbarCenter:bn,refreshable:kn=!1,onRefresh:Sn,printable:Fn=!1,onPrint:xn,size:no="medium",error:ro,onRetry:oo,skeletonLoading:io=!1,skeletonRowCount:lo=5,hideHeader:ao=!1,highlightedRowKeys:so=[],highlightRowStyle:co,highlightRowClassName:ho,onRowMouseEnter:fo,onRowMouseLeave:po,onCellClick:uo,onHeaderClick:go,...st}=$e,mn=an??Qt,je=cn??_t,D=me(()=>N!==void 0&&N>0&&N<=g.length?!1:Qe,[Qe,N,g.length]),f=it?{mode:"checkbox",selectedRowStyle:fn||P?.selectedRowStyle,selectedRowClassName:pn||P?.selectedRowClassName,...P,getCheckboxProps:e=>{const n=e[E],r=sn?.includes(n),o=P?.getCheckboxProps?.(e);return{...o,disabled:r||o?.disabled}},onChange:(e,n)=>{P?.onChange?.(e,n)}}:P,j=ce?{page:0,pageSize:10,showSizeChanger:!0,showQuickJumper:!0,showTotal:!0,pageSizeOptions:[10,20,30,50],...Ue}:Ue,Co={small:{padding:"4px 8px",fontSize:"12px"},medium:{padding:"8px 12px",fontSize:"14px"},large:{padding:"12px 16px",fontSize:"16px"}},wn=$(null),ye=$(null),dt=$(0),[vn,ct]=O(It),[Rn,$n]=O(Ot),[B,ee]=O(!1),[be,ht]=O(""),[En,Be]=O("none");_(()=>{if(!B)return;const e=n=>{ye.current&&!ye.current.contains(n.target)&&ee(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[B]);const We=_e!==void 0,De=We?_e:Rn,yo=u(()=>{const e=!De;We||$n(e),qe?.(e)},[De,We,qe]),[V,L]=O(null),[T,ke]=O(null),U=Jt??vn,v=Rr(U,Yt),{sort:S,handleSort:ft}=Sr(Dt,Vt),{filters:F,setFilter:pt,clearFilters:ut}=Fr(Ht,At),te=$(!1),Se=$("filter"),gt=$(Pe),Tn=$(null),ne=$(null),re=$(null);_(()=>{const e=n=>{re.current&&!re.current.contains(n.target)&&(ne.current=null)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),_(()=>{const e=()=>{if(ne.current&&re.current){const r=re.current.querySelector(`[data-filter-field="${ne.current}"]`);if(r&&document.activeElement!==r){r.focus();const o=r.value?.length||0;r.setSelectionRange(o,o)}}},n=[requestAnimationFrame(()=>e()),setTimeout(()=>e(),50),setTimeout(()=>e(),150)];return()=>{n.forEach(r=>{typeof r=="number"&&(cancelAnimationFrame(r),clearTimeout(r))})}},[g]);const{page:C,pageSize:m,totalPages:bo,goToPage:Ct,goToNextPage:ko,goToPrevPage:So,goToFirstPage:Fo,goToLastPage:xo,changePageSize:yt}=xr(j?.page||0,j?.pageSize||10,N??g.length),{selectedKeys:z,isSelected:Nn,toggleRow:Fe,toggleAll:bt,isAllSelected:Ve,isIndeterminate:Ln}=mr(g,f?.keyField||E,f?.mode||"none",f?.selectedRowKeys,f?.getCheckboxProps),{expandedKeys:mo,isExpanded:Mn,toggleExpand:oe}=wr(p?.keyField||E,p?.defaultExpandedRowKeys,p?.expandedRowKeys,p?.accordion),{visibleColumns:H,toggleColumn:xe,isColumnHidden:ie}=vr(R,de);_(()=>{gt.current=Pe},[Pe]);const kt=$(v),St=$(JSON.stringify(F));_(()=>{if(!te.current)return;const e=JSON.stringify(F),n=kt.current!==v,r=St.current!==e;if(!n&&!r){te.current=!1;return}kt.current=v,St.current=e;const o={};Object.keys(F).forEach(i=>{const d=F[i];d!=null&&d!==""&&(o[i]=d)});const a=Object.keys(o).length>0,c={...o};Se.current==="search"&&v&&(c.srText=v),gt.current?.(Se.current,c,C,m),te.current=!1},[v,F,C,m]),_(()=>{const e=z.size,n=dt.current;e>n?Be("up"):e<n&&Be("down"),dt.current=e;const r=setTimeout(()=>{Be("none")},300);return()=>clearTimeout(r)},[z.size]);const ze=me(()=>{if(D)return g;let e=[...g];return e=Ye(e,F,R,v),e=$r(e,S,R),ce&&(e=Er(e,C,m)),e},[g,F,S,C,m,v,D,ce,R]),le=me(()=>N!==void 0&&N>0?N:D?g.length:Ye(g,F,R,v).length,[g,F,R,v,D,N]),He=u(e=>{ct(e),nt?.(e),te.current=!0,Se.current="search",w?.({type:"search",search:e})},[nt,w]),Ae=u(e=>{if(!e.sort)return;const n=ft(e.dataField,S.order);tt?.(n),w?.({type:"sort",sort:n})},[S,ft,tt,w]),Ft=u((e,n)=>{pt(e,n);const r={...F,[e]:n};pe?.(r),te.current=!0,Se.current="filter",w?.({type:"filter",filters:r})},[F,pt,pe,w]),xt=u(()=>{ut(),ct(""),rt?.(),un?.(),pe?.({}),w?.({type:"filter",filters:{}}),Tn.current=null},[ut,rt,pe,w]),Q=u(e=>{Ct(e);const n=e+1;Ce?.(n,m),fe?.(n,m),w?.({type:"pagination",pagination:{page:n,pageSize:m}})},[Ct,m,Ce,fe,w]),Pn=u(e=>{yt(e),Ce?.(1,e),fe?.(1,e),w?.({type:"pagination",pagination:{page:1,pageSize:e}})},[yt,Ce,fe,w]),jn=u((e,n,r)=>{if(f?.mode==="single"){const o=Fe(e);o&&f?.onChange?.(o.selectedKeys,o.selectedRows)}if(p?.expandRowByClick){const o=oe(e);o&&p.onExpandChange?.(o.expandedKeys,o.expanded,e)}Le?.(e,n,r)},[P,p,Fe,oe,Le]),ae=u((e,n,r,o)=>{const a=!!e.editorRenderer;if(e.editable===void 0)return{isEditable:a};if(e.editable===!1)return{isEditable:!1};if(e.editable===!0)return{isEditable:!0};const c=G(n,e.dataField),i=e.editable(c,n,r,o);return typeof i=="boolean"?{isEditable:i}:{isEditable:!0,customEditor:i}},[]),Bn=u((e,n,r,o,a)=>{if(r.events?.onDoubleClick?.(a,e,n,r,o),J!=="none"){const{isEditable:c}=ae(r,e,n,o);c&&J==="dblclick"&&(L({row:n,field:r.dataField}),ke(G(e,r.dataField)))}Me?.(e,n,a)},[J,Me,ae]),Wn=u((e,n,r,o,a)=>{if(a&&r.events?.onClick?.(a,e,n,r,o),J==="click"){const{isEditable:c}=ae(r,e,n,o);c&&(L({row:n,field:r.dataField}),ke(G(e,r.dataField)))}},[J,ae]),Oe=u((e,n,r)=>{if(V){if(r.validator){const a=r.validator(T,e);if(a!==!0){alert(typeof a=="string"?a:"Invalid value"),L(null);return}}const o=e[E];Ze?.(T,r.dataField,e,n),X?.(T,r.dataField,o)}L(null)},[V,T,Ze,X,E]),Dn=(e,n)=>n.split(".").reduce((r,o)=>r?.[o],e),mt=u((e,n,r)=>{const o=Y?.[n],a=typeof o=="string"?{type:o}:o;switch(a?.type||"string"){case"array":return a?.fields&&a.fields.length>0?Array.isArray(e)?e.slice(0,a.maxItems||e.length).map(l=>typeof l=="object"&&a.fields?a.fields.map(y=>l[y]).filter(Boolean).join(", "):typeof l=="string"?l:"").filter(Boolean).join(a.separator||"; "):e||"":Array.isArray(e)?e.map(l=>typeof l=="object"?JSON.stringify(l):l).join("; "):e||"";case"object":if(!e||typeof e!="object")return"";const i=a?.fields||a?.keys||[],d=a?.labelMap||{};return i.length>0?i.map(l=>{const y=Dn(e,l);return y!=null?`${d[l]||l}: ${y}`:null}).filter(Boolean).join(", "):Object.entries(e).map(([l,y])=>typeof y=="boolean"?`${l}: ${y?"Yes":"No"}`:`${l}: ${y}`).join(", ");case"date":if(!e)return"";try{const l=new Date(e),y=a?.dateFormat||"YYYY-MM-DD HH:mm:ss";return l.toISOString().slice(0,19).replace("T"," ")}catch{return String(e)}case"number":return e!=null?String(Number(e)):"";case"boolean":return typeof e=="boolean"?e?"Yes":"No":"";default:return typeof e=="boolean"?e?"Yes":"No":e!=null?String(e):""}},[Y]),wt=u(async()=>{const e=D?g:Ye(g,F,R,v);let n=H.filter(o=>o.csvExport!==!1);Array.isArray(ge)&&(n=n.filter(o=>!ge.includes(o.dataField))),Y&&(n=n.filter(o=>{const a=Y[o.dataField],c=typeof a=="string"?{type:a}:a;return!(c?.hideFromExport||c?.csvExport===!1)}));const r=n.map(o=>{const a=Y?.[o.dataField],c=typeof a=="string"?{type:a}:a;return o.csvFormatter?o:c?.exportFormatter?{...o,csvFormatter:c.exportFormatter}:c?.type?{...o,csvFormatter:(i,d)=>mt(i,o.dataField,d)}:o});Ee==="excel"?await Nr(e,r,je):Tr(e,r,je)},[g,F,R,v,H,ge,Y,mt,je,D,Ee]),Vn=u((e,n)=>{n.stopPropagation();const r=Fe(e);r&&f?.onChange?.(r.selectedKeys,r.selectedRows)},[Fe,P]),zn=u(()=>{const e=bt(!Ve);e&&f?.onChange?.(e.selectedKeys,e.selectedRows)},[bt,Ve,f]),Hn=u((e,n)=>{n.stopPropagation();const r=oe(e);p?.onExpandChange?.(r.expandedKeys,r.expanded,e)},[oe,p]),se=me(()=>R.filter(e=>e.dataField!==E&&e.text.toLowerCase().includes(be.toLowerCase())),[R,E,be]),vt=u(e=>e[E],[E]),Rt=u((e,n,r,o)=>{const a=G(e,n.dataField);if(V?.row===r&&V?.field===n.dataField){if(n.editorRenderer){const i=e[E],d={value:T,onUpdate:l=>{ke(l),X?.(l,n.dataField,i),L(null)},onCancel:()=>L(null),onBlur:()=>{T!==a&&X?.(T,n.dataField,i),L(null)},row:e,column:n,rowIndex:r,columnIndex:o,rowId:i,dataField:n.dataField,onUpdateItem:l=>{X?.(l,n.dataField,i),L(null)}};return n.editorRenderer(d,T,e,n,r,o)}return t(yr,{type:n.editorType==="number"?"number":"text",value:T??"",onChange:i=>ke(i.target.value),onBlur:()=>Oe(e,r,n),onKeyDown:i=>{i.key==="Enter"&&Oe(e,r,n),i.key==="Escape"&&L(null)},className:n.editorClasses,style:n.editorStyle,autoFocus:!0})}return n.formatter?n.formatter(a,e,r,o):a==null?"":typeof a=="boolean"?a?"Yes":"No":typeof a=="object"?JSON.stringify(a):String(a)},[V,T,Oe]),An=()=>{if(on)return null;if(typeof ue=="function")return ue({searchValue:U,onSearch:He,onClearFilters:xt,onExport:wt});if(ue)return ue;const e=Object.keys(F).length>0||U;return s(_n,{className:b.toolbar,style:k.toolbar,children:[s(Ie,{children:[Cn,Xe&&s(qn,{children:[t(Pr,{}),t("input",{type:"text",value:U,onChange:n=>He(n.target.value),onFocus:()=>{ne.current=null},placeholder:Kt})]}),Xe&&t(K,{onClick:()=>He(""),disabled:!U,style:{opacity:U?1:.6},children:"Clear"}),t(K,{onClick:xt,disabled:!e,style:{opacity:e?1:.6},children:"Clear all filters"}),mn&&ge!==!0&&s(K,{onClick:wt,children:[t(Or,{}),Ee==="excel"?"Export Excel":"Export CSV"]}),Ge&&s("div",{ref:ye,style:{position:"relative"},children:[t(Mr,{content:"Show/Hide Columns",position:"bottom",children:t(K,{$active:B,onClick:()=>ee(!B),"aria-label":"Toggle column visibility",style:{padding:"0 8px"},children:t(Ar,{})})}),B&&s(Tt,{children:[s(Nt,{children:[t("span",{children:"Show/Hide Columns"}),t("button",{onClick:()=>ee(!1),children:t(jt,{})})]}),t(Lt,{children:t("input",{type:"text",value:be,onChange:n=>ht(n.target.value),placeholder:"Search columns..."})}),s(Mt,{children:[s(Je,{style:{borderBottom:"1px solid #e5e7eb",paddingBottom:8,marginBottom:4},children:[t("input",{type:"checkbox",checked:se.length>0&&se.every(n=>!ie(n.dataField)),onChange:n=>{se.forEach(r=>{n.target.checked?ie(r.dataField)&&xe(r.dataField):ie(r.dataField)||xe(r.dataField)})}}),t("span",{style:{fontWeight:600},children:"Select All"})]}),se.map(n=>s(Je,{children:[t("input",{type:"checkbox",checked:!ie(n.dataField),onChange:()=>xe(n.dataField)}),t("span",{children:n.text})]},n.dataField))]})]})]})]}),bn,s(Ie,{children:[kn&&s(K,{onClick:Sn,children:[t(Jr,{}),"Refresh"]}),Fn&&s(K,{onClick:xn,children:[t(Yr,{}),"Print"]}),qt&&s("div",{ref:Ge?void 0:ye,style:{position:"relative"},children:[s(K,{$active:B,onClick:()=>ee(!B),children:[t(Kr,{}),"Columns"]}),B&&s(Tt,{children:[s(Nt,{children:[t("span",{children:"Toggle Columns"}),t("button",{onClick:()=>ee(!1),children:t(jt,{})})]}),t(Lt,{children:t("input",{type:"text",value:be,onChange:n=>ht(n.target.value),placeholder:"Search columns..."})}),t(Mt,{children:se.map(n=>s(Je,{children:[t("input",{type:"checkbox",checked:!ie(n.dataField),onChange:()=>xe(n.dataField)}),t("span",{children:n.text})]},n.dataField))})]})]}),yn]})]})},On=()=>{if(!ce)return null;const e=Math.ceil(le/m)||1,n=le>0?C*m+1:0,r=D?g.length:ze.length,o=Math.min(C*m+r,le),a=j?.showTotal===!0?`Showing ${n} to ${o} of ${le} Results`:typeof j?.showTotal=="function"?j.showTotal(le,[n,o]):null,c=()=>{const i=[];if(e<=5)for(let l=0;l<e;l++)i.push(l);else if(C<3){for(let l=0;l<4;l++)i.push(l);i.push("..."),i.push(e-1)}else if(C>e-4){i.push(0),i.push("...");for(let l=e-4;l<e;l++)i.push(l)}else{i.push(0),i.push("...");for(let l=C-1;l<=C+1;l++)i.push(l);i.push("..."),i.push(e-1)}return i};return s(sr,{className:b.pagination,style:k.pagination,children:[s(Ie,{children:[(f?.mode==="checkbox"||it)&&z.size>0&&s(br,{onClick:()=>{const i=g.filter(d=>z.has(vt(d)));f?.onChange?.(Array.from(z),i),hn?.(i)},children:[t(kr,{$animate:En,children:z.size},z.size),t("span",{children:"Selected"})]}),j?.showSizeChanger!==!1&&t(hr,{value:m,onChange:i=>Pn(Number(i.target.value)),children:(j?.pageSizeOptions||[10,20,30,50]).map(i=>t("option",{value:i,children:i},i))})]}),s(cr,{children:[t(q,{onClick:()=>Q(0),disabled:C===0,children:t(Vr,{})}),t(q,{onClick:()=>Q(C-1),disabled:C===0,children:t(Wr,{})}),c().map((i,d)=>typeof i=="string"?t("span",{style:{padding:"0 4px",color:"white"},children:i},`ellipsis-${d}`):t(q,{$active:i===C,onClick:()=>Q(i),children:i+1},i)),t(q,{onClick:()=>Q(C+1),disabled:C>=e-1,children:t(Dr,{})}),t(q,{onClick:()=>Q(e-1),disabled:C>=e-1,children:t(zr,{})})]}),a&&t(dr,{children:a}),j?.showQuickJumper&&(()=>{const i=d=>{const l=parseInt(d.value,10);return!isNaN(l)&&l>=1&&l<=e?(Q(l-1),d.value="",!0):!1};return s(fr,{children:["Go to",t("input",{type:"number",min:1,max:e,placeholder:`1-${e}`,onKeyDown:d=>{if(d.key==="Enter"){d.preventDefault();const l=d.target;i(l)&&l.blur()}},onBlur:d=>{const l=d.target;i(l)}}),t(q,{onClick:()=>{const d=document.querySelector(`#${de} input[type="number"]`);d&&(i(d),d.blur())},style:{marginLeft:"4px",padding:"2px 8px"},children:"Go"})]})})()]})},Kn=(zt||R.some(e=>typeof e.filter=="function"||e.filterComponent||e.filter===!0))&&De;return s(Qn,{ref:e=>{typeof I=="function"?I(e):I&&(I.current=e),re.current=e},$bordered:Gt,$compact:x,className:tn||b.root,style:{...k.root,...nn,position:"relative"},"aria-label":st["aria-label"],"aria-labelledby":st["aria-labelledby"],children:[Bt&&t(ur,{className:b.loading,style:k.loading,children:Wt||t(gr,{})}),An(),t(Gn,{$maxHeight:en,$stickyHeader:et,className:b.wrapper,style:k.wrapper,children:s(Xn,{ref:wn,$striped:Xt,$hover:Zt,$compact:x,role:"grid",children:[ot&&t("caption",{className:"sr-only",children:ot}),t(Zn,{$sticky:et,className:b.header,style:k.header,children:s(er,{className:b.headerRow,style:k.headerRow,children:[f?.mode==="checkbox"&&t(we,{$align:"center",$sortable:!1,$compact:x,$width:f.columnWidth||40,children:!f.hideSelectAll&&t(Et,{checked:Ve,ref:e=>{e&&(e.indeterminate=Ln)},onChange:zn})}),p&&t(we,{$align:"center",$sortable:!1,$compact:x,$width:p.columnWidth||40}),Z&&t(we,{$align:"center",$sortable:!1,$compact:x,$width:lt,children:gn}),H.map((e,n)=>{const r=typeof e.filter=="function"||e.filter===!0||e.filterComponent||e.filterRenderer,o=r?(typeof e.filter=="function"?e.filter:null)||e.filterComponent||Lr(e.filterType||"text"):null,a=c=>Ft(e.dataField,c);return t(we,{$align:e.headerAlign||e.align||"left",$sortable:!!e.sort,$compact:x,$width:e.width,$minWidth:e.minWidth,$pinned:e.pinned,$customClass:!!e.headerClasses,className:[e.headerClasses,b.headerCell].filter(Boolean).join(" "),style:typeof e.headerStyle=="function"?e.headerStyle(e):e.headerStyle||k.headerCell,role:"columnheader","aria-sort":S.field===e.dataField?S.order==="asc"?"ascending":S.order==="desc"?"descending":"none":void 0,children:(()=>{const c=typeof e.headerStyle=="function"?e.headerStyle(e):e.headerStyle,i=e.isHeaderTitle!==!1&&e.hideHeaderText!==!0&&!(c&&c.fontSize===0),d=e.isHeaderFilterComp!==!1&&Kn&&r&&o,l=e.isHeaderSort!==!1&&e.sort;return d?s("div",{style:{display:"flex",flexDirection:"column",gap:4,width:"100%"},children:[i&&t("span",{style:{color:"white",fontWeight:600,fontSize:12,whiteSpace:"nowrap",cursor:l?"pointer":"default"},onClick:()=>l&&Ae(e),children:e.headerFormatter?e.headerFormatter(e,n):e.headerText||e.text}),s("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:6,width:"100%",minHeight:24},children:[t("div",{style:{width:l?"80%":"100%",minWidth:0,flexShrink:1,display:"flex",alignItems:"center"},onClick:y=>y.stopPropagation(),children:e.filterRenderer?e.filterRenderer(a,e):t("div",{onFocusCapture:()=>{ne.current=e.dataField},"data-filter-wrapper":e.dataField,children:t(o,{column:e,value:F[e.dataField],onChange:a,onClear:()=>Ft(e.dataField,null)},`filter-${e.dataField}`)})}),l&&t("div",{style:{width:"20%",minWidth:24,height:24,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,cursor:"pointer"},onClick:()=>Ae(e),children:e.sortCaret?e.sortCaret(S.field===e.dataField?S.order:null,e):t(Pt,{order:S.field===e.dataField?S.order:null,column:e})})]})]}):s("div",{style:{display:"flex",alignItems:"center",justifyContent:e.headerAlign||e.align||"left",gap:6,width:"100%",cursor:l?"pointer":"default"},onClick:()=>l&&Ae(e),children:[i&&t("span",{style:{color:"white",fontWeight:600,fontSize:12,whiteSpace:"nowrap"},children:e.headerFormatter?e.headerFormatter(e,n):e.headerText||e.text}),l&&t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.sortCaret?e.sortCaret(S.field===e.dataField?S.order:null,e):t(Pt,{order:S.field===e.dataField?S.order:null,column:e})})]})})()},e.dataField)})]})}),t(tr,{className:b.body,style:k.body,children:ze.length===0?t("tr",{children:t("td",{colSpan:H.length+(f?.mode==="checkbox"?1:0)+(p?1:0)+(Z?1:0),children:s(pr,{className:b.empty,style:k.empty,children:[t(Ir,{}),t("span",{children:rn})]})})}):ze.map((e,n)=>{const r=vt(e),o=Nn(r),a=Mn(r),c=f?.getCheckboxProps?.(e),i=p?.rowExpandable?.(e)??!0,d=typeof Te=="function"?Te(e,n):Te,l=typeof Ne=="function"?Ne(e,n):Ne,y=o?typeof f?.selectedRowStyle=="function"?f.selectedRowStyle(e):f?.selectedRowStyle:void 0,Ke=o&&y&&(y.backgroundColor||y.background),In=c?.disabled?dn||{backgroundColor:"#f3f4f6",opacity:.7}:void 0;return s(Yn.Fragment,{children:[s(nr,{$selected:o,$clickable:!!Le||f?.mode==="single"||p?.expandRowByClick===!0,$disabled:!!c?.disabled,$hasCustomSelectedStyle:!!Ke,"data-custom-selected":Ke?"true":void 0,className:`${b.row||""} ${d||""} ${o?typeof f?.selectedRowClassName=="function"?f.selectedRowClassName(e):f?.selectedRowClassName||"":""}`,style:{...k.row,...l,...y,...In},onClick:h=>jn(e,n,h),onDoubleClick:h=>{Me?.(e,n,h)},role:"row","aria-selected":o,children:[f?.mode==="checkbox"&&t(ve,{$align:"center",$compact:x,$padding:he,children:t(Et,{checked:o,disabled:c?.disabled,onChange:h=>Vn(e,h),onClick:h=>h.stopPropagation()})}),p&&t(ve,{$align:"center",$compact:x,$padding:he,children:i&&t(rr,{$expanded:a,onClick:h=>Hn(e,h),children:p.expandIcon?p.expandIcon({expanded:a,row:e,onExpand:()=>oe(e)}):t(Hr,{})})}),Z&&t(ve,{$align:"center",$compact:x,$padding:he,style:{width:lt,color:"#6b7280",fontWeight:500},children:at?at(n+1,e):n+1+C*m}),H.map((h,A)=>{const $t=typeof h.classes=="function"?h.classes(G(e,h.dataField),e,n,A):h.classes,Jn=typeof h.style=="function"?h.style(G(e,h.dataField),e,n,A):h.style;return t(ve,{$align:h.align||"left",$compact:x,$padding:he,$pinned:h.pinned,$hasCustomClass:!!$t,className:$t||b.cell,style:{...k.cell,...Jn},onClick:W=>Wn(e,n,h,A,W),onDoubleClick:W=>{W.stopPropagation(),Bn(e,n,h,A,W)},role:"gridcell",children:(()=>{const W=ae(h,e,n,A);return W.isEditable&&J!=="none"?W.customEditor?W.customEditor:t(Cr,{$editing:V?.row===n&&V?.field===h.dataField,$showEditIcon:Ut,children:Rt(e,h,n,A)}):Rt(e,h,n,A)})()},h.dataField)})]}),p&&a&&i&&t(or,{children:t(ir,{colSpan:H.length+(f?.mode==="checkbox"?1:0)+(p?1:0)+(Z?1:0),children:p.expandedRowRender?.(e,n,a)})})]},r)})}),ln&&t(lr,{className:b.footer,style:k.footer,children:s(ar,{className:b.footerRow,style:k.footerRow,children:[f?.mode==="checkbox"&&t(Re,{$align:"center",$compact:x}),p&&t(Re,{$align:"center",$compact:x}),Z&&t(Re,{$align:"center",$compact:x}),H.map(e=>t(Re,{$align:e.align||"left",$compact:x,className:b.footerCell,style:k.footerCell,children:typeof e.footer=="function"?e.footer(e,g):e.footerFormatter?e.footerFormatter(e,g):e.footer},e.dataField))]})})]})}),On()]})});Table.displayName="Table";export default Table;
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
+import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, ColumnToggleDragHandle, SelectionIndicator, SelectionCount, } from './elements';
+import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
+import { getFilterComponent } from './filters';
+import { Tooltip } from '../Tooltip';
+import { useColumnResize, getColumnStyle } from './columnResize';
+// Column reorder is handled internally via popup drag & drop
+// Icons
+const SearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "M21 21l-4.35-4.35", strokeLinecap: "round" })] }));
+// Arrow Up Icon with configurable size
+// Arrow Up Icon - stroke-based arrow pointing up (like BsArrowUp)
+const ArrowUpIcon = ({ size = 16, color = 'white', }) => (_jsx("svg", { viewBox: "0 0 16 16", fill: color, style: { width: size, height: size, display: 'block' }, children: _jsx("path", { fillRule: "evenodd", d: "M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" }) }));
+// Arrow Down Icon - stroke-based arrow pointing down (like BsArrowDown)
+const ArrowDownIcon = ({ size = 16, color = 'white', }) => (_jsx("svg", { viewBox: "0 0 16 16", fill: color, style: { width: size, height: size, display: 'block' }, children: _jsx("path", { fillRule: "evenodd", d: "M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" }) }));
+// Default sort caret component with arrow icons (matches BsArrowUp/BsArrowDown style)
+const DefaultSortCaret = ({ order, }) => {
+    // Size configuration based on sort order (like your custom sortCaret)
+    const getSizeConfig = () => {
+        switch (order) {
+            case 'asc':
+                return { up: 18, down: 12 };
+            case 'desc':
+                return { up: 12, down: 18 };
+            default:
+                return { up: 16, down: 16 };
+        }
+    };
+    const { up, down } = getSizeConfig();
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 0,
+        }, children: [_jsx(ArrowUpIcon, { size: up, color: "white" }), _jsx(ArrowDownIcon, { size: down, color: "white" })] }));
+};
+const ChevronLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 18l6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronsLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronsRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M13 7l5 5-5 5M6 7l5 5-5 5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ExpandIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 18l6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const FilterIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const DownloadIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ColumnsIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "18", rx: "1" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "18", rx: "1" })] }));
+const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M3 9h18M9 3v18", strokeLinecap: "round" })] }));
+const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M23 4v6h-6M1 20v-6h6", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
+const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const Table = forwardRef(function TableComponent(props, ref) {
+    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
+    // Quick configuration props
+    isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, getNonSelectableRows, nonSelectableStyle, isView = false, fileName, hideExcelSheet = false, 
+    // Quick callbacks
+    onSelectedRow, selectedRowStyle, selectedRowClassName, onUpdateItem, onPageSizeChange, onFilter, clearAllFilter, onDelete, onEdit, onView, 
+    // Dynamic configuration
+    dynamicStylingFields, fieldTypeConfig, 
+    // Row number
+    showRowNumber = false, rowNumberWidth = 50, rowNumberTitle = '#', rowNumberRender, 
+    // Toolbar customization
+    toolbarPosition = 'top', toolbarLeft, toolbarRight, toolbarCenter, 
+    // Refresh
+    refreshable = false, onRefresh, 
+    // Print
+    printable = false, onPrint, 
+    // Size
+    size = 'medium', 
+    // Error state
+    error, onRetry, 
+    // Skeleton loading
+    skeletonLoading = false, skeletonRowCount = 5, 
+    // Hide header
+    hideHeader = false, 
+    // Highlighted rows
+    highlightedRowKeys = [], highlightRowStyle, highlightRowClassName, 
+    // Events
+    onRowMouseEnter, onRowMouseLeave, onCellClick, onHeaderClick, 
+    // Column Resizing
+    resizable = true, resizeConfig, 
+    // Column Reordering
+    reorderable = true, reorderConfig, ...rest } = props;
+    // Resolve aliases
+    const resolvedExportable = isExport ?? exportable;
+    const resolvedExportFileName = fileName ?? exportFileName;
+    // Auto-detect remote mode: if totalSize <= data.length, use client-side (remote=false)
+    const resolvedRemote = useMemo(() => {
+        // If totalSize is provided and is <= data.length, all data is loaded - use client-side
+        if (totalSize !== undefined &&
+            totalSize > 0 &&
+            totalSize <= data.length) {
+            return false;
+        }
+        // Otherwise use the prop value (default: true)
+        return remote;
+    }, [remote, totalSize, data.length]);
+    // Handle isSelectRow shorthand
+    const resolvedRowSelection = isSelectRow
+        ? {
+            mode: 'checkbox',
+            selectedRowStyle: selectedRowStyle || rowSelection?.selectedRowStyle,
+            selectedRowClassName: selectedRowClassName || rowSelection?.selectedRowClassName,
+            ...rowSelection,
+            // Merge getNonSelectableRows with existing getCheckboxProps
+            getCheckboxProps: (row) => {
+                const rowKey = row[keyField];
+                const isNonSelectable = getNonSelectableRows?.includes(rowKey);
+                const existingProps = rowSelection?.getCheckboxProps?.(row);
+                return {
+                    ...existingProps,
+                    disabled: isNonSelectable || existingProps?.disabled,
+                };
+            },
+            onChange: (keys, rows) => {
+                rowSelection?.onChange?.(keys, rows);
+                // Note: onSelectedRow is only called when user clicks the "X Selected" button
+            },
+        }
+        : rowSelection;
+    // Default pagination config - users don't need to pass these
+    const resolvedPaginationConfig = pagination
+        ? {
+            page: 0,
+            pageSize: 10,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: true,
+            pageSizeOptions: [10, 20, 30, 50],
+            ...paginationConfig,
+        }
+        : paginationConfig;
+    // Size configuration
+    const sizeConfig = {
+        small: { padding: '4px 8px', fontSize: '12px' },
+        medium: { padding: '8px 12px', fontSize: '14px' },
+        large: { padding: '12px 16px', fontSize: '16px' },
+    };
+    // Refs
+    const tableRef = useRef(null);
+    const columnToggleRef = useRef(null);
+    const prevSelectionCountRef = useRef(0);
+    // State
+    const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
+    const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
+    const [columnToggleOpen, setColumnToggleOpen] = useState(false);
+    const [columnSearch, setColumnSearch] = useState('');
+    const [selectionAnimation, setSelectionAnimation] = useState('none');
+    // Column toggle reorder state
+    const [toggleDraggingColumn, setToggleDraggingColumn] = useState(null);
+    const [toggleDragOverColumn, setToggleDragOverColumn] = useState(null);
+    // Internal state for reordered columns (used in popup and for rendering)
+    const [reorderedColumns, setReorderedColumns] = useState(columns);
+    // Sync reorderedColumns when columns prop changes
+    useEffect(() => {
+        setReorderedColumns(columns);
+    }, [columns]);
+    // Close column toggle panel on outside click
+    useEffect(() => {
+        if (!columnToggleOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (columnToggleRef.current &&
+                !columnToggleRef.current.contains(event.target)) {
+                setColumnToggleOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [columnToggleOpen]);
+    // Filter visibility (controlled or uncontrolled)
+    const isFilterVisibilityControlled = controlledShowFilters !== undefined;
+    const showFilterRow = isFilterVisibilityControlled
+        ? controlledShowFilters
+        : internalShowFilters;
+    const handleToggleFilters = useCallback(() => {
+        const newValue = !showFilterRow;
+        if (!isFilterVisibilityControlled) {
+            setInternalShowFilters(newValue);
+        }
+        onShowFiltersChange?.(newValue);
+    }, [showFilterRow, isFilterVisibilityControlled, onShowFiltersChange]);
+    const [editingCell, setEditingCell] = useState(null);
+    const [editValue, setEditValue] = useState(null);
+    const searchValue = controlledSearchValue ?? internalSearchValue;
+    const debouncedSearchValue = useTableDebounce(searchValue, searchDebounce);
+    // Sort state
+    const { sort, handleSort } = useSortState(defaultSort, controlledSort);
+    // Filter state
+    const { filters, setFilter, clearFilters } = useFilterState(defaultFilters, controlledFilters);
+    // Track if onFilter should be called (only after user interaction)
+    const shouldCallOnFilter = useRef(false);
+    const filterTypeRef = useRef('filter');
+    const onFilterRef = useRef(onFilter);
+    // Track last called values to prevent duplicate calls
+    const lastOnFilterCallRef = useRef(null);
+    // Track focused filter field to restore focus after data changes
+    const focusedFilterFieldRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    // Clear focus ref when clicking outside the table
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (tableContainerRef.current &&
+                !tableContainerRef.current.contains(event.target)) {
+                focusedFilterFieldRef.current = null;
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Restore filter focus after data changes
+    useEffect(() => {
+        const restoreFocus = () => {
+            if (focusedFilterFieldRef.current && tableContainerRef.current) {
+                const filterInput = tableContainerRef.current.querySelector(`[data-filter-field="${focusedFilterFieldRef.current}"]`);
+                if (filterInput && document.activeElement !== filterInput) {
+                    filterInput.focus();
+                    // Move cursor to end of input
+                    const len = filterInput.value?.length || 0;
+                    filterInput.setSelectionRange(len, len);
+                }
+            }
+        };
+        // Try multiple times with increasing delays to handle async renders
+        const timers = [
+            requestAnimationFrame(() => restoreFocus()),
+            setTimeout(() => restoreFocus(), 50),
+            setTimeout(() => restoreFocus(), 150),
+        ];
+        return () => {
+            timers.forEach((timer) => {
+                if (typeof timer === 'number') {
+                    cancelAnimationFrame(timer);
+                    clearTimeout(timer);
+                }
+            });
+        };
+    }, [data]);
+    // Pagination state
+    const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
+    // Row selection
+    const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data, resolvedRowSelection?.keyField || keyField, resolvedRowSelection?.mode || 'none', resolvedRowSelection?.selectedRowKeys, resolvedRowSelection?.getCheckboxProps);
+    // Row expansion
+    const { expandedKeys, isExpanded, toggleExpand } = useRowExpansion(expandable?.keyField || keyField, expandable?.defaultExpandedRowKeys, expandable?.expandedRowKeys, expandable?.accordion);
+    // Column visibility
+    const { visibleColumns, toggleColumn, isColumnHidden } = useColumnVisibility(columns, id);
+    // Column resizing hook
+    const { columnWidths, getResizeHandle, resetWidths: resetColumnWidths, isResizing, } = useColumnResize({
+        columns: visibleColumns,
+        config: resizeConfig,
+        enabled: resizable,
+        tableId: id,
+    });
+    // Get visible columns from reordered columns (filter hidden ones)
+    const visibleRereorderedColumns = useMemo(() => {
+        return reorderedColumns.filter((col) => !isColumnHidden(col.dataField));
+    }, [reorderedColumns, isColumnHidden]);
+    // Use reordered visible columns for rendering
+    const renderColumns = reorderable
+        ? visibleRereorderedColumns
+        : visibleColumns;
+    // Keep onFilter ref updated
+    useEffect(() => {
+        onFilterRef.current = onFilter;
+    }, [onFilter]);
+    // Track previous values to detect actual changes
+    const prevSearchRef = useRef(debouncedSearchValue);
+    const prevFiltersRef = useRef(JSON.stringify(filters));
+    // Call onFilter when filter/search values actually change
+    // Note: filter components already debounce internally, so we use filters directly
+    useEffect(() => {
+        if (!shouldCallOnFilter.current)
+            return;
+        const currentFiltersStr = JSON.stringify(filters);
+        const searchChanged = prevSearchRef.current !== debouncedSearchValue;
+        const filtersChanged = prevFiltersRef.current !== currentFiltersStr;
+        // Only proceed if search or filters actually changed
+        if (!searchChanged && !filtersChanged) {
+            shouldCallOnFilter.current = false;
+            return;
+        }
+        // Update previous values
+        prevSearchRef.current = debouncedSearchValue;
+        prevFiltersRef.current = currentFiltersStr;
+        // Clean up filters - remove null, undefined, and empty string values
+        const cleanFilters = {};
+        Object.keys(filters).forEach((key) => {
+            const value = filters[key];
+            if (value !== null && value !== undefined && value !== '') {
+                cleanFilters[key] = value;
+            }
+        });
+        const hasFilters = Object.keys(cleanFilters).length > 0;
+        // Build filter data based on what type of filter changed
+        // For 'search' type, include srText if not empty; for 'filter' type, only pass filters
+        const filterData = { ...cleanFilters };
+        if (filterTypeRef.current === 'search' && debouncedSearchValue) {
+            filterData.srText = debouncedSearchValue;
+        }
+        // Always call onFilter when filters change (including when cleared)
+        // Case 1: Global search cleared, column filters exist → filters only
+        // Case 2: Global search cleared, no column filters → empty filters (reload all)
+        // Case 3: Specific column cleared → remaining filters
+        onFilterRef.current?.(filterTypeRef.current, filterData, page, pageSize);
+        // Reset the flag after processing to prevent duplicate calls
+        shouldCallOnFilter.current = false;
+    }, [debouncedSearchValue, filters, page, pageSize]);
+    // Track selection count changes for animation
+    useEffect(() => {
+        const currentCount = selectedKeys.size;
+        const prevCount = prevSelectionCountRef.current;
+        if (currentCount > prevCount) {
+            setSelectionAnimation('up');
+        }
+        else if (currentCount < prevCount) {
+            setSelectionAnimation('down');
+        }
+        prevSelectionCountRef.current = currentCount;
+        // Reset animation after it completes
+        const timer = setTimeout(() => {
+            setSelectionAnimation('none');
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [selectedKeys.size]);
+    // Process data (filter, sort, paginate)
+    const processedData = useMemo(() => {
+        if (resolvedRemote) {
+            // Server-side processing - data is already processed
+            return data;
+        }
+        let result = [...data];
+        // Filter
+        result = filterData(result, filters, columns, debouncedSearchValue);
+        // Sort
+        result = sortData(result, sort, columns);
+        // Paginate
+        if (pagination) {
+            result = paginateData(result, page, pageSize);
+        }
+        return result;
+    }, [
+        data,
+        filters,
+        sort,
+        page,
+        pageSize,
+        debouncedSearchValue,
+        resolvedRemote,
+        pagination,
+        columns,
+    ]);
+    // Calculate total for pagination
+    const calculatedTotal = useMemo(() => {
+        // If totalSize is explicitly provided, use it for server-side pagination
+        if (totalSize !== undefined && totalSize > 0)
+            return totalSize;
+        if (resolvedRemote)
+            return data.length;
+        return filterData(data, filters, columns, debouncedSearchValue).length;
+    }, [
+        data,
+        filters,
+        columns,
+        debouncedSearchValue,
+        resolvedRemote,
+        totalSize,
+    ]);
+    // Handle search
+    const handleSearchChange = useCallback((value) => {
+        setInternalSearchValue(value);
+        onSearch?.(value);
+        // Enable debounced onFilter callback with 'search' type
+        shouldCallOnFilter.current = true;
+        filterTypeRef.current = 'search';
+        onChange?.({ type: 'search', search: value });
+    }, [onSearch, onChange]);
+    // Handle sort
+    const handleSortClick = useCallback((column) => {
+        if (!column.sort)
+            return;
+        const newSort = handleSort(column.dataField, sort.order);
+        onSortChange?.(newSort);
+        onChange?.({ type: 'sort', sort: newSort });
+    }, [sort, handleSort, onSortChange, onChange]);
+    // Handle filter
+    const handleFilterChange = useCallback((field, value) => {
+        setFilter(field, value);
+        const newFilters = { ...filters, [field]: value };
+        onFilterChange?.(newFilters);
+        // Enable debounced onFilter callback with 'filter' type
+        shouldCallOnFilter.current = true;
+        filterTypeRef.current = 'filter';
+        onChange?.({ type: 'filter', filters: newFilters });
+    }, [filters, setFilter, onFilterChange, onChange]);
+    // Handle clear all filters
+    const handleClearFilters = useCallback(() => {
+        clearFilters();
+        setInternalSearchValue('');
+        onClearFilters?.();
+        clearAllFilter?.();
+        onFilterChange?.({});
+        onChange?.({ type: 'filter', filters: {} });
+        // Reset the tracking ref so subsequent filters can trigger onFilter
+        lastOnFilterCallRef.current = null;
+    }, [clearFilters, onClearFilters, onFilterChange, onChange]);
+    // Handle page change
+    const handlePageChange = useCallback((newPage) => {
+        goToPage(newPage);
+        // Pass 1-indexed page number to callbacks (user-friendly)
+        const displayPage = newPage + 1;
+        // onPageSizeChange is the primary callback
+        onPageSizeChange?.(displayPage, pageSize);
+        onPageChange?.(displayPage, pageSize);
+        onChange?.({
+            type: 'pagination',
+            pagination: { page: displayPage, pageSize },
+        });
+    }, [goToPage, pageSize, onPageSizeChange, onPageChange, onChange]);
+    // Handle page size change
+    const handlePageSizeChange = useCallback((newSize) => {
+        changePageSize(newSize);
+        // Pass 1-indexed page number to callbacks (page 1 after size change)
+        onPageSizeChange?.(1, newSize);
+        onPageChange?.(1, newSize);
+        onChange?.({
+            type: 'pagination',
+            pagination: { page: 1, pageSize: newSize },
+        });
+    }, [changePageSize, onPageSizeChange, onPageChange, onChange]);
+    // Handle row click
+    const handleRowClick = useCallback((row, rowIndex, e) => {
+        // Selection handling - only for 'single' mode (checkbox mode uses checkbox click only)
+        if (resolvedRowSelection?.mode === 'single') {
+            const result = toggleRow(row);
+            if (result) {
+                resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
+            }
+        }
+        // Expand by click
+        if (expandable?.expandRowByClick) {
+            const result = toggleExpand(row);
+            if (result) {
+                expandable.onExpandChange?.(result.expandedKeys, result.expanded, row);
+            }
+        }
+        onRowClick?.(row, rowIndex, e);
+    }, [rowSelection, expandable, toggleRow, toggleExpand, onRowClick]);
+    // Helper to check if cell is editable and get custom editor
+    const getCellEditableInfo = useCallback((column, row, rowIndex, colIndex) => {
+        // If editorRenderer is provided, column is editable by default (unless editable explicitly returns false)
+        const hasEditorRenderer = !!column.editorRenderer;
+        if (column.editable === undefined) {
+            // No editable prop - editable if has editorRenderer
+            return { isEditable: hasEditorRenderer };
+        }
+        if (column.editable === false) {
+            return { isEditable: false };
+        }
+        if (column.editable === true) {
+            return { isEditable: true };
+        }
+        // It's a function
+        const cellValue = getNestedValue(row, column.dataField);
+        const result = column.editable(cellValue, row, rowIndex, colIndex);
+        if (typeof result === 'boolean') {
+            return { isEditable: result };
+        }
+        // Result is a custom editor (ReactNode)
+        return { isEditable: true, customEditor: result };
+    }, []);
+    // Handle cell edit
+    const handleCellDoubleClick = useCallback((row, rowIndex, column, colIndex, e) => {
+        // Call column's onDoubleClick event if defined
+        column.events?.onDoubleClick?.(e, row, rowIndex, column, colIndex);
+        // Handle cell editing
+        if (editMode !== 'none') {
+            const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
+            if (isEditable && editMode === 'dblclick') {
+                setEditingCell({ row: rowIndex, field: column.dataField });
+                setEditValue(getNestedValue(row, column.dataField));
+            }
+        }
+        // Call row double click callback
+        onRowDoubleClick?.(row, rowIndex, e);
+    }, [editMode, onRowDoubleClick, getCellEditableInfo]);
+    const handleCellClick = useCallback((row, rowIndex, column, colIndex, e) => {
+        // Call column's onClick event if defined
+        if (e) {
+            column.events?.onClick?.(e, row, rowIndex, column, colIndex);
+        }
+        // Handle cell editing on click
+        if (editMode === 'click') {
+            const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
+            if (isEditable) {
+                setEditingCell({ row: rowIndex, field: column.dataField });
+                setEditValue(getNestedValue(row, column.dataField));
+            }
+        }
+    }, [editMode, getCellEditableInfo]);
+    const handleCellEditComplete = useCallback((row, rowIndex, column) => {
+        if (editingCell) {
+            // Validate
+            if (column.validator) {
+                const result = column.validator(editValue, row);
+                if (result !== true) {
+                    alert(typeof result === 'string' ? result : 'Invalid value');
+                    setEditingCell(null);
+                    return;
+                }
+            }
+            const rowId = row[keyField];
+            onCellEdit?.(editValue, column.dataField, row, rowIndex);
+            onUpdateItem?.(editValue, column.dataField, rowId);
+        }
+        setEditingCell(null);
+    }, [editingCell, editValue, onCellEdit, onUpdateItem, keyField]);
+    // Helper to get nested value from object
+    const getNestedValueLocal = (obj, path) => {
+        return path.split('.').reduce((acc, key) => acc?.[key], obj);
+    };
+    // Process field value based on fieldTypeConfig (matching reference implementation)
+    const processFieldValue = useCallback((value, dataField, row) => {
+        const configOrType = fieldTypeConfig?.[dataField];
+        // Handle both object config and string shorthand (e.g., 'boolean', 'date')
+        const config = typeof configOrType === 'string'
+            ? { type: configOrType }
+            : configOrType;
+        const fieldType = config?.type || 'string';
+        switch (fieldType) {
+            case 'array':
+                if (config?.fields && config.fields.length > 0) {
+                    // Array of objects with specific fields to extract
+                    if (!Array.isArray(value))
+                        return value || '';
+                    return value
+                        .slice(0, config.maxItems || value.length)
+                        .map((item) => {
+                        if (typeof item === 'object' && config.fields) {
+                            // Extract only specified fields from the object
+                            return config.fields
+                                .map((field) => item[field])
+                                .filter(Boolean)
+                                .join(', ');
+                        }
+                        else if (typeof item === 'string') {
+                            return item;
+                        }
+                        return '';
+                    })
+                        .filter(Boolean)
+                        .join(config.separator || '; ');
+                }
+                else {
+                    // Default array handling
+                    if (!Array.isArray(value))
+                        return value || '';
+                    return value
+                        .map((item) => typeof item === 'object' ? JSON.stringify(item) : item)
+                        .join('; ');
+                }
+            case 'object':
+                if (!value || typeof value !== 'object')
+                    return '';
+                const fields = config?.fields || config?.keys || [];
+                const labelMap = config?.labelMap || {};
+                if (fields.length > 0) {
+                    // Extract specific fields with optional label mapping
+                    return fields
+                        .map((field) => {
+                        const nestedValue = getNestedValueLocal(value, field);
+                        if (nestedValue !== undefined && nestedValue !== null) {
+                            const label = labelMap[field] || field;
+                            return `${label}: ${nestedValue}`;
+                        }
+                        return null;
+                    })
+                        .filter(Boolean)
+                        .join(', ');
+                }
+                else {
+                    // Default object handling
+                    return Object.entries(value)
+                        .map(([key, val]) => typeof val === 'boolean'
+                        ? `${key}: ${val ? 'Yes' : 'No'}`
+                        : `${key}: ${val}`)
+                        .join(', ');
+                }
+            case 'date':
+                if (!value)
+                    return '';
+                try {
+                    const date = new Date(value);
+                    const format = config?.dateFormat || 'YYYY-MM-DD HH:mm:ss';
+                    // Simple date formatting
+                    return date.toISOString().slice(0, 19).replace('T', ' ');
+                }
+                catch {
+                    return String(value);
+                }
+            case 'number':
+                return value !== undefined && value !== null
+                    ? String(Number(value))
+                    : '';
+            case 'boolean':
+                return typeof value === 'boolean' ? (value ? 'Yes' : 'No') : '';
+            case 'string':
+            case 'text':
+            default:
+                if (typeof value === 'boolean')
+                    return value ? 'Yes' : 'No';
+                return value !== undefined && value !== null ? String(value) : '';
+        }
+    }, [fieldTypeConfig]);
+    // Handle export
+    const handleExport = useCallback(async () => {
+        const exportData = resolvedRemote
+            ? data
+            : filterData(data, filters, columns, debouncedSearchValue);
+        // Filter columns based on hideExcelSheet array and csvExport !== false
+        let exportColumns = visibleColumns.filter((col) => col.csvExport !== false);
+        if (Array.isArray(hideExcelSheet)) {
+            exportColumns = exportColumns.filter((col) => !hideExcelSheet.includes(col.dataField));
+        }
+        // Also filter based on fieldTypeConfig hideFromExport or csvExport
+        if (fieldTypeConfig) {
+            exportColumns = exportColumns.filter((col) => {
+                const configOrType = fieldTypeConfig[col.dataField];
+                const config = typeof configOrType === 'string'
+                    ? { type: configOrType }
+                    : configOrType;
+                if (config?.hideFromExport)
+                    return false;
+                if (config?.csvExport === false)
+                    return false;
+                return true;
+            });
+        }
+        // Create enhanced columns with export formatters
+        const enhancedColumns = exportColumns.map((col) => {
+            const configOrType = fieldTypeConfig?.[col.dataField];
+            const config = typeof configOrType === 'string'
+                ? { type: configOrType }
+                : configOrType;
+            // If column already has csvFormatter, use it
+            if (col.csvFormatter) {
+                return col;
+            }
+            // If config has exportFormatter, use it
+            if (config?.exportFormatter) {
+                return { ...col, csvFormatter: config.exportFormatter };
+            }
+            // If config has type, create formatter based on type
+            if (config?.type) {
+                return {
+                    ...col,
+                    csvFormatter: (cell, row) => processFieldValue(cell, col.dataField, row),
+                };
+            }
+            return col;
+        });
+        // Export based on format
+        if (exportFormat === 'excel') {
+            await exportToExcel(exportData, enhancedColumns, resolvedExportFileName);
+        }
+        else {
+            exportToCSV(exportData, enhancedColumns, resolvedExportFileName);
+        }
+    }, [
+        data,
+        filters,
+        columns,
+        debouncedSearchValue,
+        visibleColumns,
+        hideExcelSheet,
+        fieldTypeConfig,
+        processFieldValue,
+        resolvedExportFileName,
+        resolvedRemote,
+        exportFormat,
+    ]);
+    // Handle checkbox change
+    const handleCheckboxChange = useCallback((row, e) => {
+        e.stopPropagation();
+        const result = toggleRow(row);
+        if (result) {
+            resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
+        }
+    }, [toggleRow, rowSelection]);
+    // Handle select all
+    const handleSelectAllChange = useCallback(() => {
+        const result = toggleAll(!isAllSelected);
+        if (result) {
+            resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
+        }
+    }, [toggleAll, isAllSelected, resolvedRowSelection]);
+    // Handle expand toggle
+    const handleExpandClick = useCallback((row, e) => {
+        e.stopPropagation();
+        const result = toggleExpand(row);
+        expandable?.onExpandChange?.(result.expandedKeys, result.expanded, row);
+    }, [toggleExpand, expandable]);
+    // Filtered column list for toggle panel
+    const filteredToggleColumns = useMemo(() => {
+        return columns.filter((c) => c.dataField !== keyField &&
+            c.text.toLowerCase().includes(columnSearch.toLowerCase()));
+    }, [columns, keyField, columnSearch]);
+    // Get row key
+    const getRowKey = useCallback((row) => row[keyField], [keyField]);
+    // Render cell content
+    const renderCellContent = useCallback((row, column, rowIndex, colIndex) => {
+        const value = getNestedValue(row, column.dataField);
+        const isEditing = editingCell?.row === rowIndex &&
+            editingCell?.field === column.dataField;
+        if (isEditing) {
+            // Check for custom editorRenderer
+            if (column.editorRenderer) {
+                const rowId = row[keyField];
+                const editorProps = {
+                    value: editValue,
+                    onUpdate: (newValue) => {
+                        setEditValue(newValue);
+                        // Call onUpdateItem directly for custom editors
+                        onUpdateItem?.(newValue, column.dataField, rowId);
+                        setEditingCell(null);
+                    },
+                    onCancel: () => setEditingCell(null),
+                    onBlur: () => {
+                        // Only complete if value changed
+                        if (editValue !== value) {
+                            onUpdateItem?.(editValue, column.dataField, rowId);
+                        }
+                        setEditingCell(null);
+                    },
+                    row,
+                    column,
+                    rowIndex,
+                    columnIndex: colIndex,
+                    // Additional helpers for direct update
+                    rowId,
+                    dataField: column.dataField,
+                    onUpdateItem: (newValue) => {
+                        onUpdateItem?.(newValue, column.dataField, rowId);
+                        setEditingCell(null);
+                    },
+                };
+                return column.editorRenderer(editorProps, editValue, row, column, rowIndex, colIndex);
+            }
+            // Default editor
+            return (_jsx(CellEditor, { type: column.editorType === 'number' ? 'number' : 'text', value: editValue ?? '', onChange: (e) => setEditValue(e.target.value), onBlur: () => handleCellEditComplete(row, rowIndex, column), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        handleCellEditComplete(row, rowIndex, column);
+                    }
+                    if (e.key === 'Escape') {
+                        setEditingCell(null);
+                    }
+                }, className: column.editorClasses, style: column.editorStyle, autoFocus: true }));
+        }
+        if (column.formatter) {
+            return column.formatter(value, row, rowIndex, colIndex);
+        }
+        if (value === null || value === undefined)
+            return '';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return String(value);
+    }, [editingCell, editValue, handleCellEditComplete]);
+    // Render toolbar
+    const renderToolbar = () => {
+        if (hideToolbar)
+            return null;
+        if (typeof toolbar === 'function') {
+            return toolbar({
+                searchValue,
+                onSearch: handleSearchChange,
+                onClearFilters: handleClearFilters,
+                onExport: handleExport,
+            });
+        }
+        if (toolbar)
+            return toolbar;
+        const hasFilters = Object.keys(filters).length > 0 || searchValue;
+        return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onFocus: () => {
+                                        // Clear column filter focus when global search is focused
+                                        focusedFilterFieldRef.current = null;
+                                    }, placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), exportFormat === 'excel' ? 'Export Excel' : 'Export CSV'] })), showFilterToggle && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
+                                                        borderBottom: '1px solid #e5e7eb',
+                                                        paddingBottom: 8,
+                                                        marginBottom: 4,
+                                                    }, children: [_jsx("input", { type: "checkbox", checked: filteredToggleColumns.length > 0 &&
+                                                                filteredToggleColumns.every((col) => !isColumnHidden(col.dataField)), onChange: (e) => {
+                                                                filteredToggleColumns.forEach((col) => {
+                                                                    if (e.target.checked) {
+                                                                        if (isColumnHidden(col.dataField)) {
+                                                                            toggleColumn(col.dataField);
+                                                                        }
+                                                                    }
+                                                                    else {
+                                                                        if (!isColumnHidden(col.dataField)) {
+                                                                            toggleColumn(col.dataField);
+                                                                        }
+                                                                    }
+                                                                });
+                                                            } }), _jsx("span", { style: { fontWeight: 600 }, children: "Select All" })] }), filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
+                                                        if (!reorderable)
+                                                            return;
+                                                        setToggleDraggingColumn(column.dataField);
+                                                        e.dataTransfer.effectAllowed = 'move';
+                                                        e.dataTransfer.setData('text/plain', column.dataField);
+                                                    }, onDragEnd: () => {
+                                                        setToggleDraggingColumn(null);
+                                                        setToggleDragOverColumn(null);
+                                                    }, onDragOver: (e) => {
+                                                        if (!reorderable)
+                                                            return;
+                                                        e.preventDefault();
+                                                        if (toggleDraggingColumn &&
+                                                            toggleDraggingColumn !== column.dataField) {
+                                                            setToggleDragOverColumn(column.dataField);
+                                                        }
+                                                    }, onDragLeave: () => {
+                                                        setToggleDragOverColumn(null);
+                                                    }, onDrop: (e) => {
+                                                        if (!reorderable)
+                                                            return;
+                                                        e.preventDefault();
+                                                        const draggedField = e.dataTransfer.getData('text/plain');
+                                                        if (draggedField &&
+                                                            draggedField !== column.dataField) {
+                                                            // Find indices
+                                                            const fromIdx = reorderedColumns.findIndex((c) => c.dataField === draggedField);
+                                                            const toIdx = reorderedColumns.findIndex((c) => c.dataField === column.dataField);
+                                                            if (fromIdx !== -1 && toIdx !== -1) {
+                                                                // Reorder columns
+                                                                const newColumns = [...reorderedColumns];
+                                                                const [removed] = newColumns.splice(fromIdx, 1);
+                                                                newColumns.splice(toIdx, 0, removed);
+                                                                // Update local state
+                                                                setReorderedColumns(newColumns);
+                                                                // Call reorder callback
+                                                                reorderConfig?.onReorder?.(newColumns, fromIdx, toIdx);
+                                                            }
+                                                        }
+                                                        setToggleDraggingColumn(null);
+                                                        setToggleDragOverColumn(null);
+                                                    }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
+                                                    if (!reorderable)
+                                                        return;
+                                                    setToggleDraggingColumn(column.dataField);
+                                                    e.dataTransfer.effectAllowed = 'move';
+                                                    e.dataTransfer.setData('text/plain', column.dataField);
+                                                }, onDragEnd: () => {
+                                                    setToggleDraggingColumn(null);
+                                                    setToggleDragOverColumn(null);
+                                                }, onDragOver: (e) => {
+                                                    if (!reorderable)
+                                                        return;
+                                                    e.preventDefault();
+                                                    if (toggleDraggingColumn &&
+                                                        toggleDraggingColumn !== column.dataField) {
+                                                        setToggleDragOverColumn(column.dataField);
+                                                    }
+                                                }, onDragLeave: () => {
+                                                    setToggleDragOverColumn(null);
+                                                }, onDrop: (e) => {
+                                                    if (!reorderable)
+                                                        return;
+                                                    e.preventDefault();
+                                                    const draggedField = e.dataTransfer.getData('text/plain');
+                                                    if (draggedField &&
+                                                        draggedField !== column.dataField) {
+                                                        const fromIdx = reorderedColumns.findIndex((c) => c.dataField === draggedField);
+                                                        const toIdx = reorderedColumns.findIndex((c) => c.dataField === column.dataField);
+                                                        if (fromIdx !== -1 && toIdx !== -1) {
+                                                            const newColumns = [...reorderedColumns];
+                                                            const [removed] = newColumns.splice(fromIdx, 1);
+                                                            newColumns.splice(toIdx, 0, removed);
+                                                            // Update local state
+                                                            setReorderedColumns(newColumns);
+                                                            reorderConfig?.onReorder?.(newColumns, fromIdx, toIdx);
+                                                        }
+                                                    }
+                                                    setToggleDraggingColumn(null);
+                                                    setToggleDragOverColumn(null);
+                                                }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField))) })] }))] })), toolbarRight] })] }));
+    };
+    // Render pagination
+    const renderPagination = () => {
+        if (!pagination)
+            return null;
+        const actualTotalPages = Math.ceil(calculatedTotal / pageSize) || 1;
+        const startItem = calculatedTotal > 0 ? page * pageSize + 1 : 0;
+        // Use actual data length for endItem to show correct count
+        const actualDataCount = resolvedRemote
+            ? data.length
+            : processedData.length;
+        const endItem = Math.min(page * pageSize + actualDataCount, calculatedTotal);
+        const showTotal = resolvedPaginationConfig?.showTotal === true
+            ? `Showing ${startItem} to ${endItem} of ${calculatedTotal} Results`
+            : typeof resolvedPaginationConfig?.showTotal === 'function'
+                ? resolvedPaginationConfig.showTotal(calculatedTotal, [
+                    startItem,
+                    endItem,
+                ])
+                : null;
+        // Generate page numbers
+        const getPageNumbers = () => {
+            const pages = [];
+            const maxVisible = 5;
+            if (actualTotalPages <= maxVisible) {
+                for (let i = 0; i < actualTotalPages; i++)
+                    pages.push(i);
+            }
+            else {
+                if (page < 3) {
+                    for (let i = 0; i < 4; i++)
+                        pages.push(i);
+                    pages.push('...');
+                    pages.push(actualTotalPages - 1);
+                }
+                else if (page > actualTotalPages - 4) {
+                    pages.push(0);
+                    pages.push('...');
+                    for (let i = actualTotalPages - 4; i < actualTotalPages; i++)
+                        pages.push(i);
+                }
+                else {
+                    pages.push(0);
+                    pages.push('...');
+                    for (let i = page - 1; i <= page + 1; i++)
+                        pages.push(i);
+                    pages.push('...');
+                    pages.push(actualTotalPages - 1);
+                }
+            }
+            return pages;
+        };
+        return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [(resolvedRowSelection?.mode === 'checkbox' || isSelectRow) &&
+                            selectedKeys.size > 0 && (_jsxs(SelectionIndicator, { onClick: () => {
+                                const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
+                                resolvedRowSelection?.onChange?.(Array.from(selectedKeys), selectedRows);
+                                // Call onSelectedRow only when user clicks this button
+                                onSelectedRow?.(selectedRows);
+                            }, children: [_jsx(SelectionCount, { "$animate": selectionAnimation, children: selectedKeys.size }, selectedKeys.size), _jsx("span", { children: "Selected" })] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsx(PageSizeSelect, { value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx("option", { value: size, children: size }, size))) }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: () => handlePageChange(0), disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(page - 1), disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: () => handlePageChange(page + 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(actualTotalPages - 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper &&
+                    (() => {
+                        const handleQuickJump = (input) => {
+                            const pageNum = parseInt(input.value, 10);
+                            if (!isNaN(pageNum) &&
+                                pageNum >= 1 &&
+                                pageNum <= actualTotalPages) {
+                                handlePageChange(pageNum - 1); // Convert to 0-indexed
+                                input.value = '';
+                                return true;
+                            }
+                            return false;
+                        };
+                        return (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: `1-${actualTotalPages}`, onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            const target = e.target;
+                                            if (handleQuickJump(target)) {
+                                                target.blur();
+                                            }
+                                        }
+                                    }, onBlur: (e) => {
+                                        const target = e.target;
+                                        handleQuickJump(target);
+                                    } }), _jsx(PageButton, { onClick: () => {
+                                        const input = document.querySelector(`#${id} input[type="number"]`);
+                                        if (input) {
+                                            handleQuickJump(input);
+                                            input.blur();
+                                        }
+                                    }, style: { marginLeft: '4px', padding: '2px 8px' }, children: "Go" })] }));
+                    })()] }));
+    };
+    // Check if any columns have filters
+    const hasFilterableColumns = filterable ||
+        columns.some((c) => typeof c.filter === 'function' ||
+            c.filterComponent ||
+            c.filter === true);
+    // Should show filter row - check if there are filterable columns AND filters are visible
+    const shouldShowFilterRow = hasFilterableColumns && showFilterRow;
+    return (_jsxs(TableRoot, { ref: (node) => {
+            // Handle forwarded ref
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            // Also store in our container ref
+            tableContainerRef.current = node;
+        }, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
+                                                if (el)
+                                                    el.indeterminate = isIndeterminate;
+                                            }, onChange: handleSelectAllChange })) })), expandable && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": expandable.columnWidth || 40 })), showRowNumber && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowNumberWidth, children: rowNumberTitle })), renderColumns.map((column, colIndex) => {
+                                        // Determine if column has a filter
+                                        const hasColumnFilter = typeof column.filter === 'function' ||
+                                            column.filter === true ||
+                                            column.filterComponent ||
+                                            column.filterRenderer;
+                                        // Get the filter component
+                                        const FilterComponent = hasColumnFilter
+                                            ? (typeof column.filter === 'function'
+                                                ? column.filter
+                                                : null) ||
+                                                column.filterComponent ||
+                                                getFilterComponent(column.filterType || 'text')
+                                            : null;
+                                        const onFilter = (value) => handleFilterChange(column.dataField, value);
+                                        // Get resized column style
+                                        const resizeStyle = resizable
+                                            ? getColumnStyle(column, columnWidths, resizable, isResizing)
+                                            : {};
+                                        // Render header cell with resize handle
+                                        // Note: Using callback ref pattern for resize functionality
+                                        const headerCellRef = (node) => {
+                                            if (node && resizable) {
+                                                // Store ref for resize handle
+                                                const refObj = {
+                                                    current: node,
+                                                };
+                                                // Attach resize handle via DOM if needed
+                                            }
+                                        };
+                                        return (_jsxs(HeaderCell, { ref: headerCellRef, "$align": column.headerAlign || column.align || 'left', "$sortable": !!column.sort, "$compact": compact, "$width": resizable && columnWidths[column.dataField]
+                                                ? columnWidths[column.dataField]
+                                                : column.width, "$minWidth": column.minWidth, "$pinned": column.pinned, "$customClass": !!column.headerClasses, className: [column.headerClasses, classNames.headerCell]
+                                                .filter(Boolean)
+                                                .join(' '), style: {
+                                                ...(typeof column.headerStyle === 'function'
+                                                    ? column.headerStyle(column)
+                                                    : column.headerStyle || styles.headerCell),
+                                                ...resizeStyle,
+                                                position: 'relative',
+                                            }, role: "columnheader", "aria-sort": sort.field === column.dataField
+                                                ? sort.order === 'asc'
+                                                    ? 'ascending'
+                                                    : sort.order === 'desc'
+                                                        ? 'descending'
+                                                        : 'none'
+                                                : undefined, "data-column": column.dataField, children: [(() => {
+                                                    // Check visibility props (default to true if not specified)
+                                                    const headerStyleObj = typeof column.headerStyle === 'function'
+                                                        ? column.headerStyle(column)
+                                                        : column.headerStyle;
+                                                    // isHeaderTitle: show title (default true, false to hide)
+                                                    const showTitle = column.isHeaderTitle !== false &&
+                                                        column.hideHeaderText !== true &&
+                                                        !(headerStyleObj && headerStyleObj.fontSize === 0);
+                                                    // isHeaderFilterComp: show filter (default true)
+                                                    const showFilter = column.isHeaderFilterComp !== false &&
+                                                        shouldShowFilterRow &&
+                                                        hasColumnFilter &&
+                                                        FilterComponent;
+                                                    // isHeaderSort: show sort icon (default true)
+                                                    const showSort = column.isHeaderSort !== false && column.sort;
+                                                    // If no filter, show title and sort on single line
+                                                    if (!showFilter) {
+                                                        return (_jsxs("div", { style: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: column.headerAlign || column.align || 'left',
+                                                                gap: 6,
+                                                                width: '100%',
+                                                                cursor: showSort ? 'pointer' : 'default',
+                                                                paddingRight: resizable ? 12 : 0,
+                                                                position: 'relative',
+                                                                zIndex: 2, // Above resize handle
+                                                            }, onClick: () => showSort && handleSortClick(column), children: [showTitle && (_jsx("span", { style: {
+                                                                        color: 'white',
+                                                                        fontWeight: 600,
+                                                                        fontSize: 12,
+                                                                        whiteSpace: 'nowrap',
+                                                                        flex: 1,
+                                                                    }, children: column.headerFormatter
+                                                                        ? column.headerFormatter(column, colIndex)
+                                                                        : column.headerText || column.text })), showSort && (_jsx("div", { style: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        justifyContent: 'center',
+                                                                        flexShrink: 0,
+                                                                        minWidth: 40,
+                                                                        minHeight: 24,
+                                                                        position: 'relative',
+                                                                        overflow: 'visible',
+                                                                    }, title: `Sort by ${column.text}`, children: column.sortCaret ? (column.sortCaret(sort.field === column.dataField
+                                                                        ? sort.order
+                                                                        : null, column)) : (_jsx(DefaultSortCaret, { order: sort.field === column.dataField
+                                                                            ? sort.order
+                                                                            : null, column: column })) }))] }));
+                                                    }
+                                                    // With filter: layout with filter + sort
+                                                    return (_jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            gap: showTitle ? 4 : 0,
+                                                            width: '100%',
+                                                            paddingRight: resizable ? 12 : 0,
+                                                            position: 'relative',
+                                                            zIndex: 2, // Above resize handle
+                                                        }, children: [showTitle && (_jsx("div", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'space-between',
+                                                                    gap: 4,
+                                                                }, children: _jsx("span", { style: {
+                                                                        color: 'white',
+                                                                        fontWeight: 600,
+                                                                        fontSize: 12,
+                                                                        whiteSpace: 'nowrap',
+                                                                        cursor: showSort ? 'pointer' : 'default',
+                                                                        flex: 1,
+                                                                    }, onClick: () => showSort && handleSortClick(column), children: column.headerFormatter
+                                                                        ? column.headerFormatter(column, colIndex)
+                                                                        : column.headerText || column.text }) })), _jsxs("div", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'flex-start',
+                                                                    gap: 4,
+                                                                    width: '100%',
+                                                                    minHeight: 24,
+                                                                }, children: [_jsx("div", { style: {
+                                                                            flex: showSort ? '0 1 auto' : 1,
+                                                                            width: showSort
+                                                                                ? 'calc(100% - 48px)'
+                                                                                : '100%',
+                                                                            minWidth: 0,
+                                                                            maxWidth: showSort
+                                                                                ? 'calc(100% - 48px)'
+                                                                                : '100%',
+                                                                            display: 'flex',
+                                                                            alignItems: 'center',
+                                                                            overflow: 'hidden',
+                                                                        }, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx("div", { onFocusCapture: () => {
+                                                                                focusedFilterFieldRef.current =
+                                                                                    column.dataField;
+                                                                            }, "data-filter-wrapper": column.dataField, style: { width: '100%' }, children: _jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
+                                                                            minWidth: 40,
+                                                                            minHeight: 24,
+                                                                            display: 'flex',
+                                                                            alignItems: 'center',
+                                                                            justifyContent: 'center',
+                                                                            flexShrink: 0,
+                                                                            flexGrow: 0,
+                                                                            cursor: 'pointer',
+                                                                            marginLeft: 'auto',
+                                                                            position: 'relative',
+                                                                            overflow: 'visible',
+                                                                        }, onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            handleSortClick(column);
+                                                                        }, title: `Sort by ${column.text}`, children: column.sortCaret ? (column.sortCaret(sort.field === column.dataField
+                                                                            ? sort.order
+                                                                            : null, column)) : (_jsx(DefaultSortCaret, { order: sort.field === column.dataField
+                                                                                ? sort.order
+                                                                                : null, column: column })) }))] })] }));
+                                                })(), resizable && (_jsx("div", { style: {
+                                                        position: 'absolute',
+                                                        top: 0,
+                                                        right: 0,
+                                                        bottom: 0,
+                                                        width: 6,
+                                                        cursor: 'col-resize',
+                                                        zIndex: 1,
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                    }, onMouseDown: (e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        const cell = e.currentTarget
+                                                            .parentElement;
+                                                        if (cell) {
+                                                            const startX = e.clientX;
+                                                            const startWidth = cell.offsetWidth;
+                                                            const dataField = column.dataField;
+                                                            const handleMouseMove = (moveEvent) => {
+                                                                const deltaX = moveEvent.clientX - startX;
+                                                                const newWidth = Math.max(50, Math.min(800, startWidth + deltaX));
+                                                                // Update via CSS for smooth resize
+                                                                cell.style.width = `${newWidth}px`;
+                                                                cell.style.minWidth = `${newWidth}px`;
+                                                                cell.style.maxWidth = `${newWidth}px`;
+                                                                // Update body cells too
+                                                                document
+                                                                    .querySelectorAll(`[data-column="${dataField}"]`)
+                                                                    .forEach((el) => {
+                                                                    el.style.width =
+                                                                        `${newWidth}px`;
+                                                                    el.style.minWidth =
+                                                                        `${newWidth}px`;
+                                                                    el.style.maxWidth =
+                                                                        `${newWidth}px`;
+                                                                });
+                                                            };
+                                                            const handleMouseUp = () => {
+                                                                document.removeEventListener('mousemove', handleMouseMove);
+                                                                document.removeEventListener('mouseup', handleMouseUp);
+                                                                document.body.style.cursor = '';
+                                                                document.body.style.userSelect = '';
+                                                                // Trigger resize callback
+                                                                const finalWidth = cell.offsetWidth;
+                                                                resizeConfig?.onResizeEnd?.(dataField, finalWidth);
+                                                            };
+                                                            document.addEventListener('mousemove', handleMouseMove);
+                                                            document.addEventListener('mouseup', handleMouseUp);
+                                                            document.body.style.cursor = 'col-resize';
+                                                            document.body.style.userSelect = 'none';
+                                                            resizeConfig?.onResizeStart?.(dataField, startWidth);
+                                                        }
+                                                    }, children: _jsx("div", { style: {
+                                                            width: 3,
+                                                            height: '60%',
+                                                            background: 'rgba(255,255,255,0.3)',
+                                                            borderRadius: 2,
+                                                            transition: 'background 0.2s',
+                                                        }, onMouseEnter: (e) => {
+                                                            e.currentTarget.style.background =
+                                                                resizeConfig?.handleHoverColor || '#3b82f6';
+                                                        }, onMouseLeave: (e) => {
+                                                            e.currentTarget.style.background = 'rgba(255,255,255,0.3)';
+                                                        } }) }))] }, column.dataField));
+                                    })] }) }), _jsx(TableBody, { className: classNames.body, style: styles.body, children: processedData.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length +
+                                        (resolvedRowSelection?.mode === 'checkbox' ? 1 : 0) +
+                                        (expandable ? 1 : 0) +
+                                        (showRowNumber ? 1 : 0), children: _jsxs(EmptyState, { className: classNames.empty, style: styles.empty, children: [_jsx(EmptyIcon, {}), _jsx("span", { children: emptyText })] }) }) })) : (processedData.map((row, rowIndex) => {
+                                const rowKey = getRowKey(row);
+                                const rowSelected = isSelected(rowKey);
+                                const rowExpanded = isExpanded(rowKey);
+                                const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
+                                const isExpandable = expandable?.rowExpandable?.(row) ?? true;
+                                const rowClass = typeof rowClassName === 'function'
+                                    ? rowClassName(row, rowIndex)
+                                    : rowClassName;
+                                const rowStyles = typeof rowStyle === 'function'
+                                    ? rowStyle(row, rowIndex)
+                                    : rowStyle;
+                                const selectedStyle = rowSelected
+                                    ? typeof resolvedRowSelection?.selectedRowStyle ===
+                                        'function'
+                                        ? resolvedRowSelection.selectedRowStyle(row)
+                                        : resolvedRowSelection?.selectedRowStyle
+                                    : undefined;
+                                // Check if custom selected style has a background color
+                                const hasCustomBgColor = rowSelected &&
+                                    selectedStyle &&
+                                    (selectedStyle.backgroundColor || selectedStyle.background);
+                                // Apply non-selectable style if row is disabled
+                                const disabledStyle = checkboxProps?.disabled
+                                    ? nonSelectableStyle || {
+                                        backgroundColor: '#f3f4f6',
+                                        opacity: 0.7,
+                                    }
+                                    : undefined;
+                                return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$selected": rowSelected, "$clickable": !!onRowClick ||
+                                                resolvedRowSelection?.mode === 'single' ||
+                                                expandable?.expandRowByClick === true, "$disabled": !!checkboxProps?.disabled, "$hasCustomSelectedStyle": !!hasCustomBgColor, "data-custom-selected": hasCustomBgColor ? 'true' : undefined, className: `${classNames.row || ''} ${rowClass || ''} ${rowSelected
+                                                ? typeof resolvedRowSelection?.selectedRowClassName ===
+                                                    'function'
+                                                    ? resolvedRowSelection.selectedRowClassName(row)
+                                                    : resolvedRowSelection?.selectedRowClassName || ''
+                                                : ''}`, style: {
+                                                ...styles.row,
+                                                ...rowStyles,
+                                                ...selectedStyle,
+                                                ...disabledStyle,
+                                            }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => {
+                                                // Only trigger row-level double click if not handled by a cell
+                                                // Cells handle their own double-clicks for editing
+                                                onRowDoubleClick?.(row, rowIndex, e);
+                                            }, role: "row", "aria-selected": rowSelected, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
+                                                            expanded: rowExpanded,
+                                                            row,
+                                                            onExpand: () => toggleExpand(row),
+                                                        })) : (_jsx(ExpandIcon, {})) })) })), showRowNumber && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, style: {
+                                                        width: rowNumberWidth,
+                                                        color: '#6b7280',
+                                                        fontWeight: 500,
+                                                    }, children: rowNumberRender
+                                                        ? rowNumberRender(rowIndex + 1, row)
+                                                        : rowIndex + 1 + page * pageSize })), renderColumns.map((column, colIndex) => {
+                                                    const cellClass = typeof column.classes === 'function'
+                                                        ? column.classes(getNestedValue(row, column.dataField), row, rowIndex, colIndex)
+                                                        : column.classes;
+                                                    const cellStyle = typeof column.style === 'function'
+                                                        ? column.style(getNestedValue(row, column.dataField), row, rowIndex, colIndex)
+                                                        : column.style;
+                                                    // Get resized column style for body cells
+                                                    const cellResizeStyle = resizable
+                                                        ? getColumnStyle(column, columnWidths, resizable, isResizing)
+                                                        : {};
+                                                    return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, "$hasCustomClass": !!cellClass, className: cellClass || classNames.cell, style: {
+                                                            ...styles.cell,
+                                                            ...cellStyle,
+                                                            ...cellResizeStyle,
+                                                        }, "data-column": column.dataField, onClick: (e) => handleCellClick(row, rowIndex, column, colIndex, e), onDoubleClick: (e) => {
+                                                            e.stopPropagation(); // Prevent row-level double-click from interfering
+                                                            handleCellDoubleClick(row, rowIndex, column, colIndex, e);
+                                                        }, role: "gridcell", children: (() => {
+                                                            const editInfo = getCellEditableInfo(column, row, rowIndex, colIndex);
+                                                            if (editInfo.isEditable &&
+                                                                editMode !== 'none') {
+                                                                // Check for custom editor
+                                                                if (editInfo.customEditor) {
+                                                                    return editInfo.customEditor;
+                                                                }
+                                                                return (_jsx(EditableCell, { "$editing": editingCell?.row === rowIndex &&
+                                                                        editingCell?.field === column.dataField, "$showEditIcon": showEditIcon, children: renderCellContent(row, column, rowIndex, colIndex) }));
+                                                            }
+                                                            return renderCellContent(row, column, rowIndex, colIndex);
+                                                        })() }, column.dataField));
+                                                })] }), expandable && rowExpanded && isExpandable && (_jsx(ExpandedRow, { children: _jsx(ExpandedCell, { colSpan: visibleColumns.length +
+                                                    (resolvedRowSelection?.mode === 'checkbox'
+                                                        ? 1
+                                                        : 0) +
+                                                    (expandable ? 1 : 0) +
+                                                    (showRowNumber ? 1 : 0), children: expandable.expandedRowRender?.(row, rowIndex, rowExpanded) }) }))] }, rowKey));
+                            })) }), showFooter && (_jsx(TableFooter, { className: classNames.footer, style: styles.footer, children: _jsxs(FooterRow, { className: classNames.footerRow, style: styles.footerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), expandable && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), showRowNumber && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), renderColumns.map((column) => (_jsx(FooterCell, { "$align": column.align || 'left', "$compact": compact, className: classNames.footerCell, style: styles.footerCell, children: typeof column.footer === 'function'
+                                            ? column.footer(column, data)
+                                            : column.footerFormatter
+                                                ? column.footerFormatter(column, data)
+                                                : column.footer }, column.dataField)))] }) }))] }) }), renderPagination()] }));
+});
+Table.displayName = 'Table';
+export default Table;