@ehfuse/mui-virtual-data-table 1.1.35 → 1.2.1
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/README.md +24 -0
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +3 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +3 -3
- package/dist/types.d.ts +55 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -133,9 +133,33 @@ function App() {
|
|
|
133
133
|
emptyMessage={string | React.ReactNode} // Empty state message (default: "NO DATA")
|
|
134
134
|
scrollbars={VDTOverlayScrollbarProps} // Custom scrollbar options
|
|
135
135
|
LoadingComponent={React.ComponentType} // Custom loading component
|
|
136
|
+
|
|
137
|
+
// Optional - Layout (1.2.0)
|
|
138
|
+
framed={boolean} // notion: outer border + paper padding (default: true). false = fill an already-bordered box
|
|
139
|
+
tableLayout={"fixed" | "auto"} // "auto": column widths follow content, wide tables scroll horizontally
|
|
140
|
+
rowHeightMode={"fixed" | "auto"} // "auto": rowHeight becomes a minimum, rows grow with content
|
|
141
|
+
autoHeight={boolean} // No virtualization / no own scroll — the table is as tall as its rows (page scrolls)
|
|
142
|
+
renderFullWidthRow={(item, index) => ReactNode | null} // Group band row: one cell spanning all columns (null = normal row)
|
|
143
|
+
fullWidthRowSx={SxProps} // Style of the band row cell (background, padding)
|
|
144
|
+
onRowContextMenu={(item, index, event) => void}
|
|
136
145
|
/>
|
|
137
146
|
```
|
|
138
147
|
|
|
148
|
+
### Column options (1.2.0)
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
{ id: "name", text: "이름", width: 160, pinned: "left" } // sticky left (numeric width needed for the next pinned column)
|
|
152
|
+
{ id: "name", text: "이름", primary: true } // 15px body text for the row's main cell
|
|
153
|
+
{ id: "d1", text: "월", onCellClick: (item, i, e) => {} } // per-cell click + cell hover (row click is not fired)
|
|
154
|
+
{ id: "who", text: "담당", rowSpan: (item, i) => 2 } // merge down; return 0 on covered rows (use with autoHeight / short tables)
|
|
155
|
+
{ id: "m1", text: "1월", cellPadding: "4px 0" } // body padding override
|
|
156
|
+
{ id: "t", text: "업무", cellStyle: (item) => ({ color: "#999" }) } // per-row cell style
|
|
157
|
+
{ id: "c", text: "열", headerProps: { draggable: true, onDrop } } // extra th attributes (drag to reorder, title…)
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
notion defaults (1.2.0): rowHeight 48, header text 13px, selected row (`selectedRowId`) = `#dbeafe` + 3px `#3b82f6` left bar (dark values included),
|
|
161
|
+
string `emptyMessage` = one light grey line under the header, footer cells use the body padding.
|
|
162
|
+
|
|
139
163
|
## License
|
|
140
164
|
|
|
141
165
|
MIT © KIM YOUNG JIN (ehfuse@gmail.com)
|
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as ve,useCallback as H,useMemo as U,useRef as m,useEffect as I,memo as Wt,useState as Me}from"react";import{Box as L,Table as jt,TableBody as Yt,TableCell as K,TableContainer as Xt,TableHead as Kt,TableFooter as qt,TableRow as se,TableSortLabel as je,Paper as Gt,Typography as Jt,useTheme as Ut}from"@mui/material";import{TableVirtuoso as Zt}from"react-virtuoso";import{jsx as We}from"react/jsx-runtime";import{useRef as ot,useState as Bt,useEffect as Nt}from"react";import{Box as zt,CircularProgress as Ft}from"@mui/material";var ie=function(){return ie=Object.assign||function(c){for(var s,v=1,M=arguments.length;v<M;v++){s=arguments[v];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(c[h]=s[h])}return c},ie.apply(this,arguments)};function at(a){var c=a.visible,s=a.onComplete,v=a.fadeoutDuration,M=v===void 0?200:v,h=a.exitDelay,le=h===void 0?0:h,de=a.size,Z=de===void 0?40:de,q=a.className,Q=a.style,O=a.sx,D=a.indicator,b=a.background,T=b===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:b,ce=ot(void 0),F=ot(null),ue=Bt(c),Se=ue[0],pe=ue[1],fe=T.show,A=fe===void 0?!0:fe,V=T.color,E=V===void 0?"255, 255, 255":V,P=T.opacity,y=P===void 0?.9:P;if(Nt(function(){var $=ce.current;if($===!0&&c===!1&&F.current){var _=F.current;_.style.opacity="0",setTimeout(function(){pe(!1),s?.()},M+le)}else c===!0&&(pe(!0),F.current&&(F.current.style.opacity="1"));ce.current=c},[c,s,M,le]),!Se)return null;var ge=function(){return typeof D=="string"?We("img",{src:D,alt:"Loading",style:{width:Z,height:Z}}):D||We(Ft,{size:Z})},Re=function(){return A?E.startsWith("rgba")?{backgroundColor:E}:/^\d+,\s*\d+,\s*\d+$/.test(E)?{backgroundColor:"rgba(".concat(E,", ").concat(y,")")}:y!==1?{backgroundColor:E,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:E,opacity:y,zIndex:-1}}:{backgroundColor:E}:{backgroundColor:"transparent"}};return We(zt,{ref:F,className:q,style:ie({},Q),sx:ie(ie({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,opacity:c?1:0,transition:"opacity ".concat(M,"ms ease-out")},Re()),O),children:ge()})}import{Fragment as $t,jsx as it,jsxs as _t}from"react/jsx-runtime";var Vt=`
|
|
2
2
|
.vdt-css-spinner{box-sizing:border-box;border-radius:50%;border:4px solid rgba(28,64,125,0.14);border-top-color:#1c407d;animation:vdt-css-spinner-spin .75s linear infinite}
|
|
3
3
|
@keyframes vdt-css-spinner-spin{to{transform:rotate(360deg)}}
|
|
4
|
-
`;function _e({size:r=54}){return bt(ht,{children:[Ae("style",{children:gt}),Ae("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:r,height:r}})]})}import Lt from"@ehfuse/overlay-scrollbar";import{Fragment as ue,jsx as o,jsxs as V}from"react/jsx-runtime";var Dt={alignment:"default",margin:0,radius:0},$e=5,kt={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7"},Be="12px",Et={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36"};function It({data:r,loading:d=!1,columns:c,onRowClick:y,getRowId:T,selectedRowId:f,selectedRowSx:h,rowHeight:b=50,columnHeight:Y,striped:W,rowDivider:K=!0,onSort:S,onLoadMore:w,sortBy:p,sortDirection:C,showPaper:Z=!0,paddingX:I,paddingTop:Q=0,paddingBottom:pe=0,rowHoverColor:ee,rowHoverOpacity:te,viewportBuffer:R,overscan:N,scrollbars:v,emptyMessage:A="NO DATA",LoadingComponent:_,showFooter:fe,footerHeight:O,footerSx:F,variant:ge="default"}){let P=ge==="notion",H=St().palette.mode==="dark"?Et:kt,$=Y??(P?40:56),ne=I??(P?"12px":"1rem"),he=ee??(P?H.hoverBg:void 0),Ne=te??(P?1:void 0),je=Math.max(b*12,480),Ye=Math.max(b*12,480),Ke=typeof R=="number"?R:R?.top??je,Ge=typeof R=="number"?R:R?.bottom??Ye,Xe=Math.max(b*8,420),qe=Math.max(b*10,520),Je=typeof N=="number"?N:{main:N?.main??Xe,reverse:N?.reverse??qe},re=b+(K?1:0),oe=!h||typeof h!="function",Ue=de(()=>!oe||f===null||f===void 0||!h?null:{[`& tbody tr[data-row-id="${String(f).replace(/["\\]/g,"\\$&")}"]`]:h},[oe,f,h]),Ft=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[u]=Ee(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),l=x({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}),be=z(n=>{if(!u)return;let t=l.current;if(!(t.wheelEvents>0||t.rangeChangedCalls>0||t.rowContentCalls>0||t.cellRenderCalls>0))return;let s=t.rowContentCalls>0?t.rowContentMs/t.rowContentCalls:0,a=t.cellRenderCalls>0?t.cellRenderMs/t.cellRenderCalls:0;console.log("[VDT perf]",{reason:n,wheel:{events:t.wheelEvents,inputPx:Math.round(t.wheelInputPx),handlerMs:Number(t.wheelHandlerMs.toFixed(2)),rafFlushes:t.wheelRafFlushes,rafMs:Number(t.wheelRafMs.toFixed(2))},rangeChanged:{calls:t.rangeChangedCalls,totalMs:Number(t.rangeChangedMs.toFixed(2))},rowContent:{calls:t.rowContentCalls,totalMs:Number(t.rowContentMs.toFixed(2)),avgMs:Number(s.toFixed(3)),maxMs:Number(t.rowContentMaxMs.toFixed(3))},cellRender:{calls:t.cellRenderCalls,totalMs:Number(t.cellRenderMs.toFixed(2)),avgMs:Number(a.toFixed(3)),maxMs:Number(t.cellRenderMaxMs.toFixed(3))}}),l.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}},[u]);k(()=>{if(!u||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let n=window.setInterval(()=>{be("interval")},1500);return()=>{window.clearInterval(n),be("cleanup")}},[be,u]);let Oe=de(()=>ce((n,t)=>{let i=x(null),s=x(0),a=x(null);return k(()=>{let e=i.current;if(!e)return;let m=M=>{let B=u?performance.now():0;M.preventDefault();let D=M.deltaY;M.deltaMode===1?D*=40:M.deltaMode===2&&(D*=e.clientHeight),u&&(l.current.wheelEvents+=1,l.current.wheelInputPx+=D),s.current+=D,a.current===null&&(a.current=requestAnimationFrame(()=>{let Se=u?performance.now():0,ae=Math.max(e.clientHeight*.4,160),g=Math.max(-ae,Math.min(ae,s.current));s.current=0,a.current=null,g!==0&&(e.scrollTop+=g),u&&(l.current.wheelRafFlushes+=1,l.current.wheelRafMs+=performance.now()-Se)}),u&&(l.current.wheelHandlerMs+=performance.now()-B))};return e.addEventListener("wheel",m,{passive:!1}),()=>{e.removeEventListener("wheel",m),a.current!==null&&(cancelAnimationFrame(a.current),a.current=null),s.current=0}},[]),o(Lt,{detectInnerScroll:!0,track:Dt,...v,children:o(Ct,{component:E,...n,ref:e=>{i.current=e,typeof t=="function"?t(e):t&&(t.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:P?0:ne,paddingTop:Q,paddingBottom:pe}}})})}),[]),me=de(()=>{if(W===!0)return"#f5f5f5";if(typeof W=="string")return W},[W]),[Ze,Fe]=Ee(d),[Qe,et]=Ee(0);k(()=>{d&&Fe(!0)},[d]);let Pe=z(()=>{Fe(!1)},[]),tt=Ze,Pt=d&&r.length>0,xe=x(!1),ye=x(-1),Ce=x(null),we=x(y);we.current=y;let G=x(T);G.current=T;let ve=!!y,X=x(!1),q=x({x:0,y:0});k(()=>{let n=t=>{let i=t.clientX-q.current.x,s=t.clientY-q.current.y;Math.sqrt(i*i+s*s)>$e&&(X.current=!0)};return document.addEventListener("mousemove",n),()=>{document.removeEventListener("mousemove",n)}},[]),k(()=>{let n=document.querySelector('[data-testid="virtuoso-scroller"]');n&&n.querySelectorAll(".MuiTableSortLabel-root").forEach(i=>{let s=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});i.dispatchEvent(s)})},[p]);let ie=z(n=>{if(!S)return;S(n,p===n&&C==="asc"?"desc":"asc")},[S,p,C]),nt=z(n=>{let t=u?performance.now():0;if(!w){u&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t);return}if(d&&r.length===0){u&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t);return}let i=r.length>=30,s=n>=r.length-1,a=ye.current===r.length;if(s&&i&&!xe.current&&!a){xe.current=!0,ye.current=r.length;let e=r.length;w(e,50)}u&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t)},[r.length,d,w,u]);k(()=>{d||(xe.current=!1)},[d]),k(()=>{r.length===0&&et(n=>n+1)},[r.length]);let Me=x(r.length),Te=x(void 0);k(()=>{let n=Me.current,t=r.length,i=t>0?G.current?G.current(r[0],0):r[0]:void 0,s=Te.current;if(t>n&&n>0){Me.current=t,Te.current=i;return}let a=t<n||n>0&&i!==s;a&&(ye.current=-1),Ce.current&&t>0&&a&&Ce.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),Me.current=t,Te.current=i},[r]);let rt=z(()=>{let n={},t=[];if(c.forEach(e=>{e.group?(n[e.group]||(n[e.group]=[]),n[e.group].push(e)):t.push(e)}),!(Object.keys(n).length>0))return o(U,{children:c.map(e=>o(j,{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?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:V(E,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ie(String(e.id)),children:[e.text,o(Ie,{active:p===e.id,direction:p===e.id?C:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:p===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 s=[...t.map(e=>o(j,{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&&S?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:V(E,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ie(String(e.id)),children:[e.text,o(Ie,{active:p===e.id,direction:p===e.id?C:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:p===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(n).map(([e,m])=>o(j,{align:"center",colSpan:m.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e},e))],a=[...Object.values(n).flat().map(e=>o(j,{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&&S?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:V(E,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ie(String(e.id)),children:[e.text,o(Ie,{active:p===e.id,direction:p===e.id?C:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:p===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 V(ue,{children:[o(U,{children:s}),o(U,{children:a})]})},[c,p,C,ie,S,$]),ot=z((n,t)=>{let i=u?performance.now():0;if(!t){if(u){l.current.rowContentCalls+=1;let a=performance.now()-i;l.current.rowContentMs+=a,l.current.rowContentMaxMs=Math.max(l.current.rowContentMaxMs,a)}return null}let s=c.map(a=>{let e=u?performance.now():0,m=a.render?a.render(t,n):String(t[a.id]||"");if(u){let M=performance.now()-e;l.current.cellRenderCalls+=1,l.current.cellRenderMs+=M,l.current.cellRenderMaxMs=Math.max(l.current.cellRenderMaxMs,M)}return o(j,{align:a.align||"left",style:{width:a.width,minWidth:a.width,...a.style,padding:"8px 16px"},children:m},String(a.id))});if(u){l.current.rowContentCalls+=1;let a=performance.now()-i;l.current.rowContentMs+=a,l.current.rowContentMaxMs=Math.max(l.current.rowContentMaxMs,a)}return o(ue,{children:s})},[c,u]),L=fe??c.some(n=>typeof n.footer=="function"),it=z(()=>{if(!L)return null;let n=[];for(let t=0;t<c.length;t+=1){let i=c[t],s=i.footerColSpan&&i.footerColSpan>1?Math.min(i.footerColSpan,c.length-t):1;n.push(o(j,{align:i.align||"left",colSpan:s>1?s:void 0,style:{...s>1?{}:{width:i.width,minWidth:i.width},...i.style,fontWeight:"bold",padding:"16px"},children:i.footer?i.footer(r):null},String(i.id))),t+=s-1}return o(U,{children:n})},[L,c,r]),at=de(()=>({Scroller:Oe,Table:n=>o(xt,{...n,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px",...L?{height:"100%"}:{}}}),TableHead:ce((n,t)=>o(wt,{...n,ref:t,sx:{userSelect:"none","& tr":{height:$,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:n=>{let{item:t,selected:i,"aria-selected":s,className:a,...e}=n,m=e["data-index"]??0,M=m%2===1,B=t&&G.current?G.current(t,m):m,D=!oe&&f!==null&&f!==void 0&&B===f,Se=D&&h?typeof h=="function"?h(t,m):h:void 0,ae=String(a??"").split(/\s+/).filter(g=>g!=="Mui-selected"&&g!=="Mui-focusVisible").join(" ");return o(U,{...e,"data-row-id":B!=null?String(B):void 0,className:ae||void 0,selected:D,onMouseDown:g=>{X.current=!1,q.current={x:g.clientX,y:g.clientY}},onClick:g=>{let se=g.clientX-q.current.x,Re=g.clientY-q.current.y;if(Math.sqrt(se*se+Re*Re)>$e||X.current){g.preventDefault(),g.stopPropagation(),X.current=!1;return}t&&we.current&&we.current(t,m),X.current=!1},sx:[{userSelect:"none",height:re,maxHeight:re,boxSizing:"border-box",backgroundColor:M&&me?me:"transparent","& td":{padding:"8px 16px",boxSizing:"border-box",borderBottom:K?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":ve&&!D?{backgroundColor:g=>{let se=g.palette.mode==="dark",Le=he??"#000000",De=Ne??.06;if(!he)return se?`rgba(255, 255, 255, ${De})`:`rgba(0, 0, 0, ${De})`;let le=Le.replace("#","").trim();if(le.length!==6)return Le;let st=parseInt(le.substring(0,2),16),lt=parseInt(le.substring(2,4),16),ct=parseInt(le.substring(4,6),16);return`rgba(${st}, ${lt}, ${ct}, ${De})`}}:void 0,cursor:ve?"pointer":void 0},Se]})},TableBody:ce((n,t)=>{let{children:i,...s}=n;return V(yt,{...s,ref:t,sx:L?{height:"100%"}:void 0,children:[i,L&&o("tr",{"aria-hidden":!0,style:{height:"100%"},children:o("td",{colSpan:c.length,style:{padding:0,border:0}})})]})}),TableFoot:ce((n,t)=>o(vt,{...n,ref:t,sx:[{"& tr":{height:O??b,maxHeight:O??b,boxSizing:"border-box"},"& td":{height:O??b,boxSizing:"border-box",backgroundColor:i=>i.palette.mode==="dark"?"#1e1e1e":"#ffffff",padding:"0 16px",color:"inherit",fontSize:"0.875rem",border:"none",boxShadow:"inset 0 1px 0 0 #000000"}},...Array.isArray(F)?F:F?[F]:[]]}))}),[ve,oe?null:f,h,b,me,K,$,he,Ne,Oe,O,F,L,c]),He=V(E,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:n=>n.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...Ue??{},...P?{border:`1px solid ${H.borderStrong}`,borderRadius:"4px",overflow:"hidden","& thead tr th":{height:$,boxSizing:"border-box",padding:"0 14px !important",fontSize:13,fontWeight:"500 !important",color:H.headerColor,backgroundColor:`${H.bg} !important`,borderTop:"none",borderBottom:`1px solid ${H.borderStrong}`,borderRight:`1px solid ${H.border}`,"&:last-of-type":{borderRight:"none"}},"& tbody tr td":{padding:"0 14px !important",fontSize:14,borderBottom:`1px solid ${H.border}`}}:{}},children:[o(Rt,{ref:Ce,data:r,totalCount:w?r.length+1:r.length,defaultItemHeight:re,fixedItemHeight:re,fixedHeaderContent:rt,fixedFooterContent:L?it:void 0,itemContent:ot,endReached:nt,style:{height:"100%"},increaseViewportBy:{top:Ke,bottom:Ge},overscan:Je,followOutput:!1,components:at},Qe),r.length===0&&!d&&o(E,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof A=="string"?V(ue,{children:[o(E,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),o(Tt,{variant:"body1",sx:{color:"text.secondary"},children:A})]}):A}),tt&&o(ue,{children:_?o(_,{visible:d,onComplete:Pe}):o(We,{visible:d,onComplete:Pe,size:40,indicator:o(_e,{}),sx:{top:`${c.some(n=>n.group)?$*2:$}px`,bottom:`${L?O??b:0}px`},background:{show:r.length===0,opacity:.8}})})]}),ze=P?{paddingRight:ne,paddingTop:Be,paddingBottom:Be}:{};return Z?o(Mt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:ne,...ze,boxSizing:"border-box",height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:He}):o(E,{className:"grow",style:{padding:0,paddingLeft:ne,...ze,boxSizing:"border-box",height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:He})}var Nt=mt(It);export{Nt as VirtualDataTable};
|
|
4
|
+
`;function st({size:a=54}){return _t($t,{children:[it("style",{children:Vt}),it("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:a,height:a}})]})}import Qt from"@ehfuse/overlay-scrollbar";import{Fragment as Te,jsx as o,jsxs as z}from"react/jsx-runtime";var en={alignment:"default",margin:0,radius:0},Ye=5,tn={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7",emptyColor:"#9b9a97",selectedBg:"#dbeafe",selectedBar:"#3b82f6"},lt="12px",nn={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36",emptyColor:"#7d8590",selectedBg:"rgba(59, 130, 246, 0.22)",selectedBar:"#60a5fa"};function rn({data:a,loading:c=!1,columns:s,onRowClick:v,getRowId:M,selectedRowId:h,selectedRowSx:le,rowHeight:de,columnHeight:Z,striped:q,rowDivider:Q=!0,onSort:O,onLoadMore:D,sortBy:b,sortDirection:T,showPaper:ce=!0,paddingX:F,paddingTop:ue=0,paddingBottom:Se=0,rowHoverColor:pe,rowHoverOpacity:fe,viewportBuffer:A,overscan:V,scrollbars:E,emptyMessage:P="NO DATA",autoHeight:y=!1,LoadingComponent:ge,showFooter:Re,footerHeight:$,footerSx:_,variant:dt="default",framed:ee=!0,rowHeightMode:ct="fixed",tableLayout:Xe="fixed",renderFullWidthRow:ke,fullWidthRowSx:te,onRowContextMenu:Ke}){let u=dt==="notion",Le=Ut(),g=Le.palette.mode==="dark"?nn:tn,W=Z??(u?40:56),S=de??(u?48:50),be=ee?F??(u?"12px":"1rem"):0,De=ct==="auto",Ee=pe??(u?g.hoverBg:void 0),qe=fe??(u?1:void 0),ut=Math.max(S*12,480),pt=Math.max(S*12,480),ft=typeof A=="number"?A:A?.top??ut,gt=typeof A=="number"?A:A?.bottom??pt,bt=Math.max(S*8,420),ht=Math.max(S*10,520),mt=typeof V=="number"?V:{main:V?.main??bt,reverse:V?.reverse??ht},ne=S+(Q?1:0),xt=U(()=>u?{backgroundColor:g.selectedBg,"& > td:first-of-type":{boxShadow:`inset 3px 0 0 ${g.selectedBar}`},"& > td[data-vdt-pinned]":{backgroundColor:g.selectedBg}}:void 0,[u,g]),R=le??xt,he=!R||typeof R!="function",yt=U(()=>!he||h===null||h===void 0||!R?null:{[`& tbody tr[data-row-id="${String(h).replace(/["\\]/g,"\\$&")}"]`]:R},[he,h,R]),an=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[p]=Me(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),l=m({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}),Pe=H(n=>{if(!p)return;let t=l.current;if(!(t.wheelEvents>0||t.rangeChangedCalls>0||t.rowContentCalls>0||t.cellRenderCalls>0))return;let i=t.rowContentCalls>0?t.rowContentMs/t.rowContentCalls:0,f=t.cellRenderCalls>0?t.cellRenderMs/t.cellRenderCalls:0;console.log("[VDT perf]",{reason:n,wheel:{events:t.wheelEvents,inputPx:Math.round(t.wheelInputPx),handlerMs:Number(t.wheelHandlerMs.toFixed(2)),rafFlushes:t.wheelRafFlushes,rafMs:Number(t.wheelRafMs.toFixed(2))},rangeChanged:{calls:t.rangeChangedCalls,totalMs:Number(t.rangeChangedMs.toFixed(2))},rowContent:{calls:t.rowContentCalls,totalMs:Number(t.rowContentMs.toFixed(2)),avgMs:Number(i.toFixed(3)),maxMs:Number(t.rowContentMaxMs.toFixed(3))},cellRender:{calls:t.cellRenderCalls,totalMs:Number(t.cellRenderMs.toFixed(2)),avgMs:Number(f.toFixed(3)),maxMs:Number(t.cellRenderMaxMs.toFixed(3))}}),l.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}},[p]);I(()=>{if(!p||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let n=window.setInterval(()=>{Pe("interval")},1500);return()=>{window.clearInterval(n),Pe("cleanup")}},[Pe,p]);let Ge=U(()=>ve((n,t)=>{let r=m(null),i=m(0),f=m(null);return I(()=>{let e=r.current;if(!e)return;let x=w=>{let B=p?performance.now():0;if(w.shiftKey||Math.abs(w.deltaX)>Math.abs(w.deltaY))return;w.preventDefault();let C=w.deltaY;w.deltaMode===1?C*=40:w.deltaMode===2&&(C*=e.clientHeight),p&&(l.current.wheelEvents+=1,l.current.wheelInputPx+=C),i.current+=C,f.current===null&&(f.current=requestAnimationFrame(()=>{let Y=p?performance.now():0,N=Math.max(e.clientHeight*.4,160),d=Math.max(-N,Math.min(N,i.current));i.current=0,f.current=null,d!==0&&(e.scrollTop+=d),p&&(l.current.wheelRafFlushes+=1,l.current.wheelRafMs+=performance.now()-Y)}),p&&(l.current.wheelHandlerMs+=performance.now()-B))};return e.addEventListener("wheel",x,{passive:!1}),()=>{e.removeEventListener("wheel",x),f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),i.current=0}},[]),o(Qt,{detectInnerScroll:!0,track:en,...E,children:o(Xt,{component:L,...n,ref:e=>{r.current=e,typeof t=="function"?t(e):t&&(t.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:u?0:be,paddingTop:ue,paddingBottom:Se}}})})}),[]),He=U(()=>{if(q===!0)return"#f5f5f5";if(typeof q=="string")return q},[q]),[wt,Je]=Me(c),[Ct,vt]=Me(0);I(()=>{c&&Je(!0)},[c]);let Ue=H(()=>{Je(!1)},[]),Mt=wt,sn=c&&a.length>0,Ie=m(!1),Oe=m(-1),Ae=m(null),Be=m(null),[Tt,St]=Me(!1),me=H(()=>{let n=Be.current;n&&St(n.scrollHeight>n.clientHeight+1)},[]);I(()=>{let n=Be.current;if(!n||typeof ResizeObserver>"u")return;let t=new ResizeObserver(()=>me());return t.observe(n),()=>t.disconnect()},[me,y]);let Ne=m(v);Ne.current=v;let re=m(M);re.current=M;let ze=m(Ke);ze.current=Ke;let xe=U(()=>{let n=new Map,t=0;return s.forEach(r=>{r.pinned==="left"&&(n.set(String(r.id),t),t+=typeof r.width=="number"?r.width:0)}),n},[s]),G=H((n,t)=>{let r=xe.get(String(n.id));return r===void 0?{}:{position:"sticky",left:r,zIndex:t?3:1}},[xe]),ye=!!v,oe=m(!1),j=m({x:0,y:0});I(()=>{let n=t=>{let r=t.clientX-j.current.x,i=t.clientY-j.current.y;Math.sqrt(r*r+i*i)>Ye&&(oe.current=!0)};return document.addEventListener("mousemove",n),()=>{document.removeEventListener("mousemove",n)}},[]),I(()=>{let n=document.querySelector('[data-testid="virtuoso-scroller"]');n&&n.querySelectorAll(".MuiTableSortLabel-root").forEach(r=>{let i=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});r.dispatchEvent(i)})},[b]);let we=H(n=>{if(!O)return;O(n,b===n&&T==="asc"?"desc":"asc")},[O,b,T]),Rt=H(n=>{let t=p?performance.now():0;if(!D){p&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t);return}if(c&&a.length===0){p&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t);return}let r=a.length>=30,i=n>=a.length-1,f=Oe.current===a.length;if(i&&r&&!Ie.current&&!f){Ie.current=!0,Oe.current=a.length;let e=a.length;D(e,50)}p&&(l.current.rangeChangedCalls+=1,l.current.rangeChangedMs+=performance.now()-t)},[a.length,c,D,p]);I(()=>{c||(Ie.current=!1)},[c]),I(()=>{a.length===0&&vt(n=>n+1)},[a.length]);let Fe=m(a.length),Ve=m(void 0);I(()=>{let n=Fe.current,t=a.length,r=t>0?re.current?re.current(a[0],0):a[0]:void 0,i=Ve.current;if(t>n&&n>0){Fe.current=t,Ve.current=r;return}let f=t<n||n>0&&r!==i;f&&(Oe.current=-1),Ae.current&&t>0&&f&&Ae.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),Fe.current=t,Ve.current=r},[a]);let Ze=H(()=>{let n={},t=[];if(s.forEach(e=>{e.group?(n[e.group]||(n[e.group]=[]),n[e.group].push(e)):t.push(e)}),!(Object.keys(n).length>0))return o(se,{children:s.map(e=>o(K,{align:e.align||"left",...e.headerProps,style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...G(e,!0),...e.headerProps?.style},children:e.sortable?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:z(L,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>we(String(e.id)),children:[e.text,o(je,{active:b===e.id,direction:b===e.id?T:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:b===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 i=[...t.map(e=>o(K,{rowSpan:2,align:e.align||"left",...e.headerProps,style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...G(e,!0),...e.headerProps?.style},children:e.sortable&&O?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:z(L,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>we(String(e.id)),children:[e.text,o(je,{active:b===e.id,direction:b===e.id?T:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:b===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(n).map(([e,x])=>o(K,{align:"center",colSpan:x.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:e},e))],f=[...Object.values(n).flat().map(e=>o(K,{align:e.align||"left",...e.headerProps,style:{width:e.width,minWidth:e.width,...e.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...G(e,!0),...e.headerProps?.style},children:e.sortable&&O?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:z(L,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>we(String(e.id)),children:[e.text,o(je,{active:b===e.id,direction:b===e.id?T:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:b===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 z(Te,{children:[o(se,{children:i}),o(se,{children:f})]})},[s,b,T,we,O,W,G]),Qe=H((n,t)=>{let r=p?performance.now():0;if(!t){if(p){l.current.rowContentCalls+=1;let e=performance.now()-r;l.current.rowContentMs+=e,l.current.rowContentMaxMs=Math.max(l.current.rowContentMaxMs,e)}return null}let i=ke?ke(t,n):null;if(i!=null)return o(K,{colSpan:s.length,"data-vdt-pad":"",sx:[{padding:u?"0 14px":"8px 16px"},...Array.isArray(te)?te:te?[te]:[]],children:i});let f=s.map(e=>{let x=p?performance.now():0,w=e.render?e.render(t,n):String(t[e.id]||"");if(p){let d=performance.now()-x;l.current.cellRenderCalls+=1,l.current.cellRenderMs+=d,l.current.cellRenderMaxMs=Math.max(l.current.cellRenderMaxMs,d)}let B=xe.has(String(e.id)),C=e.cellPadding!==void 0,Y=e.rowSpan?e.rowSpan(t,n):1;if(Y<=0)return null;let N=e.onCellClick;return o(K,{align:e.align||"left",rowSpan:Y>1?Y:void 0,"data-vdt-pad":C?"":void 0,"data-vdt-pinned":B?"":void 0,"data-vdt-cell-click":N?"":void 0,onClick:N?d=>{let X=d.clientX-j.current.x,J=d.clientY-j.current.y;d.stopPropagation(),!(Math.sqrt(X*X+J*J)>Ye)&&N(t,n,d)}:void 0,style:{width:e.width,minWidth:e.width,...e.primary?{fontSize:15}:{},...e.style,...e.cellStyle?e.cellStyle(t,n):{},padding:C?e.cellPadding:"8px 16px",...G(e,!1)},children:w},String(e.id))});if(p){l.current.rowContentCalls+=1;let e=performance.now()-r;l.current.rowContentMs+=e,l.current.rowContentMaxMs=Math.max(l.current.rowContentMaxMs,e)}return o(Te,{children:f})},[s,p,ke,te,u,xe,G]),k=Re??s.some(n=>typeof n.footer=="function"),et=H(()=>{if(!k)return null;let n=[];for(let t=0;t<s.length;t+=1){let r=s[t],i=r.footerColSpan&&r.footerColSpan>1?Math.min(r.footerColSpan,s.length-t):1;n.push(o(K,{align:r.align||"left",colSpan:i>1?i:void 0,style:{...i>1?{}:{width:r.width,minWidth:r.width},...r.style,fontWeight:"bold",padding:u?"0 14px":"16px"},children:r.footer?r.footer(a):null},String(r.id))),t+=i-1}return o(se,{children:n})},[k,s,a,u]),tt=U(()=>({Scroller:Ge,Table:n=>o(jt,{...n,sx:{borderCollapse:"separate",tableLayout:Xe,marginRight:ee?"16px":0,...k?{height:"100%"}:{}}}),TableHead:ve((n,t)=>o(Kt,{...n,ref:t,sx:{userSelect:"none","& tr":{height:W,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:n=>{let{item:t,selected:r,"aria-selected":i,className:f,...e}=n,x=e["data-index"]??0,w=x%2===1,B=t&&re.current?re.current(t,x):x,C=!he&&h!==null&&h!==void 0&&B===h,Y=C&&R?typeof R=="function"?R(t,x):R:void 0,N=String(f??"").split(/\s+/).filter(d=>d!=="Mui-selected"&&d!=="Mui-focusVisible").join(" ");return o(se,{...e,"data-row-id":B!=null?String(B):void 0,className:N||void 0,selected:C,onMouseDown:d=>{oe.current=!1,j.current={x:d.clientX,y:d.clientY}},onContextMenu:d=>{t&&ze.current&&ze.current(t,x,d)},onClick:d=>{let X=d.clientX-j.current.x,J=d.clientY-j.current.y;if(Math.sqrt(X*X+J*J)>Ye||oe.current){d.preventDefault(),d.stopPropagation(),oe.current=!1;return}t&&Ne.current&&Ne.current(t,x),oe.current=!1},sx:[{userSelect:"none",...De?{"& > td":{height:ne}}:{height:ne,maxHeight:ne},boxSizing:"border-box",backgroundColor:w&&He?He:"transparent","& td:not([data-vdt-pad])":{padding:"8px 16px"},"& td":{boxSizing:"border-box",borderBottom:Q?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":ye&&!C?{backgroundColor:d=>{let X=d.palette.mode==="dark",$e=Ee??"#000000",_e=qe??.06;if(!Ee)return X?`rgba(255, 255, 255, ${_e})`:`rgba(0, 0, 0, ${_e})`;let Ce=$e.replace("#","").trim();if(Ce.length!==6)return $e;let It=parseInt(Ce.substring(0,2),16),Ot=parseInt(Ce.substring(2,4),16),At=parseInt(Ce.substring(4,6),16);return`rgba(${It}, ${Ot}, ${At}, ${_e})`}}:void 0,cursor:ye?"pointer":void 0},Y]})},TableBody:ve((n,t)=>{let{children:r,...i}=n;return z(Yt,{...i,ref:t,sx:k?{height:"100%"}:void 0,children:[r,k&&o("tr",{"aria-hidden":!0,style:{height:"100%"},children:o("td",{colSpan:s.length,style:{padding:0,border:0}})})]})}),TableFoot:ve((n,t)=>o(qt,{...n,ref:t,sx:[{"& tr":{height:$??S,maxHeight:$??S,boxSizing:"border-box"},"& td":{height:$??S,boxSizing:"border-box",backgroundColor:r=>r.palette.mode==="dark"?"#1e1e1e":"#ffffff",padding:"0 16px",color:"inherit",fontSize:"0.875rem",border:"none",boxShadow:`inset 0 1px 0 0 ${u?g.borderStrong:"#000000"}`}},...Array.isArray(_)?_:_?[_]:[]]}))}),[ye,he?null:h,R,S,He,Q,W,Ee,qe,Ge,$,_,k,u,g,s,Xe,ee,De]),kt=tt,ae=tt,Lt=ae.Table,Dt=ae.TableHead,Et=ae.TableBody,Pt=ae.TableRow,Ht=ae.TableFoot,nt=z(L,{sx:{position:"relative",height:y?"auto":"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:n=>n.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...yt??{},"& tbody td[data-vdt-pinned]":{backgroundColor:u?g.bg:Le.palette.background.paper},"& tbody td[data-vdt-cell-click]":{cursor:"pointer"},"& tbody td[data-vdt-cell-click]:hover":{backgroundColor:u?g.hoverBg:Le.palette.mode==="dark"?"rgba(255, 255, 255, 0.06)":"rgba(0, 0, 0, 0.04)"},...u&&ye?{"& tbody tr:hover td[data-vdt-pinned]":{backgroundColor:g.hoverBg}}:{},...u?{...ee?{border:`1px solid ${g.borderStrong}`,borderRadius:"4px"}:{"& table":{backgroundColor:g.bg}},overflow:"hidden","& thead tr th":{height:W,boxSizing:"border-box",padding:"0 14px !important",fontSize:13,fontWeight:"500 !important",color:g.headerColor,backgroundColor:`${g.bg} !important`,borderTop:"none",borderBottom:`1px solid ${g.borderStrong}`,borderRight:`1px solid ${g.border}`,"&:last-of-type":{borderRight:"none"}},"& tbody tr td:not([data-vdt-pad])":{padding:"0 14px !important"},"& tbody tr td":{fontSize:14,borderBottom:`1px solid ${g.border}`},...a.length>0&&(y||Tt||k)?{[`& tbody tr[data-index="${a.length-1}"] td`]:{borderBottom:"none"}}:{}}:{}},children:[y?o(L,{sx:{overflowX:"auto",width:"100%"},children:z(Lt,{children:[o(Dt,{children:Ze()}),o(Et,{children:a.map((n,t)=>o(Pt,{item:n,"data-index":t,children:Qe(t,n)},M?String(M(n,t)):t))}),k?o(Ht,{children:et()}):null]})}):o(Zt,{ref:Ae,data:a,totalCount:D?a.length+1:a.length,defaultItemHeight:ne,fixedItemHeight:De?void 0:ne,fixedHeaderContent:Ze,fixedFooterContent:k?et:void 0,itemContent:Qe,endReached:Rt,scrollerRef:n=>{Be.current=n instanceof HTMLElement?n:null,me()},totalListHeightChanged:me,style:{height:"100%"},increaseViewportBy:{top:ft,bottom:gt},overscan:mt,followOutput:!1,components:kt},Ct),a.length===0&&!c&&u&&typeof P=="string"&&o(L,{sx:{position:y?"static":"absolute",top:W,left:0,right:0,py:6,textAlign:"center",fontSize:14,color:g.emptyColor},children:P}),a.length===0&&!c&&!(u&&typeof P=="string")&&o(L,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof P=="string"?z(Te,{children:[o(L,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),o(Jt,{variant:"body1",sx:{color:"text.secondary"},children:P})]}):P}),Mt&&o(Te,{children:ge?o(ge,{visible:c,onComplete:Ue}):o(at,{visible:c,onComplete:Ue,size:40,indicator:o(st,{}),sx:{top:`${s.some(n=>n.group)?W*2:W}px`,bottom:`${k?$??S:0}px`},background:{show:a.length===0,opacity:.8}})})]}),rt=u&&ee?{paddingRight:be,paddingTop:lt,paddingBottom:lt}:{};return ce?o(Gt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:be,...rt,boxSizing:"border-box",height:y?"auto":"100%",minHeight:0,flex:y?"none":1,display:"flex",flexDirection:"column"},children:nt}):o(L,{className:"grow",style:{padding:0,paddingLeft:be,...rt,boxSizing:"border-box",height:y?"auto":"100%",minHeight:0,flex:y?"none":1,display:"flex",flexDirection:"column"},children:nt})}var on=Wt(rn);export{on as VirtualDataTable};
|
|
5
5
|
/**
|
|
6
6
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
7
7
|
*
|