@ehfuse/mui-virtual-data-table 1.1.19 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +2 -2
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -18,7 +18,7 @@ import{forwardRef as Xe,useCallback as Ce,useMemo as rt,useRef as se,useEffect a
|
|
|
18
18
|
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
19
19
|
outline-offset: -2px;
|
|
20
20
|
}
|
|
21
|
-
`,document.head.appendChild(l),()=>{let c=document.getElementById(r);c&&c.remove()}},[]),ct("div",{ref:ce,className:`overlay-scrollbar-wrapper ${a}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...p},children:[De("div",{ref:s,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:Le,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:xe?"none":"auto",...f},children:De("div",{ref:_,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...y},children:k})}),W&&He&&ct("div",{ref:ue,className:"overlay-scrollbar-track",onMouseEnter:()=>{t(),Se.current=setTimeout(()=>{M(!0),Se.current=null},100)},onMouseLeave:()=>{n(),I||u(g.delay)},style:{position:"absolute",top:0,right:0,width:`${le}px`,height:"100%",opacity:G?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[m.visible&&De("div",{className:"overlay-scrollbar-track-background",onClick:r=>{r.preventDefault(),r.stopPropagation(),Ne(r)},style:{position:"absolute",top:N?`${O.width+m.margin*2}px`:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-O.width)/2}px`,width:`${O.width}px`,height:N?`calc(100% - ${O.width*2+m.margin*4}px)`:`calc(100% - ${m.margin*2}px)`,backgroundColor:m.color,borderRadius:`${m.radius}px`,cursor:"pointer"}}),De("div",{ref:de,className:"overlay-scrollbar-thumb",onMouseDown:e,onMouseEnter:()=>Te(!0),onMouseLeave:()=>Te(!1),style:{position:"absolute",top:`${(N?T+m.margin*2:m.margin)+Ze}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${Math.max(ne,Fe)}px`,backgroundColor:te||I?O.hoverColor:O.color,opacity:te||I?O.hoverOpacity:O.opacity,borderRadius:`${O.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),W&&He&&N&&De("div",{className:"overlay-scrollbar-up-arrow",onClick:Q,onMouseEnter:()=>fe("up"),onMouseLeave:()=>fe(null),style:{position:"absolute",top:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${T}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(T*.75,8)}px`,color:ye==="up"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:G?ye==="up"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),W&&He&&N&&De("div",{className:"overlay-scrollbar-down-arrow",onClick:Pe,onMouseEnter:()=>fe("down"),onMouseLeave:()=>fe(null),style:{position:"absolute",bottom:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${T}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(T*.75,8)}px`,color:ye==="down"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:G?ye==="down"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),ut=Lt;import{Fragment as Ke,jsx as d,jsxs as Re}from"react/jsx-runtime";var Pt={alignment:"right",margin:0,radius:0},dt=5;function At({data:a,loading:p=!1,columns:f,onRowClick:y,getRowId:k,selectedRowId:E,selectedRowSx:w,rowHeight:C=50,columnHeight:R=56,striped:z,rowDivider:X=!0,onSort:W,onLoadMore:K,sortBy:H,sortDirection:Y,showPaper:ce=!0,paddingX:s="1rem",paddingTop:_=0,paddingBottom:ue=0,rowHoverColor:de,rowHoverOpacity:A,viewportBuffer:G,overscan:M,scrollbars:I,emptyMessage:ee="NO DATA",LoadingComponent:te,showFooter:Te,footerHeight:pe,footerSx:re}){let ne=Math.max(C*12,480),Ue=Math.max(C*12,480),Ze=typeof G=="number"?G:G?.top??ne,qe=typeof G=="number"?G:G?.bottom??Ue,He=Math.max(C*8,420),je=Math.max(C*10,520),xe=typeof M=="number"?M:{main:M?.main??He,reverse:M?.reverse??je},Ie=C+(X?1:0),Oe=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[v]=nt(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),h=se({wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}),ze=Ce(t=>{if(!v)return;let n=h.current;if(!(n.wheelEvents>0||n.rangeChangedCalls>0||n.rowContentCalls>0||n.cellRenderCalls>0))return;let u=n.rowContentCalls>0?n.rowContentMs/n.rowContentCalls:0,i=n.cellRenderCalls>0?n.cellRenderMs/n.cellRenderCalls:0;console.log("[VDT perf]",{reason:t,wheel:{events:n.wheelEvents,inputPx:Math.round(n.wheelInputPx),handlerMs:Number(n.wheelHandlerMs.toFixed(2)),rafFlushes:n.wheelRafFlushes,rafMs:Number(n.wheelRafMs.toFixed(2))},rangeChanged:{calls:n.rangeChangedCalls,totalMs:Number(n.rangeChangedMs.toFixed(2))},rowContent:{calls:n.rowContentCalls,totalMs:Number(n.rowContentMs.toFixed(2)),avgMs:Number(u.toFixed(3)),maxMs:Number(n.rowContentMaxMs.toFixed(3))},cellRender:{calls:n.cellRenderCalls,totalMs:Number(n.cellRenderMs.toFixed(2)),avgMs:Number(i.toFixed(3)),maxMs:Number(n.cellRenderMaxMs.toFixed(3))}}),h.current={wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}},[v]);ge(()=>{if(!v||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let t=window.setInterval(()=>{ze("interval")},1500);return()=>{window.clearInterval(t),ze("cleanup")}},[ze,v]);let ye=rt(()=>Xe((t,n)=>{let L=se(null),u=se(0),i=se(null);return ge(()=>{let e=L.current;if(!e)return;let P=q=>{let Ne=v?performance.now():0;q.preventDefault();let Q=q.deltaY;q.deltaMode===1?Q*=40:q.deltaMode===2&&(Q*=e.clientHeight),v&&(h.current.wheelEvents+=1,h.current.wheelInputPx+=Q),u.current+=Q,i.current===null&&(i.current=requestAnimationFrame(()=>{let Pe=v?performance.now():0,Le=Math.max(e.clientHeight*.4,160),D=Math.max(-Le,Math.min(Le,u.current));u.current=0,i.current=null,D!==0&&(e.scrollTop+=D),v&&(h.current.wheelRafFlushes+=1,h.current.wheelRafMs+=performance.now()-Pe)}),v&&(h.current.wheelHandlerMs+=performance.now()-Ne))};return e.addEventListener("wheel",P,{passive:!1}),()=>{e.removeEventListener("wheel",P),i.current!==null&&(cancelAnimationFrame(i.current),i.current=null),u.current=0}},[]),d(ut,{detectInnerScroll:!0,track:Pt,...I,children:d(Ht,{component:be,...t,ref:e=>{L.current=e,typeof n=="function"?n(e):n&&(n.current=e)},sx:{userSelect:"auto",WebkitUserSelect:"auto",position:"relative",width:"100%",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",scrollbarWidth:"none",msOverflowStyle:"none",transform:"translateZ(0)",backfaceVisibility:"hidden",willChange:"scroll-position","&::-webkit-scrollbar":{display:"none"},"& .MuiTable-root":{paddingRight:s,paddingTop:_,paddingBottom:ue}}})})}),[]),fe=rt(()=>{if(z===!0)return"#f5f5f5";if(typeof z=="string")return z},[z]),[it,Ye]=nt(p),[ve,_e]=nt(0);ge(()=>{p&&Ye(!0)},[p]);let $e=Ce(()=>{Ye(!1)},[]),we=it,Se=p&&a.length>0,U=se(!1),O=se(null),m=se(!1),F=se({x:0,y:0});ge(()=>{let t=n=>{let L=n.clientX-F.current.x,u=n.clientY-F.current.y;Math.sqrt(L*L+u*u)>dt&&(m.current=!0)};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}},[]),ge(()=>{let t=document.querySelector('[data-testid="virtuoso-scroller"]');t&&t.querySelectorAll(".MuiTableSortLabel-root").forEach(L=>{let u=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});L.dispatchEvent(u)})},[H]);let me=Ce(t=>{if(!W)return;W(t,H===t&&Y==="asc"?"desc":"asc")},[W,H,Y]),g=Ce(t=>{let n=v?performance.now():0;if(!K){v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n);return}if(p&&a.length===0){v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n);return}let L=a.length>=30;if(t>=a.length-1&&L&&!U.current){U.current=!0;let i=a.length;K(i,50)}v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n)},[a.length,p,K,v]);ge(()=>{p||(U.current=!1)},[p]),ge(()=>{a.length===0&&_e(t=>t+1)},[a.length]);let T=se(a.length);ge(()=>{let t=T.current,n=a.length;if(n>t&&t>0){T.current=n;return}O.current&&n>0&&n<=t&&O.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),T.current=n},[a]);let Je=Ce(()=>{let t={},n=[];if(f.forEach(e=>{e.group?(t[e.group]||(t[e.group]=[]),t[e.group].push(e)):n.push(e)}),!(Object.keys(t).length>0))return d(We,{children:f.map(e=>d(Ee,{align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):e.text},String(e.id)))});let u=[...n.map(e=>d(Ee,{rowSpan:2,align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable&&W?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):e.text},String(e.id))),...Object.entries(t).map(([e,P])=>d(Ee,{align:"center",colSpan:P.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e},e))],i=[...Object.values(t).flat().map(e=>d(Ee,{align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable&&W?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(0deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(180deg)"}}})]})}):e.text},String(e.id)))];return Re(Ke,{children:[d(We,{children:u}),d(We,{children:i})]})},[f,H,Y,me,W,R]),Fe=Ce((t,n)=>{let L=v?performance.now():0;if(!n){if(v){h.current.rowContentCalls+=1;let i=performance.now()-L;h.current.rowContentMs+=i,h.current.rowContentMaxMs=Math.max(h.current.rowContentMaxMs,i)}return null}let u=f.map(i=>{let e=v?performance.now():0,P=i.render?i.render(n,t):String(n[i.id]||"");if(v){let q=performance.now()-e;h.current.cellRenderCalls+=1,h.current.cellRenderMs+=q,h.current.cellRenderMaxMs=Math.max(h.current.cellRenderMaxMs,q)}return d(Ee,{align:i.align||"left",style:{width:i.width,minWidth:i.width,...i.style,padding:"8px 16px"},children:P},String(i.id))});if(v){h.current.rowContentCalls+=1;let i=performance.now()-L;h.current.rowContentMs+=i,h.current.rowContentMaxMs=Math.max(h.current.rowContentMaxMs,i)}return d(Ke,{children:u})},[f,v]),N=Te??f.some(t=>typeof t.footer=="function"),ke=Ce(()=>N?d(We,{children:f.map(t=>d(Ee,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",padding:"16px"},children:t.footer?t.footer(a):null},String(t.id)))}):null,[N,f,a]),S=rt(()=>({Scroller:ye,Table:t=>d(Et,{...t,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px",...N?{height:"100%"}:{}}}),TableHead:Xe((t,n)=>d(It,{...t,ref:n,sx:{userSelect:"none","& tr":{height:R,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:t=>{let{item:n,selected:L,"aria-selected":u,className:i,...e}=t,P=e["data-index"]??0,q=P%2===1,Ne=n&&k?k(n,P):P,Q=E!=null&&Ne===E,Pe=Q&&w?typeof w=="function"?w(n,P):w:void 0,Le=String(i??"").split(/\s+/).filter(D=>D!=="Mui-selected"&&D!=="Mui-focusVisible").join(" ");return d(We,{...e,className:Le||void 0,selected:Q,onMouseDown:D=>{m.current=!1,F.current={x:D.clientX,y:D.clientY}},onClick:D=>{let he=D.clientX-F.current.x,le=D.clientY-F.current.y;if(Math.sqrt(he*he+le*le)>dt||m.current){D.preventDefault(),D.stopPropagation(),m.current=!1;return}n&&y&&y(n,P),m.current=!1},sx:[{userSelect:"none",height:C,backgroundColor:q&&fe?fe:"transparent","& td":{padding:"8px 16px",borderBottom:X?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":y&&!Q?{backgroundColor:D=>{let he=D.palette.mode==="dark",r=de??"#000000",o=A??.06;if(!de)return he?`rgba(255, 255, 255, ${o})`:`rgba(0, 0, 0, ${o})`;let l=r.replace("#","").trim();if(l.length!==6)return r;let c=parseInt(l.substring(0,2),16),b=parseInt(l.substring(2,4),16),x=parseInt(l.substring(4,6),16);return`rgba(${c}, ${b}, ${x}, ${o})`}}:void 0,cursor:y?"pointer":void 0},Pe]})},TableBody:Xe((t,n)=>d(Rt,{...t,ref:n,sx:N?{height:"100%"}:void 0})),TableFoot:Xe((t,n)=>d(Ot,{...t,ref:n,sx:[{position:"sticky",bottom:0,zIndex:2,backgroundColor:L=>L.palette.mode==="dark"?"#1e1e1e":"#ffffff","& tr":{height:pe??C},"& td":{padding:"16px",color:"inherit",fontSize:"0.875rem",borderTop:"2px solid rgba(224, 224, 224, 1)",borderBottom:"none"}},...Array.isArray(re)?re:re?[re]:[]]}))}),[y,k,E,w,C,fe,X,R,de,A,ye,pe,re,N]),ie=Re(be,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:t=>t.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"}},children:[d(Nt,{ref:O,data:a,totalCount:K?a.length+1:a.length,defaultItemHeight:Ie,fixedItemHeight:Ie,fixedHeaderContent:Je,fixedFooterContent:N?ke:void 0,itemContent:Fe,endReached:g,style:{height:"100%"},increaseViewportBy:{top:Ze,bottom:qe},overscan:xe,followOutput:!1,components:S},ve),a.length===0&&!p&&d(be,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof ee=="string"?Re(Ke,{children:[d(be,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),d(Ft,{variant:"body1",sx:{color:"text.secondary"},children:ee})]}):ee}),we&&d(Ke,{children:te?d(te,{visible:p,onComplete:$e}):d(at,{visible:p,onComplete:$e,size:40,sx:{top:`${f.some(t=>t.group)?R*2:R}px`},background:{show:a.length===0,opacity:.8}})})]});return ce?d($t,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:s,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ie}):d(be,{className:"grow",style:{padding:0,paddingLeft:s,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ie})}var Bt=Dt(At);export{Bt as VirtualDataTable};
|
|
21
|
+
`,document.head.appendChild(l),()=>{let c=document.getElementById(r);c&&c.remove()}},[]),ct("div",{ref:ce,className:`overlay-scrollbar-wrapper ${a}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...p},children:[De("div",{ref:s,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:Le,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:xe?"none":"auto",...f},children:De("div",{ref:_,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...y},children:k})}),W&&He&&ct("div",{ref:ue,className:"overlay-scrollbar-track",onMouseEnter:()=>{t(),Se.current=setTimeout(()=>{M(!0),Se.current=null},100)},onMouseLeave:()=>{n(),I||u(g.delay)},style:{position:"absolute",top:0,right:0,width:`${le}px`,height:"100%",opacity:G?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[m.visible&&De("div",{className:"overlay-scrollbar-track-background",onClick:r=>{r.preventDefault(),r.stopPropagation(),Ne(r)},style:{position:"absolute",top:N?`${O.width+m.margin*2}px`:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-O.width)/2}px`,width:`${O.width}px`,height:N?`calc(100% - ${O.width*2+m.margin*4}px)`:`calc(100% - ${m.margin*2}px)`,backgroundColor:m.color,borderRadius:`${m.radius}px`,cursor:"pointer"}}),De("div",{ref:de,className:"overlay-scrollbar-thumb",onMouseDown:e,onMouseEnter:()=>Te(!0),onMouseLeave:()=>Te(!1),style:{position:"absolute",top:`${(N?T+m.margin*2:m.margin)+Ze}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${Math.max(ne,Fe)}px`,backgroundColor:te||I?O.hoverColor:O.color,opacity:te||I?O.hoverOpacity:O.opacity,borderRadius:`${O.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),W&&He&&N&&De("div",{className:"overlay-scrollbar-up-arrow",onClick:Q,onMouseEnter:()=>fe("up"),onMouseLeave:()=>fe(null),style:{position:"absolute",top:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${T}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(T*.75,8)}px`,color:ye==="up"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:G?ye==="up"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),W&&He&&N&&De("div",{className:"overlay-scrollbar-down-arrow",onClick:Pe,onMouseEnter:()=>fe("down"),onMouseLeave:()=>fe(null),style:{position:"absolute",bottom:`${m.margin}px`,right:m.alignment==="right"?"0px":`${(le-T)/2}px`,width:`${T}px`,height:`${T}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(T*.75,8)}px`,color:ye==="down"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:G?ye==="down"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),ut=Lt;import{Fragment as Ke,jsx as d,jsxs as Re}from"react/jsx-runtime";var Pt={alignment:"right",margin:0,radius:0},dt=5;function At({data:a,loading:p=!1,columns:f,onRowClick:y,getRowId:k,selectedRowId:E,selectedRowSx:w,rowHeight:C=50,columnHeight:R=56,striped:z,rowDivider:X=!0,onSort:W,onLoadMore:K,sortBy:H,sortDirection:Y,showPaper:ce=!0,paddingX:s="1rem",paddingTop:_=0,paddingBottom:ue=0,rowHoverColor:de,rowHoverOpacity:A,viewportBuffer:G,overscan:M,scrollbars:I,emptyMessage:ee="NO DATA",LoadingComponent:te,showFooter:Te,footerHeight:pe,footerSx:re}){let ne=Math.max(C*12,480),Ue=Math.max(C*12,480),Ze=typeof G=="number"?G:G?.top??ne,qe=typeof G=="number"?G:G?.bottom??Ue,He=Math.max(C*8,420),je=Math.max(C*10,520),xe=typeof M=="number"?M:{main:M?.main??He,reverse:M?.reverse??je},Ie=C+(X?1:0),Oe=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[v]=nt(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),h=se({wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}),ze=Ce(t=>{if(!v)return;let n=h.current;if(!(n.wheelEvents>0||n.rangeChangedCalls>0||n.rowContentCalls>0||n.cellRenderCalls>0))return;let u=n.rowContentCalls>0?n.rowContentMs/n.rowContentCalls:0,i=n.cellRenderCalls>0?n.cellRenderMs/n.cellRenderCalls:0;console.log("[VDT perf]",{reason:t,wheel:{events:n.wheelEvents,inputPx:Math.round(n.wheelInputPx),handlerMs:Number(n.wheelHandlerMs.toFixed(2)),rafFlushes:n.wheelRafFlushes,rafMs:Number(n.wheelRafMs.toFixed(2))},rangeChanged:{calls:n.rangeChangedCalls,totalMs:Number(n.rangeChangedMs.toFixed(2))},rowContent:{calls:n.rowContentCalls,totalMs:Number(n.rowContentMs.toFixed(2)),avgMs:Number(u.toFixed(3)),maxMs:Number(n.rowContentMaxMs.toFixed(3))},cellRender:{calls:n.cellRenderCalls,totalMs:Number(n.cellRenderMs.toFixed(2)),avgMs:Number(i.toFixed(3)),maxMs:Number(n.cellRenderMaxMs.toFixed(3))}}),h.current={wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}},[v]);ge(()=>{if(!v||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let t=window.setInterval(()=>{ze("interval")},1500);return()=>{window.clearInterval(t),ze("cleanup")}},[ze,v]);let ye=rt(()=>Xe((t,n)=>{let L=se(null),u=se(0),i=se(null);return ge(()=>{let e=L.current;if(!e)return;let P=q=>{let Ne=v?performance.now():0;q.preventDefault();let Q=q.deltaY;q.deltaMode===1?Q*=40:q.deltaMode===2&&(Q*=e.clientHeight),v&&(h.current.wheelEvents+=1,h.current.wheelInputPx+=Q),u.current+=Q,i.current===null&&(i.current=requestAnimationFrame(()=>{let Pe=v?performance.now():0,Le=Math.max(e.clientHeight*.4,160),D=Math.max(-Le,Math.min(Le,u.current));u.current=0,i.current=null,D!==0&&(e.scrollTop+=D),v&&(h.current.wheelRafFlushes+=1,h.current.wheelRafMs+=performance.now()-Pe)}),v&&(h.current.wheelHandlerMs+=performance.now()-Ne))};return e.addEventListener("wheel",P,{passive:!1}),()=>{e.removeEventListener("wheel",P),i.current!==null&&(cancelAnimationFrame(i.current),i.current=null),u.current=0}},[]),d(ut,{detectInnerScroll:!0,track:Pt,...I,children:d(Ht,{component:be,...t,ref:e=>{L.current=e,typeof n=="function"?n(e):n&&(n.current=e)},sx:{userSelect:"auto",WebkitUserSelect:"auto",position:"relative",width:"100%",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",scrollbarWidth:"none",msOverflowStyle:"none",transform:"translateZ(0)",backfaceVisibility:"hidden",willChange:"scroll-position","&::-webkit-scrollbar":{display:"none"},"& .MuiTable-root":{paddingRight:s,paddingTop:_,paddingBottom:ue}}})})}),[]),fe=rt(()=>{if(z===!0)return"#f5f5f5";if(typeof z=="string")return z},[z]),[it,Ye]=nt(p),[ve,_e]=nt(0);ge(()=>{p&&Ye(!0)},[p]);let $e=Ce(()=>{Ye(!1)},[]),we=it,Se=p&&a.length>0,U=se(!1),O=se(null),m=se(!1),F=se({x:0,y:0});ge(()=>{let t=n=>{let L=n.clientX-F.current.x,u=n.clientY-F.current.y;Math.sqrt(L*L+u*u)>dt&&(m.current=!0)};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}},[]),ge(()=>{let t=document.querySelector('[data-testid="virtuoso-scroller"]');t&&t.querySelectorAll(".MuiTableSortLabel-root").forEach(L=>{let u=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});L.dispatchEvent(u)})},[H]);let me=Ce(t=>{if(!W)return;W(t,H===t&&Y==="asc"?"desc":"asc")},[W,H,Y]),g=Ce(t=>{let n=v?performance.now():0;if(!K){v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n);return}if(p&&a.length===0){v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n);return}let L=a.length>=30;if(t>=a.length-1&&L&&!U.current){U.current=!0;let i=a.length;K(i,50)}v&&(h.current.rangeChangedCalls+=1,h.current.rangeChangedMs+=performance.now()-n)},[a.length,p,K,v]);ge(()=>{p||(U.current=!1)},[p]),ge(()=>{a.length===0&&_e(t=>t+1)},[a.length]);let T=se(a.length);ge(()=>{let t=T.current,n=a.length;if(n>t&&t>0){T.current=n;return}O.current&&n>0&&n<=t&&O.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),T.current=n},[a]);let Je=Ce(()=>{let t={},n=[];if(f.forEach(e=>{e.group?(t[e.group]||(t[e.group]=[]),t[e.group].push(e)):n.push(e)}),!(Object.keys(t).length>0))return d(We,{children:f.map(e=>d(Ee,{align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):e.text},String(e.id)))});let u=[...n.map(e=>d(Ee,{rowSpan:2,align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable&&W?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):e.text},String(e.id))),...Object.entries(t).map(([e,P])=>d(Ee,{align:"center",colSpan:P.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e},e))],i=[...Object.values(t).flat().map(e=>d(Ee,{align:e.align||"left",style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e.sortable&&W?d("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Re(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>me(String(e.id)),children:[e.text,d(ot,{active:H===e.id,direction:H===e.id?Y:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:H===e.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(0deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(180deg)"}}})]})}):e.text},String(e.id)))];return Re(Ke,{children:[d(We,{children:u}),d(We,{children:i})]})},[f,H,Y,me,W,R]),Fe=Ce((t,n)=>{let L=v?performance.now():0;if(!n){if(v){h.current.rowContentCalls+=1;let i=performance.now()-L;h.current.rowContentMs+=i,h.current.rowContentMaxMs=Math.max(h.current.rowContentMaxMs,i)}return null}let u=f.map(i=>{let e=v?performance.now():0,P=i.render?i.render(n,t):String(n[i.id]||"");if(v){let q=performance.now()-e;h.current.cellRenderCalls+=1,h.current.cellRenderMs+=q,h.current.cellRenderMaxMs=Math.max(h.current.cellRenderMaxMs,q)}return d(Ee,{align:i.align||"left",style:{width:i.width,minWidth:i.width,...i.style,padding:"8px 16px"},children:P},String(i.id))});if(v){h.current.rowContentCalls+=1;let i=performance.now()-L;h.current.rowContentMs+=i,h.current.rowContentMaxMs=Math.max(h.current.rowContentMaxMs,i)}return d(Ke,{children:u})},[f,v]),N=Te??f.some(t=>typeof t.footer=="function"),ke=Ce(()=>N?d(We,{children:f.map(t=>d(Ee,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",padding:"16px"},children:t.footer?t.footer(a):null},String(t.id)))}):null,[N,f,a]),S=rt(()=>({Scroller:ye,Table:t=>d(Et,{...t,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px",...N?{height:"100%"}:{}}}),TableHead:Xe((t,n)=>d(It,{...t,ref:n,sx:{userSelect:"none","& tr":{height:R,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:t=>{let{item:n,selected:L,"aria-selected":u,className:i,...e}=t,P=e["data-index"]??0,q=P%2===1,Ne=n&&k?k(n,P):P,Q=E!=null&&Ne===E,Pe=Q&&w?typeof w=="function"?w(n,P):w:void 0,Le=String(i??"").split(/\s+/).filter(D=>D!=="Mui-selected"&&D!=="Mui-focusVisible").join(" ");return d(We,{...e,className:Le||void 0,selected:Q,onMouseDown:D=>{m.current=!1,F.current={x:D.clientX,y:D.clientY}},onClick:D=>{let he=D.clientX-F.current.x,le=D.clientY-F.current.y;if(Math.sqrt(he*he+le*le)>dt||m.current){D.preventDefault(),D.stopPropagation(),m.current=!1;return}n&&y&&y(n,P),m.current=!1},sx:[{userSelect:"none",height:C,backgroundColor:q&&fe?fe:"transparent","& td":{padding:"8px 16px",borderBottom:X?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":y&&!Q?{backgroundColor:D=>{let he=D.palette.mode==="dark",r=de??"#000000",o=A??.06;if(!de)return he?`rgba(255, 255, 255, ${o})`:`rgba(0, 0, 0, ${o})`;let l=r.replace("#","").trim();if(l.length!==6)return r;let c=parseInt(l.substring(0,2),16),b=parseInt(l.substring(2,4),16),x=parseInt(l.substring(4,6),16);return`rgba(${c}, ${b}, ${x}, ${o})`}}:void 0,cursor:y?"pointer":void 0},Pe]})},TableBody:Xe((t,n)=>d(Rt,{...t,ref:n,sx:N?{height:"100%"}:void 0})),TableFoot:Xe((t,n)=>d(Ot,{...t,ref:n,sx:[{position:"sticky",bottom:0,zIndex:2,backgroundColor:L=>L.palette.mode==="dark"?"#1e1e1e":"#ffffff","& tr":{height:pe??C},"& td":{padding:"16px",color:"inherit",fontSize:"0.875rem",borderTop:"1px solid #000000",borderBottom:"none"}},...Array.isArray(re)?re:re?[re]:[]]}))}),[y,k,E,w,C,fe,X,R,de,A,ye,pe,re,N]),ie=Re(be,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:t=>t.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"}},children:[d(Nt,{ref:O,data:a,totalCount:K?a.length+1:a.length,defaultItemHeight:Ie,fixedItemHeight:Ie,fixedHeaderContent:Je,fixedFooterContent:N?ke:void 0,itemContent:Fe,endReached:g,style:{height:"100%"},increaseViewportBy:{top:Ze,bottom:qe},overscan:xe,followOutput:!1,components:S},ve),a.length===0&&!p&&d(be,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof ee=="string"?Re(Ke,{children:[d(be,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),d(Ft,{variant:"body1",sx:{color:"text.secondary"},children:ee})]}):ee}),we&&d(Ke,{children:te?d(te,{visible:p,onComplete:$e}):d(at,{visible:p,onComplete:$e,size:40,sx:{top:`${f.some(t=>t.group)?R*2:R}px`},background:{show:a.length===0,opacity:.8}})})]});return ce?d($t,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:s,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ie}):d(be,{className:"grow",style:{padding:0,paddingLeft:s,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ie})}var Bt=Dt(At);export{Bt as VirtualDataTable};
|
|
22
22
|
/**
|
|
23
23
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
24
24
|
*
|