@ehfuse/mui-virtual-data-table 1.2.1 → 1.3.0
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 +27 -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 +36 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -142,6 +142,15 @@ function App() {
|
|
|
142
142
|
renderFullWidthRow={(item, index) => ReactNode | null} // Group band row: one cell spanning all columns (null = normal row)
|
|
143
143
|
fullWidthRowSx={SxProps} // Style of the band row cell (background, padding)
|
|
144
144
|
onRowContextMenu={(item, index, event) => void}
|
|
145
|
+
|
|
146
|
+
// Optional - 1.3.0
|
|
147
|
+
pinnedRows={T[]} // Rows pinned under the header (always visible, same columns/cells/band rows)
|
|
148
|
+
pinnedRowsMaxHeight={number} // Max height of the pinned area in px — it scrolls on its own beyond that
|
|
149
|
+
pinnedRowsSx={SxProps} // Pinned area style (default: 1px strong bottom border)
|
|
150
|
+
resetScrollOnDataChange={boolean} // false: keep the scroll position when rows are removed (collapse groups); remount with key to reset
|
|
151
|
+
rowKeyFromId={boolean} // Use getRowId as the React key of rows (rows with inline editors)
|
|
152
|
+
onEndReached={() => void} // Fired every time the end is reached (no minimum / no same-length latch)
|
|
153
|
+
colorMode={"light" | "dark"} // notion colors independent of the MUI palette mode
|
|
145
154
|
/>
|
|
146
155
|
```
|
|
147
156
|
|
|
@@ -155,6 +164,24 @@ function App() {
|
|
|
155
164
|
{ id: "m1", text: "1월", cellPadding: "4px 0" } // body padding override
|
|
156
165
|
{ id: "t", text: "업무", cellStyle: (item) => ({ color: "#999" }) } // per-row cell style
|
|
157
166
|
{ id: "c", text: "열", headerProps: { draggable: true, onDrop } } // extra th attributes (drag to reorder, title…)
|
|
167
|
+
{ id: "who", text: "책임자", width: 110, colSpan: (item) => (item.isEvent ? 2 : 1) } // 1.3.0: merge right (the covered column is not drawn)
|
|
168
|
+
{ id: "title", text: "제목", minWidth: 220 } // 1.3.0: flexible column (no width) with a minimum — table min width = sum, scrolls sideways
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
Pinned rows example (1.3.0):
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
<VirtualDataTable
|
|
175
|
+
variant="notion"
|
|
176
|
+
data={rows} // without the pinned ones
|
|
177
|
+
pinnedRows={[{ kind: "band", label: "미확인" }, ...unconfirmed]}
|
|
178
|
+
pinnedRowsMaxHeight={49 * 6} // band + 5 rows, then it scrolls
|
|
179
|
+
renderFullWidthRow={(r) => (r.kind === "band" ? r.label : null)}
|
|
180
|
+
getRowId={(r) => r.id}
|
|
181
|
+
rowKeyFromId
|
|
182
|
+
resetScrollOnDataChange={false}
|
|
183
|
+
...
|
|
184
|
+
/>
|
|
158
185
|
```
|
|
159
186
|
|
|
160
187
|
notion defaults (1.2.0): rowHeight 48, header text 13px, selected row (`selectedRowId`) = `#dbeafe` + 3px `#3b82f6` left bar (dark values included),
|
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as De,useCallback as P,useMemo as G,useRef as b,useEffect as N,memo as rn,useState as Ee}from"react";import{Box as R,Table as on,TableBody as xt,TableCell as J,TableContainer as an,TableHead as sn,TableFooter as ln,TableRow as pe,TableSortLabel as Ue,Paper as dn,Typography as cn,useTheme as un}from"@mui/material";import{TableVirtuoso as pn}from"react-virtuoso";import{jsx as Je}from"react/jsx-runtime";import{useRef as ht,useState as Jt,useEffect as Ut}from"react";import{Box as Zt,CircularProgress as Qt}from"@mui/material";var ue=function(){return ue=Object.assign||function(u){for(var l,k=1,y=arguments.length;k<y;k++){l=arguments[k];for(var x in l)Object.prototype.hasOwnProperty.call(l,x)&&(u[x]=l[x])}return u},ue.apply(this,arguments)};function bt(a){var u=a.visible,l=a.onComplete,k=a.fadeoutDuration,y=k===void 0?200:k,x=a.exitDelay,ge=x===void 0?0:x,he=a.size,te=he===void 0?40:he,U=a.className,ne=a.style,z=a.sx,B=a.indicator,m=a.background,L=m===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:m,be=ht(void 0),$=ht(null),me=Jt(u),He=me[0],ye=me[1],xe=L.show,F=xe===void 0?!0:xe,V=L.color,O=V===void 0?"255, 255, 255":V,I=L.opacity,C=I===void 0?.9:I;if(Ut(function(){var _=be.current;if(_===!0&&u===!1&&$.current){var Y=$.current;Y.style.opacity="0",setTimeout(function(){ye(!1),l?.()},y+ge)}else u===!0&&(ye(!0),$.current&&($.current.style.opacity="1"));be.current=u},[u,l,y,ge]),!He)return null;var Ce=function(){return typeof B=="string"?Je("img",{src:B,alt:"Loading",style:{width:te,height:te}}):B||Je(Qt,{size:te})},Pe=function(){return F?O.startsWith("rgba")?{backgroundColor:O}:/^\d+,\s*\d+,\s*\d+$/.test(O)?{backgroundColor:"rgba(".concat(O,", ").concat(C,")")}:C!==1?{backgroundColor:O,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:O,opacity:C,zIndex:-1}}:{backgroundColor:O}:{backgroundColor:"transparent"}};return Je(Zt,{ref:$,className:U,style:ue({},ne),sx:ue(ue({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,opacity:u?1:0,transition:"opacity ".concat(y,"ms ease-out")},Pe()),z),children:Ce()})}import{Fragment as tn,jsx as mt,jsxs as nn}from"react/jsx-runtime";var en=`
|
|
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 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};
|
|
4
|
+
`;function yt({size:a=54}){return nn(tn,{children:[mt("style",{children:en}),mt("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:a,height:a}})]})}import fn from"@ehfuse/overlay-scrollbar";import{Fragment as fe,jsx as o,jsxs as A}from"react/jsx-runtime";var gn={alignment:"default",margin:0,radius:0},Ze=5,hn={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7",emptyColor:"#9b9a97",selectedBg:"#dbeafe",selectedBar:"#3b82f6"},Ct="12px",bn={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36",emptyColor:"#7d8590",selectedBg:"rgba(59, 130, 246, 0.22)",selectedBar:"#60a5fa"};function mn({data:a,loading:u=!1,columns:l,onRowClick:k,getRowId:y,selectedRowId:x,selectedRowSx:ge,rowHeight:he,columnHeight:te,striped:U,rowDivider:ne=!0,onSort:z,onLoadMore:B,sortBy:m,sortDirection:L,showPaper:be=!0,paddingX:$,paddingTop:me=0,paddingBottom:He=0,rowHoverColor:ye,rowHoverOpacity:xe,viewportBuffer:F,overscan:V,scrollbars:O,emptyMessage:I="NO DATA",autoHeight:C=!1,LoadingComponent:Ce,showFooter:Pe,footerHeight:_,footerSx:Y,variant:wt="default",framed:re=!0,rowHeightMode:vt="fixed",tableLayout:we="fixed",renderFullWidthRow:Ae,fullWidthRowSx:oe,onRowContextMenu:Qe,pinnedRows:ae,pinnedRowsMaxHeight:Be,pinnedRowsSx:ie,resetScrollOnDataChange:et=!0,rowKeyFromId:Tt=!1,onEndReached:tt,colorMode:Mt}){let c=wt==="notion",Oe=un(),p=(Mt??Oe.palette.mode)==="dark"?bn:hn,nt=(ae?.length??0)>0,j=te??(c?40:56),D=he??(c?48:50),ve=re?$??(c?"12px":"1rem"):0,Ie=vt==="auto",Ne=ye??(c?p.hoverBg:void 0),rt=xe??(c?1:void 0),St=Math.max(D*12,480),Rt=Math.max(D*12,480),kt=typeof F=="number"?F:F?.top??St,Lt=typeof F=="number"?F:F?.bottom??Rt,Dt=Math.max(D*8,420),Et=Math.max(D*10,520),Ht=typeof V=="number"?V:{main:V?.main??Dt,reverse:V?.reverse??Et},se=D+(ne?1:0),Pt=G(()=>c?{backgroundColor:p.selectedBg,"& > td:first-of-type":{boxShadow:`inset 3px 0 0 ${p.selectedBar}`},"& > td[data-vdt-pinned]":{backgroundColor:p.selectedBg}}:void 0,[c,p]),E=ge??Pt,Te=!E||typeof E!="function",At=G(()=>!Te||x===null||x===void 0||!E?null:{[`& tbody tr[data-row-id="${String(x).replace(/["\\]/g,"\\$&")}"]`]:E},[Te,x,E]),xn=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[g]=Ee(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),d=b({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=P(t=>{if(!g)return;let e=d.current;if(!(e.wheelEvents>0||e.rangeChangedCalls>0||e.rowContentCalls>0||e.cellRenderCalls>0))return;let s=e.rowContentCalls>0?e.rowContentMs/e.rowContentCalls:0,f=e.cellRenderCalls>0?e.cellRenderMs/e.cellRenderCalls:0;console.log("[VDT perf]",{reason:t,wheel:{events:e.wheelEvents,inputPx:Math.round(e.wheelInputPx),handlerMs:Number(e.wheelHandlerMs.toFixed(2)),rafFlushes:e.wheelRafFlushes,rafMs:Number(e.wheelRafMs.toFixed(2))},rangeChanged:{calls:e.rangeChangedCalls,totalMs:Number(e.rangeChangedMs.toFixed(2))},rowContent:{calls:e.rowContentCalls,totalMs:Number(e.rowContentMs.toFixed(2)),avgMs:Number(s.toFixed(3)),maxMs:Number(e.rowContentMaxMs.toFixed(3))},cellRender:{calls:e.cellRenderCalls,totalMs:Number(e.cellRenderMs.toFixed(2)),avgMs:Number(f.toFixed(3)),maxMs:Number(e.cellRenderMaxMs.toFixed(3))}}),d.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}},[g]);N(()=>{if(!g||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,g]);let ot=G(()=>De((t,e)=>{let r=b(null),s=b(0),f=b(null);return N(()=>{let n=r.current;if(!n)return;let i=w=>{let T=g?performance.now():0;if(w.shiftKey||Math.abs(w.deltaX)>Math.abs(w.deltaY))return;let v=w.target?.closest?.("[data-vdt-inner-scroll]");if(v&&n.contains(v)&&(w.deltaY<0?v.scrollTop>0:v.scrollTop+v.clientHeight<v.scrollHeight-1))return;w.preventDefault();let W=w.deltaY;w.deltaMode===1?W*=40:w.deltaMode===2&&(W*=n.clientHeight),g&&(d.current.wheelEvents+=1,d.current.wheelInputPx+=W),s.current+=W,f.current===null&&(f.current=requestAnimationFrame(()=>{let Q=g?performance.now():0,h=Math.max(n.clientHeight*.4,160),M=Math.max(-h,Math.min(h,s.current));s.current=0,f.current=null,M!==0&&(n.scrollTop+=M),g&&(d.current.wheelRafFlushes+=1,d.current.wheelRafMs+=performance.now()-Q)}),g&&(d.current.wheelHandlerMs+=performance.now()-T))};return n.addEventListener("wheel",i,{passive:!1}),()=>{n.removeEventListener("wheel",i),f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),s.current=0}},[]),o(fn,{detectInnerScroll:!0,track:gn,...O,children:o(an,{component:R,...t,ref:n=>{r.current=n,typeof e=="function"?e(n):e&&(e.current=n)},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:c?0:ve,paddingTop:me,paddingBottom:He}}})})}),[]),Fe=G(()=>{if(U===!0)return"#f5f5f5";if(typeof U=="string")return U},[U]),[Bt,at]=Ee(u),[Ot,It]=Ee(0);N(()=>{u&&at(!0)},[u]);let it=P(()=>{at(!1)},[]),Nt=Bt,Cn=u&&a.length>0,We=b(!1),$e=b(-1),Ve=b(null),_e=b(null),[zt,Ft]=Ee(!1),Me=P(()=>{let t=_e.current;t&&Ft(t.scrollHeight>t.clientHeight+1)},[]);N(()=>{let t=_e.current;if(!t||typeof ResizeObserver>"u")return;let e=new ResizeObserver(()=>Me());return e.observe(t),()=>e.disconnect()},[Me,C]);let Ye=b(k);Ye.current=k;let le=b(y);le.current=y;let je=b(Qe);je.current=Qe;let st=b(tt);st.current=tt;let lt=b(null),Se=G(()=>{let t=new Map,e=0;return l.forEach(r=>{r.pinned==="left"&&(t.set(String(r.id),e),e+=typeof r.width=="number"?r.width:0)}),t},[l]),Xe=G(()=>{if(l.some(t=>typeof t.minWidth=="number"))return l.reduce((t,e)=>t+(typeof e.width=="number"?e.width:typeof e.minWidth=="number"?e.minWidth:0),0)},[l]),Z=P((t,e)=>{let r=Se.get(String(t.id));return r===void 0?{}:{position:"sticky",left:r,zIndex:e?3:1}},[Se]),Re=!!k,de=b(!1),X=b({x:0,y:0});N(()=>{let t=e=>{let r=e.clientX-X.current.x,s=e.clientY-X.current.y;Math.sqrt(r*r+s*s)>Ze&&(de.current=!0)};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}},[]),N(()=>{let t=document.querySelector('[data-testid="virtuoso-scroller"]');t&&t.querySelectorAll(".MuiTableSortLabel-root").forEach(r=>{let s=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});r.dispatchEvent(s)})},[m]);let ke=P(t=>{if(!z)return;z(t,m===t&&L==="asc"?"desc":"asc")},[z,m,L]),Wt=P(t=>{let e=g?performance.now():0;if(st.current?.(),!B){g&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}if(u&&a.length===0){g&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}let r=a.length>=30,s=t>=a.length-1,f=$e.current===a.length;if(s&&r&&!We.current&&!f){We.current=!0,$e.current=a.length;let n=a.length;B(n,50)}g&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e)},[a.length,u,B,g]);N(()=>{u||(We.current=!1)},[u]),N(()=>{a.length===0&&It(t=>t+1)},[a.length]);let dt=b(et);dt.current=et;let Ke=b(a.length),qe=b(void 0);N(()=>{let t=Ke.current,e=a.length,r=e>0?le.current?le.current(a[0],0):a[0]:void 0,s=qe.current;if(e>t&&t>0){Ke.current=e,qe.current=r;return}let f=e<t||t>0&&r!==s;f&&($e.current=-1),Ve.current&&e>0&&f&&dt.current&&Ve.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),Ke.current=e,qe.current=r},[a]);let ct=P(()=>{let t={},e=[];if(l.forEach(n=>{n.group?(t[n.group]||(t[n.group]=[]),t[n.group].push(n)):e.push(n)}),!(Object.keys(t).length>0))return o(pe,{children:l.map(n=>o(J,{align:n.align||"left",...n.headerProps,style:{width:n.width,minWidth:n.width??n.minWidth,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Z(n,!0),...n.headerProps?.style},children:n.sortable?o("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:A(R,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ke(String(n.id)),children:[n.text,o(Ue,{active:m===n.id,direction:m===n.id?L:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:m===n.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)"}}})]})}):n.text},String(n.id)))});let s=[...e.map(n=>o(J,{rowSpan:2,align:n.align||"left",...n.headerProps,style:{width:n.width,minWidth:n.width,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Z(n,!0),...n.headerProps?.style},children:n.sortable&&z?o("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:A(R,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ke(String(n.id)),children:[n.text,o(Ue,{active:m===n.id,direction:m===n.id?L:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:m===n.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)"}}})]})}):n.text},String(n.id))),...Object.entries(t).map(([n,i])=>o(J,{align:"center",colSpan:i.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:n},n))],f=[...Object.values(t).flat().map(n=>o(J,{align:n.align||"left",...n.headerProps,style:{width:n.width,minWidth:n.width,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Z(n,!0),...n.headerProps?.style},children:n.sortable&&z?o("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:A(R,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ke(String(n.id)),children:[n.text,o(Ue,{active:m===n.id,direction:m===n.id?L:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:m===n.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)"}}})]})}):n.text},String(n.id)))];return A(fe,{children:[o(pe,{children:s}),o(pe,{children:f})]})},[l,m,L,ke,z,j,Z]),Le=P((t,e)=>{let r=g?performance.now():0;if(!e){if(g){d.current.rowContentCalls+=1;let i=performance.now()-r;d.current.rowContentMs+=i,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,i)}return null}let s=Ae?Ae(e,t):null;if(s!=null)return o(J,{colSpan:l.length,"data-vdt-pad":"",sx:[{padding:c?"0 14px":"8px 16px"},...Array.isArray(oe)?oe:oe?[oe]:[]],children:s});let f=0,n=l.map((i,w)=>{if(f>0)return f-=1,null;let T=i.colSpan?Math.max(1,Math.min(i.colSpan(e,t),l.length-w)):1;f=T-1;let v=g?performance.now():0,W=i.render?i.render(e,t):String(e[i.id]||"");if(g){let S=performance.now()-v;d.current.cellRenderCalls+=1,d.current.cellRenderMs+=S,d.current.cellRenderMaxMs=Math.max(d.current.cellRenderMaxMs,S)}let Q=Se.has(String(i.id)),h=i.cellPadding!==void 0,M=i.rowSpan?i.rowSpan(e,t):1;if(M<=0)return null;let K=i.onCellClick;return o(J,{align:i.align||"left",rowSpan:M>1?M:void 0,colSpan:T>1?T:void 0,"data-vdt-pad":h?"":void 0,"data-vdt-pinned":Q?"":void 0,"data-vdt-cell-click":K?"":void 0,onClick:K?S=>{let ee=S.clientX-X.current.x,q=S.clientY-X.current.y;S.stopPropagation(),!(Math.sqrt(ee*ee+q*q)>Ze)&&K(e,t,S)}:void 0,style:{...T>1?{}:{width:i.width,minWidth:i.width??i.minWidth},...i.primary?{fontSize:15}:{},...i.style,...i.cellStyle?i.cellStyle(e,t):{},padding:h?i.cellPadding:"8px 16px",...Z(i,!1)},children:W},String(i.id))});if(g){d.current.rowContentCalls+=1;let i=performance.now()-r;d.current.rowContentMs+=i,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,i)}return o(fe,{children:n})},[l,g,Ae,oe,c,Se,Z]),ut=P(()=>{let t=ct();if(!ae||ae.length===0)return t;let e=lt.current;return A(fe,{children:[t,o("tr",{"data-vdt-pinned-area":"",children:o("td",{colSpan:l.length,style:{padding:0,border:0},children:o(R,{"data-vdt-inner-scroll":"",sx:[{maxHeight:Be,overflowY:Be?"auto":"visible",overflowX:"hidden",scrollbarWidth:"thin",borderBottom:`1px solid ${c?p.borderStrong:"rgba(224, 224, 224, 1)"}`,"& tbody tr:last-of-type > td":{borderBottom:"none"}},...Array.isArray(ie)?ie:ie?[ie]:[]],children:A("table",{style:{width:"100%",tableLayout:we,borderCollapse:"separate",borderSpacing:0},children:[o("colgroup",{children:l.map(r=>o("col",{style:{width:r.width,minWidth:r.width??r.minWidth}},String(r.id)))}),o(xt,{children:ae.map((r,s)=>e?o(e,{item:r,"data-index":s,"data-vdt-pinned-row":"",children:Le(s,r)},y?String(y(r,s)):`p${s}`):null)})]})})})})]})},[ct,ae,Be,ie,l,Le,we,y,c,p]),H=Pe??l.some(t=>typeof t.footer=="function"),pt=P(()=>{if(!H)return null;let t=[];for(let e=0;e<l.length;e+=1){let r=l[e],s=r.footerColSpan&&r.footerColSpan>1?Math.min(r.footerColSpan,l.length-e):1;t.push(o(J,{align:r.align||"left",colSpan:s>1?s:void 0,style:{...s>1?{}:{width:r.width,minWidth:r.width},...r.style,fontWeight:"bold",padding:c?"0 14px":"16px"},children:r.footer?r.footer(a):null},String(r.id))),e+=s-1}return o(pe,{children:t})},[H,l,a,c]),Ge=G(()=>({Scroller:ot,Table:t=>o(on,{...t,sx:{borderCollapse:"separate",tableLayout:we,...Xe?{minWidth:Xe}:{},marginRight:re?"16px":0,...H?{height:"100%"}:{}}}),TableHead:De((t,e)=>o(sn,{...t,ref:e,sx:{userSelect:"none","& > tr":{height:j,"& > th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:t=>{let{item:e,selected:r,"aria-selected":s,className:f,...n}=t,i=n["data-index"]??0,w=i%2===1,T=e&&le.current?le.current(e,i):i,v=!Te&&x!==null&&x!==void 0&&T===x,W=v&&E?typeof E=="function"?E(e,i):E:void 0,Q=String(f??"").split(/\s+/).filter(h=>h!=="Mui-selected"&&h!=="Mui-focusVisible").join(" ");return o(pe,{...n,"data-row-id":T!=null?String(T):void 0,className:Q||void 0,selected:v,onMouseDown:h=>{de.current=!1,X.current={x:h.clientX,y:h.clientY}},onContextMenu:h=>{e&&je.current&&je.current(e,i,h)},onClick:h=>{let M=h.clientX-X.current.x,K=h.clientY-X.current.y;if(Math.sqrt(M*M+K*K)>Ze||de.current){h.preventDefault(),h.stopPropagation(),de.current=!1;return}e&&Ye.current&&Ye.current(e,i),de.current=!1},sx:[{userSelect:"none",...Ie?{"& > td":{height:se}}:{height:se,maxHeight:se},boxSizing:"border-box",backgroundColor:w&&Fe?Fe:"transparent","& td:not([data-vdt-pad])":{padding:"8px 16px"},"& td":{boxSizing:"border-box",borderBottom:ne?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":Re&&!v?{backgroundColor:h=>{let M=h.palette.mode==="dark",S=Ne??"#000000",ee=rt??.06;if(!Ne)return M?`rgba(255, 255, 255, ${ee})`:`rgba(0, 0, 0, ${ee})`;let q=S.replace("#","").trim();if(q.length!==6)return S;let Kt=parseInt(q.substring(0,2),16),qt=parseInt(q.substring(2,4),16),Gt=parseInt(q.substring(4,6),16);return`rgba(${Kt}, ${qt}, ${Gt}, ${ee})`}}:void 0,cursor:Re?"pointer":void 0},W]})},TableBody:De((t,e)=>{let{children:r,...s}=t;return A(xt,{...s,ref:e,sx:H?{height:"100%"}:void 0,children:[r,H&&o("tr",{"aria-hidden":!0,style:{height:"100%"},children:o("td",{colSpan:l.length,style:{padding:0,border:0}})})]})}),TableFoot:De((t,e)=>o(ln,{...t,ref:e,sx:[{"& tr":{height:_??D,maxHeight:_??D,boxSizing:"border-box"},"& td":{height:_??D,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 ${c?p.borderStrong:"#000000"}`}},...Array.isArray(Y)?Y:Y?[Y]:[]]}))}),[Re,Te?null:x,E,D,Fe,ne,j,Ne,rt,ot,_,Y,H,c,p,l,we,re,Ie,Xe]);lt.current=Ge.TableRow;let $t=Ge,ce=Ge,Vt=ce.Table,_t=ce.TableHead,Yt=ce.TableBody,jt=ce.TableRow,Xt=ce.TableFoot,ft=A(R,{sx:{position:"relative",height:C?"auto":"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:t=>c?`${p.bg} !important`:t.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...At??{},"& tbody td[data-vdt-pinned]":{backgroundColor:c?p.bg:Oe.palette.background.paper},"& tbody td[data-vdt-cell-click]":{cursor:"pointer"},"& tbody td[data-vdt-cell-click]:hover":{backgroundColor:c?p.hoverBg:Oe.palette.mode==="dark"?"rgba(255, 255, 255, 0.06)":"rgba(0, 0, 0, 0.04)"},...c&&Re?{"& tbody tr:hover td[data-vdt-pinned]":{backgroundColor:p.hoverBg}}:{},...c?{...re?{border:`1px solid ${p.borderStrong}`,borderRadius:"4px"}:{"& table":{backgroundColor:p.bg}},overflow:"hidden","& thead tr th":{height:j,boxSizing:"border-box",padding:"0 14px !important",fontSize:13,fontWeight:"500 !important",color:p.headerColor,backgroundColor:`${p.bg} !important`,borderTop:"none",borderBottom:`1px solid ${p.borderStrong}`,borderRight:`1px solid ${p.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 ${p.border}`},...a.length>0&&(C||zt||H)?{[`& tbody tr[data-index="${a.length-1}"]:not([data-vdt-pinned-row]) td`]:{borderBottom:"none"}}:{}}:{}},children:[C?o(R,{sx:{overflowX:"auto",width:"100%"},children:A(Vt,{children:[o(_t,{children:ut()}),o(Yt,{children:a.map((t,e)=>o(jt,{item:t,"data-index":e,children:Le(e,t)},y?String(y(t,e)):e))}),H?o(Xt,{children:pt()}):null]})}):o(pn,{ref:Ve,data:a,totalCount:B?a.length+1:a.length,defaultItemHeight:se,fixedItemHeight:Ie?void 0:se,fixedHeaderContent:ut,fixedFooterContent:H?pt:void 0,itemContent:Le,computeItemKey:Tt&&y?(t,e)=>e?y(e,t):`vdt-${t}`:void 0,endReached:Wt,scrollerRef:t=>{_e.current=t instanceof HTMLElement?t:null,Me()},totalListHeightChanged:Me,style:{height:"100%"},increaseViewportBy:{top:kt,bottom:Lt},overscan:Ht,followOutput:!1,components:$t},Ot),a.length===0&&!u&&!nt&&c&&typeof I=="string"&&o(R,{sx:{position:C?"static":"absolute",top:j,left:0,right:0,py:6,textAlign:"center",fontSize:14,color:p.emptyColor},children:I}),a.length===0&&!u&&!nt&&!(c&&typeof I=="string")&&o(R,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof I=="string"?A(fe,{children:[o(R,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),o(cn,{variant:"body1",sx:{color:"text.secondary"},children:I})]}):I}),Nt&&o(fe,{children:Ce?o(Ce,{visible:u,onComplete:it}):o(bt,{visible:u,onComplete:it,size:40,indicator:o(yt,{}),sx:{top:`${l.some(t=>t.group)?j*2:j}px`,bottom:`${H?_??D:0}px`},background:{show:a.length===0,opacity:.8}})})]}),gt=c&&re?{paddingRight:ve,paddingTop:Ct,paddingBottom:Ct}:{};return be?o(dn,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:ve,...gt,boxSizing:"border-box",height:C?"auto":"100%",minHeight:0,flex:C?"none":1,display:"flex",flexDirection:"column"},children:ft}):o(R,{className:"grow",style:{padding:0,paddingLeft:ve,...gt,boxSizing:"border-box",height:C?"auto":"100%",minHeight:0,flex:C?"none":1,display:"flex",flexDirection:"column"},children:ft})}var yn=rn(mn);export{yn as VirtualDataTable};
|
|
5
5
|
/**
|
|
6
6
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
7
7
|
*
|