@ehfuse/mui-virtual-data-table 1.3.2 → 1.4.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 +23 -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 +32 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -152,6 +152,10 @@ function App() {
|
|
|
152
152
|
rowKeyFromId={boolean} // Use getRowId as the React key of rows (rows with inline editors)
|
|
153
153
|
onEndReached={() => void} // Fired every time the end is reached (no minimum / no same-length latch)
|
|
154
154
|
colorMode={"light" | "dark"} // notion colors independent of the MUI palette mode
|
|
155
|
+
|
|
156
|
+
// Optional - 1.4.0 header context menu (right-click on th never shows the browser menu)
|
|
157
|
+
onSortClear={() => void} // adds "정렬 풀기" to the header menu (and re-picking the active direction clears)
|
|
158
|
+
onHeaderContextMenu={(column, event) => boolean | void} // custom header menu — return true or preventDefault() to skip the built-in one
|
|
155
159
|
/>
|
|
156
160
|
```
|
|
157
161
|
|
|
@@ -169,6 +173,25 @@ function App() {
|
|
|
169
173
|
{ id: "title", text: "제목", minWidth: 220 } // 1.3.0: flexible column (no width) with a minimum — table min width = sum, scrolls sideways
|
|
170
174
|
```
|
|
171
175
|
|
|
176
|
+
Header context menu (1.4.0) — right-click a header cell:
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
// sort items appear for sortable columns when onSort is given
|
|
180
|
+
{ id: "name", text: "이름", sortable: true }
|
|
181
|
+
// filter checklist (multi by default; filterMultiple: false = pick one)
|
|
182
|
+
{
|
|
183
|
+
id: "status", text: "상태",
|
|
184
|
+
filterOptions: [{ value: "open", label: "진행" }, { value: "done", label: "완료" }],
|
|
185
|
+
filterValues: status, // string[] — non-empty → header turns primary + filter icon
|
|
186
|
+
onFilterChange: (values) => setStatus(values),
|
|
187
|
+
}
|
|
188
|
+
{ id: "memo", text: "메모", headerMenu: false } // no menu on this column (browser menu still blocked)
|
|
189
|
+
{ id: "due", text: <MyHeader />, sortMenu: true } // 1.4.1: sort items in the menu without VDT's sort label/click (custom-drawn header)
|
|
190
|
+
|
|
191
|
+
// open your own header menu instead
|
|
192
|
+
<VirtualDataTable onHeaderContextMenu={(col, e) => (col.id === "owner" ? (openOwnerMenu(e), true) : false)} … />
|
|
193
|
+
```
|
|
194
|
+
|
|
172
195
|
Pinned rows example (1.3.0):
|
|
173
196
|
|
|
174
197
|
```tsx
|
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as Ne,useCallback as E,useMemo as G,useRef as m,useEffect as N,memo as vn,useState as ye}from"react";import{Box as S,Table as wn,TableBody as Pt,TableCell as J,TableContainer as Mn,TableHead as Tn,TableFooter as Sn,TableRow as Ce,TableSortLabel as lt,Menu as Rn,MenuItem as ve,Divider as zt,SvgIcon as kn,Paper as Ln,Typography as Dn,useTheme as En}from"@mui/material";import{TableVirtuoso as Hn}from"react-virtuoso";import{jsx as it}from"react/jsx-runtime";import{useRef as Dt,useState as hn,useEffect as gn}from"react";import{Box as bn,CircularProgress as mn}from"@mui/material";var xe=function(){return xe=Object.assign||function(u){for(var s,B=1,v=arguments.length;B<v;B++){s=arguments[B];for(var w in s)Object.prototype.hasOwnProperty.call(s,w)&&(u[w]=s[w])}return u},xe.apply(this,arguments)};function Et(i){var u=i.visible,s=i.onComplete,B=i.fadeoutDuration,v=B===void 0?200:B,w=i.exitDelay,Te=w===void 0?0:w,Se=i.size,ne=Se===void 0?40:Se,U=i.className,re=i.style,D=i.sx,V=i.indicator,oe=i.background,W=oe===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:oe,C=Dt(void 0),k=Dt(null),Re=hn(u),Ve=Re[0],ke=Re[1],Le=W.show,We=Le===void 0?!0:Le,De=W.color,M=De===void 0?"255, 255, 255":De,_=W.opacity,ae=_===void 0?.9:_;if(gn(function(){var Ee=C.current;if(Ee===!0&&u===!1&&k.current){var $e=k.current;$e.style.opacity="0",setTimeout(function(){ke(!1),s?.()},v+Te)}else u===!0&&(ke(!0),k.current&&(k.current.style.opacity="1"));C.current=u},[u,s,v,Te]),!Ve)return null;var $=function(){return typeof V=="string"?it("img",{src:V,alt:"Loading",style:{width:ne,height:ne}}):V||it(mn,{size:ne})},H=function(){return We?M.startsWith("rgba")?{backgroundColor:M}:/^\d+,\s*\d+,\s*\d+$/.test(M)?{backgroundColor:"rgba(".concat(M,", ").concat(ae,")")}:ae!==1?{backgroundColor:M,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:M,opacity:ae,zIndex:-1}}:{backgroundColor:M}:{backgroundColor:"transparent"}};return it(bn,{ref:k,className:U,style:xe({},re),sx:xe(xe({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(v,"ms ease-out")},H()),D),children:$()})}import{Fragment as yn,jsx as Ht,jsxs as Cn}from"react/jsx-runtime";var xn=`
|
|
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 yt({size:a=54}){return rn(nn,{children:[mt("style",{children:tn}),mt("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:a,height:a}})]})}import gn from"@ehfuse/overlay-scrollbar";import{Fragment as fe,jsx as o,jsxs as A}from"react/jsx-runtime";var hn={alignment:"default",margin:0,radius:0},Ze=5,bn={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7",emptyColor:"#9b9a97",selectedBg:"#dbeafe",selectedBar:"#3b82f6"},Ct="12px",mn={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36",emptyColor:"#7d8590",selectedBg:"rgba(59, 130, 246, 0.22)",selectedBar:"#60a5fa"};function yn({data:a,loading:u=!1,columns:l,onRowClick:k,getRowId:y,selectedRowId:x,selectedRowSx:ge,rowHeight:he,columnHeight:ne,striped:U,rowDivider:re=!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:I,emptyMessage:O="NO DATA",autoHeight:C=!1,LoadingComponent:Ce,showFooter:Pe,footerHeight:_,footerSx:Y,variant:wt="default",framed:Z=!0,headerTopBorder:vt=!1,rowHeightMode:Tt="fixed",tableLayout:we="fixed",renderFullWidthRow:Ae,fullWidthRowSx:oe,onRowContextMenu:Qe,pinnedRows:ae,pinnedRowsMaxHeight:Be,pinnedRowsSx:ie,resetScrollOnDataChange:et=!0,rowKeyFromId:Mt=!1,onEndReached:tt,colorMode:St}){let c=wt==="notion",Ie=pn(),p=(St??Ie.palette.mode)==="dark"?mn:bn,nt=(ae?.length??0)>0,j=ne??(c?40:56),D=he??(c?48:50),ve=Z?$??(c?"12px":"1rem"):0,Oe=Tt==="auto",Ne=ye??(c?p.hoverBg:void 0),rt=xe??(c?1:void 0),Rt=Math.max(D*12,480),kt=Math.max(D*12,480),Lt=typeof F=="number"?F:F?.top??Rt,Dt=typeof F=="number"?F:F?.bottom??kt,Et=Math.max(D*8,420),Ht=Math.max(D*10,520),Pt=typeof V=="number"?V:{main:V?.main??Et,reverse:V?.reverse??Ht},se=D+(re?1:0),At=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??At,Te=!E||typeof E!="function",Bt=G(()=>!Te||x===null||x===void 0||!E?null:{[`& tbody tr[data-row-id="${String(x).replace(/["\\]/g,"\\$&")}"]`]:E},[Te,x,E]),Cn=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 ee=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()-ee)}),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(gn,{detectInnerScroll:!0,track:hn,...I,children:o(sn,{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]),[It,at]=Ee(u),[Ot,Nt]=Ee(0);N(()=>{u&&at(!0)},[u]);let it=P(()=>{at(!1)},[]),zt=It,wn=u&&a.length>0,We=b(!1),$e=b(-1),Ve=b(null),_e=b(null),[Ft,Wt]=Ee(!1),Me=P(()=>{let t=_e.current;t&&Wt(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]),Ke=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]),Q=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),K=b({x:0,y:0});N(()=>{let t=e=>{let r=e.clientX-K.current.x,s=e.clientY-K.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]),$t=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&&Nt(t=>t+1)},[a.length]);let dt=b(et);dt.current=et;let Xe=b(a.length),qe=b(void 0);N(()=>{let t=Xe.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){Xe.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"}),Xe.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",...Q(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",...Q(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",...Q(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,Q]),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 ee=Se.has(String(i.id)),h=i.cellPadding!==void 0,M=i.rowSpan?i.rowSpan(e,t):1;if(M<=0)return null;let X=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":ee?"":void 0,"data-vdt-cell-click":X?"":void 0,onClick:X?S=>{let te=S.clientX-K.current.x,q=S.clientY-K.current.y;S.stopPropagation(),!(Math.sqrt(te*te+q*q)>Ze)&&X(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",...Q(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,Q]),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(an,{...t,sx:{borderCollapse:"separate",tableLayout:we,...Ke?{minWidth:Ke}:{},marginRight:Z?"16px":0,...H?{height:"100%"}:{}}}),TableHead:De((t,e)=>o(ln,{...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,ee=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:ee||void 0,selected:v,onMouseDown:h=>{de.current=!1,K.current={x:h.clientX,y:h.clientY}},onContextMenu:h=>{e&&je.current&&je.current(e,i,h)},onClick:h=>{let M=h.clientX-K.current.x,X=h.clientY-K.current.y;if(Math.sqrt(M*M+X*X)>Ze||de.current){h.preventDefault(),h.stopPropagation(),de.current=!1;return}e&&Ye.current&&Ye.current(e,i),de.current=!1},sx:[{userSelect:"none",...Oe?{"& > 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:re?"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",te=rt??.06;if(!Ne)return M?`rgba(255, 255, 255, ${te})`:`rgba(0, 0, 0, ${te})`;let q=S.replace("#","").trim();if(q.length!==6)return S;let qt=parseInt(q.substring(0,2),16),Gt=parseInt(q.substring(2,4),16),Jt=parseInt(q.substring(4,6),16);return`rgba(${qt}, ${Gt}, ${Jt}, ${te})`}}: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(dn,{...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,re,j,Ne,rt,ot,_,Y,H,c,p,l,we,Z,Oe,Ke]);lt.current=Ge.TableRow;let Vt=Ge,ce=Ge,_t=ce.Table,Yt=ce.TableHead,jt=ce.TableBody,Kt=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"},...Bt??{},"& tbody td[data-vdt-pinned]":{backgroundColor:c?p.bg:Ie.palette.background.paper},"& tbody td[data-vdt-cell-click]":{cursor:"pointer"},"& tbody td[data-vdt-cell-click]:hover":{backgroundColor:c?p.hoverBg:Ie.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?{...Z?{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:!Z&&vt?`1px solid ${p.borderStrong}`:"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||Ft||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(_t,{children:[o(Yt,{children:ut()}),o(jt,{children:a.map((t,e)=>o(Kt,{item:t,"data-index":e,children:Le(e,t)},y?String(y(t,e)):e))}),H?o(Xt,{children:pt()}):null]})}):o(fn,{ref:Ve,data:a,totalCount:B?a.length+1:a.length,defaultItemHeight:se,fixedItemHeight:Oe?void 0:se,fixedHeaderContent:ut,fixedFooterContent:H?pt:void 0,itemContent:Le,...Mt&&y?{computeItemKey:(t,e)=>e?y(e,t):`vdt-${t}`}:{},endReached:$t,scrollerRef:t=>{_e.current=t instanceof HTMLElement?t:null,Me()},totalListHeightChanged:Me,style:{height:"100%"},increaseViewportBy:{top:Lt,bottom:Dt},overscan:Pt,followOutput:!1,components:Vt},Ot),a.length===0&&!u&&!nt&&c&&typeof O=="string"&&o(R,{sx:{position:C?"static":"absolute",top:j,left:0,right:0,py:6,textAlign:"center",fontSize:14,color:p.emptyColor},children:O}),a.length===0&&!u&&!nt&&!(c&&typeof O=="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 O=="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(un,{variant:"body1",sx:{color:"text.secondary"},children:O})]}):O}),zt&&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&&Z?{paddingRight:ve,paddingTop:Ct,paddingBottom:Ct}:{};return be?o(cn,{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 xn=on(yn);export{xn as VirtualDataTable};
|
|
4
|
+
`;function It({size:i=54}){return Cn(yn,{children:[Ht("style",{children:xn}),Ht("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:i,height:i}})]})}import In from"@ehfuse/overlay-scrollbar";import{Fragment as Me,jsx as r,jsxs as R}from"react/jsx-runtime";var Pn={alignment:"default",margin:0,radius:0},st=5,zn={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7",emptyColor:"#9b9a97",selectedBg:"#dbeafe",selectedBar:"#3b82f6"},Bt="12px",Bn={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36",emptyColor:"#7d8590",selectedBg:"rgba(59, 130, 246, 0.22)",selectedBar:"#60a5fa"},te={asc:"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z",desc:"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",checked:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",unchecked:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z",check:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",filter:"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"};function we({d:i,size:u=18,color:s}){return r(kn,{sx:{fontSize:u,flexShrink:0,color:s},children:r("path",{d:i})})}function Ot(i){return!!(i.filterOptions&&i.onFilterChange)}function On({data:i,loading:u=!1,columns:s,onRowClick:B,getRowId:v,selectedRowId:w,selectedRowSx:Te,rowHeight:Se,columnHeight:ne,striped:U,rowDivider:re=!0,onSort:D,onSortClear:V,onHeaderContextMenu:oe,onLoadMore:W,sortBy:C,sortDirection:k,showPaper:Re=!0,paddingX:Ve,paddingTop:ke=0,paddingBottom:Le=0,rowHoverColor:We,rowHoverOpacity:De,viewportBuffer:M,overscan:_,scrollbars:ae,emptyMessage:$="NO DATA",autoHeight:H=!1,LoadingComponent:Ee,showFooter:$e,footerHeight:ie,footerSx:le,variant:At="default",framed:Z=!0,headerTopBorder:Ft=!1,rowHeightMode:Nt="fixed",tableLayout:He="fixed",renderFullWidthRow:_e,fullWidthRowSx:se,onRowContextMenu:ct,pinnedRows:ce,pinnedRowsMaxHeight:Ye,pinnedRowsSx:de,resetScrollOnDataChange:dt=!0,rowKeyFromId:Vt=!1,onEndReached:ut,colorMode:Wt}){let p=At==="notion",je=En(),h=(Wt??je.palette.mode)==="dark"?Bn:zn,pt=(ce?.length??0)>0,Y=ne??(p?40:56),O=Se??(p?48:50),Ie=Z?Ve??(p?"12px":"1rem"):0,Xe=Nt==="auto",Ke=We??(p?h.hoverBg:void 0),ft=De??(p?1:void 0),$t=Math.max(O*12,480),_t=Math.max(O*12,480),Yt=typeof M=="number"?M:M?.top??$t,jt=typeof M=="number"?M:M?.bottom??_t,Xt=Math.max(O*8,420),Kt=Math.max(O*10,520),qt=typeof _=="number"?_:{main:_?.main??Xt,reverse:_?.reverse??Kt},ue=O+(re?1:0),Gt=G(()=>p?{backgroundColor:h.selectedBg,"& > td:first-of-type":{boxShadow:`inset 3px 0 0 ${h.selectedBar}`},"& > td[data-vdt-pinned]":{backgroundColor:h.selectedBg}}:void 0,[p,h]),A=Te??Gt,Pe=!A||typeof A!="function",Jt=G(()=>!Pe||w===null||w===void 0||!A?null:{[`& tbody tr[data-row-id="${String(w).replace(/["\\]/g,"\\$&")}"]`]:A},[Pe,w,A]),Fn=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[b]=ye(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),d=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}),qe=E(t=>{if(!b)return;let e=d.current;if(!(e.wheelEvents>0||e.rangeChangedCalls>0||e.rowContentCalls>0||e.cellRenderCalls>0))return;let l=e.rowContentCalls>0?e.rowContentMs/e.rowContentCalls:0,c=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(l.toFixed(3)),maxMs:Number(e.rowContentMaxMs.toFixed(3))},cellRender:{calls:e.cellRenderCalls,totalMs:Number(e.cellRenderMs.toFixed(2)),avgMs:Number(c.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}},[b]);N(()=>{if(!b||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let t=window.setInterval(()=>{qe("interval")},1500);return()=>{window.clearInterval(t),qe("cleanup")}},[qe,b]);let ht=G(()=>Ne((t,e)=>{let o=m(null),l=m(0),c=m(null);return N(()=>{let n=o.current;if(!n)return;let a=y=>{let L=b?performance.now():0;if(y.shiftKey||Math.abs(y.deltaX)>Math.abs(y.deltaY))return;let x=y.target?.closest?.("[data-vdt-inner-scroll]");if(x&&n.contains(x)&&(y.deltaY<0?x.scrollTop>0:x.scrollTop+x.clientHeight<x.scrollHeight-1))return;y.preventDefault();let f=y.deltaY;y.deltaMode===1?f*=40:y.deltaMode===2&&(f*=n.clientHeight),b&&(d.current.wheelEvents+=1,d.current.wheelInputPx+=f),l.current+=f,c.current===null&&(c.current=requestAnimationFrame(()=>{let T=b?performance.now():0,g=Math.max(n.clientHeight*.4,160),P=Math.max(-g,Math.min(g,l.current));l.current=0,c.current=null,P!==0&&(n.scrollTop+=P),b&&(d.current.wheelRafFlushes+=1,d.current.wheelRafMs+=performance.now()-T)}),b&&(d.current.wheelHandlerMs+=performance.now()-L))};return n.addEventListener("wheel",a,{passive:!1}),()=>{n.removeEventListener("wheel",a),c.current!==null&&(cancelAnimationFrame(c.current),c.current=null),l.current=0}},[]),r(In,{detectInnerScroll:!0,track:Pn,...ae,children:r(Mn,{component:S,...t,ref:n=>{o.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:p?0:Ie,paddingTop:ke,paddingBottom:Le}}})})}),[]),Ge=G(()=>{if(U===!0)return"#f5f5f5";if(typeof U=="string")return U},[U]),[Ut,gt]=ye(u),[Zt,Qt]=ye(0);N(()=>{u&>(!0)},[u]);let bt=E(()=>{gt(!1)},[]),en=Ut,Nn=u&&i.length>0,Je=m(!1),Ue=m(-1),Ze=m(null),Qe=m(null),[tn,nn]=ye(!1),ze=E(()=>{let t=Qe.current;t&&nn(t.scrollHeight>t.clientHeight+1)},[]);N(()=>{let t=Qe.current;if(!t||typeof ResizeObserver>"u")return;let e=new ResizeObserver(()=>ze());return e.observe(t),()=>e.disconnect()},[ze,H]);let et=m(B);et.current=B;let pe=m(v);pe.current=v;let tt=m(ct);tt.current=ct;let mt=m(ut);mt.current=ut;let xt=m(null),Be=G(()=>{let t=new Map,e=0;return s.forEach(o=>{o.pinned==="left"&&(t.set(String(o.id),e),e+=typeof o.width=="number"?o.width:0)}),t},[s]),nt=G(()=>{if(s.some(t=>typeof t.minWidth=="number"))return s.reduce((t,e)=>t+(typeof e.width=="number"?e.width:typeof e.minWidth=="number"?e.minWidth:0),0)},[s]),Q=E((t,e)=>{let o=Be.get(String(t.id));return o===void 0?{}:{position:"sticky",left:o,zIndex:e?3:1}},[Be]),Oe=!!B,fe=m(!1),j=m({x:0,y:0});N(()=>{let t=e=>{let o=e.clientX-j.current.x,l=e.clientY-j.current.y;Math.sqrt(o*o+l*l)>st&&(fe.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(o=>{let l=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});o.dispatchEvent(l)})},[C]);let Ae=E(t=>{if(!D)return;D(t,C===t&&k==="asc"?"desc":"asc")},[D,C,k]),[he,yt]=ye(null),Ct=m(oe);Ct.current=oe;let vt=m(D);vt.current=D;let ge=E((t,e)=>{if(!t){e.preventDefault();return}t.headerProps?.onContextMenu?.(e);let o=e.defaultPrevented;if(o||(o=Ct.current?.(t,e)===!0||e.defaultPrevented),e.preventDefault(),o||t.headerMenu===!1||!!!((t.sortMenu??t.sortable)&&vt.current)&&!Ot(t))return;let c=e.currentTarget.getBoundingClientRect();yt({colId:String(t.id),x:e.clientX,y:c.bottom})},[]),X=E(t=>t.filterValues&&t.filterValues.length>0?R(S,{component:"span",sx:{display:"inline-flex",alignItems:"center",gap:.5,maxWidth:"100%",color:"primary.main",fontWeight:600,verticalAlign:"middle"},children:[r(S,{component:"span",sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.text}),r(we,{d:te.filter,size:16})]}):t.text,[]),rn=E(t=>{let e=b?performance.now():0;if(mt.current?.(),!W){b&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}if(u&&i.length===0){b&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}let o=i.length>=30,l=t>=i.length-1,c=Ue.current===i.length;if(l&&o&&!Je.current&&!c){Je.current=!0,Ue.current=i.length;let n=i.length;W(n,50)}b&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e)},[i.length,u,W,b]);N(()=>{u||(Je.current=!1)},[u]),N(()=>{i.length===0&&Qt(t=>t+1)},[i.length]);let wt=m(dt);wt.current=dt;let rt=m(i.length),ot=m(void 0);N(()=>{let t=rt.current,e=i.length,o=e>0?pe.current?pe.current(i[0],0):i[0]:void 0,l=ot.current;if(e>t&&t>0){rt.current=e,ot.current=o;return}let c=e<t||t>0&&o!==l;c&&(Ue.current=-1),Ze.current&&e>0&&c&&wt.current&&Ze.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),rt.current=e,ot.current=o},[i]);let Mt=E(()=>{let t={},e=[];if(s.forEach(n=>{n.group?(t[n.group]||(t[n.group]=[]),t[n.group].push(n)):e.push(n)}),!(Object.keys(t).length>0))return r(Ce,{children:s.map(n=>r(J,{align:n.align||"left",...n.headerProps,onContextMenu:a=>ge(n,a),style:{width:n.width,minWidth:n.width??n.minWidth,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Q(n,!0),...n.headerProps?.style},children:n.sortable?r("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:R(S,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ae(String(n.id)),children:[X(n),r(lt,{active:C===n.id,direction:C===n.id?k:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===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)"}}})]})}):X(n)},String(n.id)))});let l=[...e.map(n=>r(J,{rowSpan:2,align:n.align||"left",...n.headerProps,onContextMenu:a=>ge(n,a),style:{width:n.width,minWidth:n.width,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Q(n,!0),...n.headerProps?.style},children:n.sortable&&D?r("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:R(S,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ae(String(n.id)),children:[X(n),r(lt,{active:C===n.id,direction:C===n.id?k:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===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)"}}})]})}):X(n)},String(n.id))),...Object.entries(t).map(([n,a])=>r(J,{align:"center",colSpan:a.length,onContextMenu:y=>ge(null,y),style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:n},n))],c=[...Object.values(t).flat().map(n=>r(J,{align:n.align||"left",...n.headerProps,onContextMenu:a=>ge(n,a),style:{width:n.width,minWidth:n.width,...n.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px",...Q(n,!0),...n.headerProps?.style},children:n.sortable&&D?r("div",{style:{display:"flex",alignItems:"center",justifyContent:n.align==="center"?"center":n.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:R(S,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ae(String(n.id)),children:[X(n),r(lt,{active:C===n.id,direction:C===n.id?k:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===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)"}}})]})}):X(n)},String(n.id)))];return R(Me,{children:[r(Ce,{children:l}),r(Ce,{children:c})]})},[s,C,k,Ae,D,Y,Q,ge,X]),Fe=E((t,e)=>{let o=b?performance.now():0;if(!e){if(b){d.current.rowContentCalls+=1;let a=performance.now()-o;d.current.rowContentMs+=a,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,a)}return null}let l=_e?_e(e,t):null;if(l!=null)return r(J,{colSpan:s.length,"data-vdt-pad":"",sx:[{padding:p?"0 14px":"8px 16px"},...Array.isArray(se)?se:se?[se]:[]],children:l});let c=0,n=s.map((a,y)=>{if(c>0)return c-=1,null;let L=a.colSpan?Math.max(1,Math.min(a.colSpan(e,t),s.length-y)):1;c=L-1;let x=b?performance.now():0,f=a.render?a.render(e,t):String(e[a.id]||"");if(b){let z=performance.now()-x;d.current.cellRenderCalls+=1,d.current.cellRenderMs+=z,d.current.cellRenderMaxMs=Math.max(d.current.cellRenderMaxMs,z)}let T=Be.has(String(a.id)),g=a.cellPadding!==void 0,P=a.rowSpan?a.rowSpan(e,t):1;if(P<=0)return null;let K=a.onCellClick;return r(J,{align:a.align||"left",rowSpan:P>1?P:void 0,colSpan:L>1?L:void 0,"data-vdt-pad":g?"":void 0,"data-vdt-pinned":T?"":void 0,"data-vdt-cell-click":K?"":void 0,onClick:K?z=>{let ee=z.clientX-j.current.x,q=z.clientY-j.current.y;z.stopPropagation(),!(Math.sqrt(ee*ee+q*q)>st)&&K(e,t,z)}:void 0,style:{...L>1?{}:{width:a.width,minWidth:a.width??a.minWidth},...a.primary?{fontSize:15}:{},...a.style,...a.cellStyle?a.cellStyle(e,t):{},padding:g?a.cellPadding:"8px 16px",...Q(a,!1)},children:f},String(a.id))});if(b){d.current.rowContentCalls+=1;let a=performance.now()-o;d.current.rowContentMs+=a,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,a)}return r(Me,{children:n})},[s,b,_e,se,p,Be,Q]),Tt=E(()=>{let t=Mt();if(!ce||ce.length===0)return t;let e=xt.current;return R(Me,{children:[t,r("tr",{"data-vdt-pinned-area":"",children:r("td",{colSpan:s.length,style:{padding:0,border:0},children:r(S,{"data-vdt-inner-scroll":"",sx:[{maxHeight:Ye,overflowY:Ye?"auto":"visible",overflowX:"hidden",scrollbarWidth:"thin",borderBottom:`1px solid ${p?h.borderStrong:"rgba(224, 224, 224, 1)"}`,"& tbody tr:last-of-type > td":{borderBottom:"none"}},...Array.isArray(de)?de:de?[de]:[]],children:R("table",{style:{width:"100%",tableLayout:He,borderCollapse:"separate",borderSpacing:0},children:[r("colgroup",{children:s.map(o=>r("col",{style:{width:o.width,minWidth:o.width??o.minWidth}},String(o.id)))}),r(Pt,{children:ce.map((o,l)=>e?r(e,{item:o,"data-index":l,"data-vdt-pinned-row":"",children:Fe(l,o)},v?String(v(o,l)):`p${l}`):null)})]})})})})]})},[Mt,ce,Ye,de,s,Fe,He,v,p,h]),F=$e??s.some(t=>typeof t.footer=="function"),St=E(()=>{if(!F)return null;let t=[];for(let e=0;e<s.length;e+=1){let o=s[e],l=o.footerColSpan&&o.footerColSpan>1?Math.min(o.footerColSpan,s.length-e):1;t.push(r(J,{align:o.align||"left",colSpan:l>1?l:void 0,style:{...l>1?{}:{width:o.width,minWidth:o.width},...o.style,fontWeight:"bold",padding:p?"0 14px":"16px"},children:o.footer?o.footer(i):null},String(o.id))),e+=l-1}return r(Ce,{children:t})},[F,s,i,p]),at=G(()=>({Scroller:ht,Table:t=>r(wn,{...t,sx:{borderCollapse:"separate",tableLayout:He,...nt?{minWidth:nt}:{},marginRight:Z?"16px":0,...F?{height:"100%"}:{}}}),TableHead:Ne((t,e)=>r(Tn,{...t,ref:e,sx:{userSelect:"none","& > tr":{height:Y,"& > th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:t=>{let{item:e,selected:o,"aria-selected":l,className:c,...n}=t,a=n["data-index"]??0,y=a%2===1,L=e&&pe.current?pe.current(e,a):a,x=!Pe&&w!==null&&w!==void 0&&L===w,f=x&&A?typeof A=="function"?A(e,a):A:void 0,T=String(c??"").split(/\s+/).filter(g=>g!=="Mui-selected"&&g!=="Mui-focusVisible").join(" ");return r(Ce,{...n,"data-row-id":L!=null?String(L):void 0,className:T||void 0,selected:x,onMouseDown:g=>{fe.current=!1,j.current={x:g.clientX,y:g.clientY}},onContextMenu:g=>{e&&tt.current&&tt.current(e,a,g)},onClick:g=>{let P=g.clientX-j.current.x,K=g.clientY-j.current.y;if(Math.sqrt(P*P+K*K)>st||fe.current){g.preventDefault(),g.stopPropagation(),fe.current=!1;return}e&&et.current&&et.current(e,a),fe.current=!1},sx:[{userSelect:"none",...Xe?{"& > td":{height:ue}}:{height:ue,maxHeight:ue},boxSizing:"border-box",backgroundColor:y&&Ge?Ge:"transparent","& td:not([data-vdt-pad])":{padding:"8px 16px"},"& td":{boxSizing:"border-box",borderBottom:re?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":Oe&&!x?{backgroundColor:g=>{let P=g.palette.mode==="dark",z=Ke??"#000000",ee=ft??.06;if(!Ke)return P?`rgba(255, 255, 255, ${ee})`:`rgba(0, 0, 0, ${ee})`;let q=z.replace("#","").trim();if(q.length!==6)return z;let un=parseInt(q.substring(0,2),16),pn=parseInt(q.substring(2,4),16),fn=parseInt(q.substring(4,6),16);return`rgba(${un}, ${pn}, ${fn}, ${ee})`}}:void 0,cursor:Oe?"pointer":void 0},f]})},TableBody:Ne((t,e)=>{let{children:o,...l}=t;return R(Pt,{...l,ref:e,sx:F?{height:"100%"}:void 0,children:[o,F&&r("tr",{"aria-hidden":!0,style:{height:"100%"},children:r("td",{colSpan:s.length,style:{padding:0,border:0}})})]})}),TableFoot:Ne((t,e)=>r(Sn,{...t,ref:e,sx:[{"& tr":{height:ie??O,maxHeight:ie??O,boxSizing:"border-box"},"& td":{height:ie??O,boxSizing:"border-box",backgroundColor:o=>o.palette.mode==="dark"?"#1e1e1e":"#ffffff",padding:"0 16px",color:"inherit",fontSize:"0.875rem",border:"none",boxShadow:`inset 0 1px 0 0 ${p?h.borderStrong:"#000000"}`}},...Array.isArray(le)?le:le?[le]:[]]}))}),[Oe,Pe?null:w,A,O,Ge,re,Y,Ke,ft,ht,ie,le,F,p,h,s,He,Z,Xe,nt]);xt.current=at.TableRow;let on=at,be=at,an=be.Table,ln=be.TableHead,sn=be.TableBody,cn=be.TableRow,dn=be.TableFoot,I=he?s.find(t=>String(t.id)===he.colId):void 0,me=()=>yt(null),Rt=null;if(he&&I){let t=String(I.id),e=!!((I.sortMenu??I.sortable)&&D),o=Ot(I),l=C===t?k:void 0,c=I.filterValues??[],n=I.filterMultiple!==!1,a={gap:1,fontSize:14,minHeight:36},y=f=>{if(me(),l===f){V?.();return}D?.(t,f)},L=f=>{let T=c.includes(f);if(n){I.onFilterChange?.(T?c.filter(g=>g!==f):[...c,f]);return}me(),I.onFilterChange?.(T?[]:[f])},x=[];e&&(x.push(R(ve,{selected:l==="asc",onClick:()=>y("asc"),sx:a,children:[r(we,{d:te.asc,color:"text.secondary"}),"\uC624\uB984\uCC28\uC21C \uC815\uB82C"]},"asc"),R(ve,{selected:l==="desc",onClick:()=>y("desc"),sx:a,children:[r(we,{d:te.desc,color:"text.secondary"}),"\uB0B4\uB9BC\uCC28\uC21C \uC815\uB82C"]},"desc")),l&&V&&x.push(r(ve,{onClick:()=>{me(),V()},sx:{...a,color:"text.secondary"},children:"\uC815\uB82C \uD480\uAE30"},"sort-clear"))),e&&o&&x.push(r(zt,{},"div-sort")),o&&((I.filterOptions??[]).forEach(f=>{let T=c.includes(f.value);x.push(R(ve,{selected:!n&&T,onClick:()=>L(f.value),sx:a,children:[n?r(we,{d:T?te.checked:te.unchecked,color:T?"primary.main":"text.disabled"}):r(S,{component:"span",sx:{display:"inline-flex",width:18,flexShrink:0,color:"primary.main"},children:T?r(we,{d:te.check}):null}),f.label]},`f:${f.value}`))}),c.length>0&&x.push(r(zt,{},"div-filter"),r(ve,{onClick:()=>{me(),I.onFilterChange?.([])},sx:{...a,color:"text.secondary"},children:"\uAC70\uB974\uAE30 \uD480\uAE30"},"filter-clear"))),Rt=r(Rn,{open:!0,anchorReference:"anchorPosition",anchorPosition:{left:he.x,top:he.y},onClose:me,transitionDuration:0,onContextMenu:f=>f.preventDefault(),slotProps:{paper:{sx:{maxHeight:420,minWidth:180}}},children:x})}let kt=R(S,{sx:{position:"relative",height:H?"auto":"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:t=>p?`${h.bg} !important`:t.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...Jt??{},"& tbody td[data-vdt-pinned]":{backgroundColor:p?h.bg:je.palette.background.paper},"& tbody td[data-vdt-cell-click]":{cursor:"pointer"},"& tbody td[data-vdt-cell-click]:hover":{backgroundColor:p?h.hoverBg:je.palette.mode==="dark"?"rgba(255, 255, 255, 0.06)":"rgba(0, 0, 0, 0.04)"},...p&&Oe?{"& tbody tr:hover td[data-vdt-pinned]":{backgroundColor:h.hoverBg}}:{},...p?{...Z?{border:`1px solid ${h.borderStrong}`,borderRadius:"4px"}:{"& table":{backgroundColor:h.bg}},overflow:"hidden","& thead tr th":{height:Y,boxSizing:"border-box",padding:"0 14px !important",fontSize:13,fontWeight:"500 !important",color:h.headerColor,backgroundColor:`${h.bg} !important`,borderTop:!Z&&Ft?`1px solid ${h.borderStrong}`:"none",borderBottom:`1px solid ${h.borderStrong}`,borderRight:`1px solid ${h.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 ${h.border}`},...i.length>0&&(H||tn||F)?{[`& tbody tr[data-index="${i.length-1}"]:not([data-vdt-pinned-row]) td`]:{borderBottom:"none"}}:{}}:{}},children:[H?r(S,{sx:{overflowX:"auto",width:"100%"},children:R(an,{children:[r(ln,{children:Tt()}),r(sn,{children:i.map((t,e)=>r(cn,{item:t,"data-index":e,children:Fe(e,t)},v?String(v(t,e)):e))}),F?r(dn,{children:St()}):null]})}):r(Hn,{ref:Ze,data:i,totalCount:W?i.length+1:i.length,defaultItemHeight:ue,fixedItemHeight:Xe?void 0:ue,fixedHeaderContent:Tt,fixedFooterContent:F?St:void 0,itemContent:Fe,...Vt&&v?{computeItemKey:(t,e)=>e?v(e,t):`vdt-${t}`}:{},endReached:rn,scrollerRef:t=>{Qe.current=t instanceof HTMLElement?t:null,ze()},totalListHeightChanged:ze,style:{height:"100%"},increaseViewportBy:{top:Yt,bottom:jt},overscan:qt,followOutput:!1,components:on},Zt),i.length===0&&!u&&!pt&&p&&typeof $=="string"&&r(S,{sx:{position:H?"static":"absolute",top:Y,left:0,right:0,py:6,textAlign:"center",fontSize:14,color:h.emptyColor},children:$}),i.length===0&&!u&&!pt&&!(p&&typeof $=="string")&&r(S,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof $=="string"?R(Me,{children:[r(S,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),r(Dn,{variant:"body1",sx:{color:"text.secondary"},children:$})]}):$}),Rt,en&&r(Me,{children:Ee?r(Ee,{visible:u,onComplete:bt}):r(Et,{visible:u,onComplete:bt,size:40,indicator:r(It,{}),sx:{top:`${s.some(t=>t.group)?Y*2:Y}px`,bottom:`${F?ie??O:0}px`},background:{show:i.length===0,opacity:.8}})})]}),Lt=p&&Z?{paddingRight:Ie,paddingTop:Bt,paddingBottom:Bt}:{};return Re?r(Ln,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:Ie,...Lt,boxSizing:"border-box",height:H?"auto":"100%",minHeight:0,flex:H?"none":1,display:"flex",flexDirection:"column"},children:kt}):r(S,{className:"grow",style:{padding:0,paddingLeft:Ie,...Lt,boxSizing:"border-box",height:H?"auto":"100%",minHeight:0,flex:H?"none":1,display:"flex",flexDirection:"column"},children:kt})}var An=vn(On);export{An as VirtualDataTable};
|
|
5
5
|
/**
|
|
6
6
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
7
7
|
*
|