@ehfuse/mui-virtual-data-table 1.1.34 → 1.2.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 +24 -0
- package/dist/index.esm.js +2 -22
- package/dist/index.esm.js.map +4 -4
- package/dist/index.js +2 -22
- package/dist/index.js.map +4 -4
- package/dist/types.d.ts +55 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -133,9 +133,33 @@ function App() {
|
|
|
133
133
|
emptyMessage={string | React.ReactNode} // Empty state message (default: "NO DATA")
|
|
134
134
|
scrollbars={VDTOverlayScrollbarProps} // Custom scrollbar options
|
|
135
135
|
LoadingComponent={React.ComponentType} // Custom loading component
|
|
136
|
+
|
|
137
|
+
// Optional - Layout (1.2.0)
|
|
138
|
+
framed={boolean} // notion: outer border + paper padding (default: true). false = fill an already-bordered box
|
|
139
|
+
tableLayout={"fixed" | "auto"} // "auto": column widths follow content, wide tables scroll horizontally
|
|
140
|
+
rowHeightMode={"fixed" | "auto"} // "auto": rowHeight becomes a minimum, rows grow with content
|
|
141
|
+
autoHeight={boolean} // No virtualization / no own scroll — the table is as tall as its rows (page scrolls)
|
|
142
|
+
renderFullWidthRow={(item, index) => ReactNode | null} // Group band row: one cell spanning all columns (null = normal row)
|
|
143
|
+
fullWidthRowSx={SxProps} // Style of the band row cell (background, padding)
|
|
144
|
+
onRowContextMenu={(item, index, event) => void}
|
|
136
145
|
/>
|
|
137
146
|
```
|
|
138
147
|
|
|
148
|
+
### Column options (1.2.0)
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
{ id: "name", text: "이름", width: 160, pinned: "left" } // sticky left (numeric width needed for the next pinned column)
|
|
152
|
+
{ id: "name", text: "이름", primary: true } // 15px body text for the row's main cell
|
|
153
|
+
{ id: "d1", text: "월", onCellClick: (item, i, e) => {} } // per-cell click + cell hover (row click is not fired)
|
|
154
|
+
{ id: "who", text: "담당", rowSpan: (item, i) => 2 } // merge down; return 0 on covered rows (use with autoHeight / short tables)
|
|
155
|
+
{ id: "m1", text: "1월", cellPadding: "4px 0" } // body padding override
|
|
156
|
+
{ id: "t", text: "업무", cellStyle: (item) => ({ color: "#999" }) } // per-row cell style
|
|
157
|
+
{ id: "c", text: "열", headerProps: { draggable: true, onDrop } } // extra th attributes (drag to reorder, title…)
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
notion defaults (1.2.0): rowHeight 48, header text 13px, selected row (`selectedRowId`) = `#dbeafe` + 3px `#3b82f6` left bar (dark values included),
|
|
161
|
+
string `emptyMessage` = one light grey line under the header, footer cells use the body padding.
|
|
162
|
+
|
|
139
163
|
## License
|
|
140
164
|
|
|
141
165
|
MIT © KIM YOUNG JIN (ehfuse@gmail.com)
|
package/dist/index.esm.js
CHANGED
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as we,useCallback as B,useMemo as U,useRef as x,useEffect as O,memo as zt,useState as $e}from"react";import{Box as k,Table as Vt,TableBody as $t,TableCell as K,TableContainer as _t,TableHead as Wt,TableFooter as jt,TableRow as se,TableSortLabel as _e,Paper as Yt,Typography as Xt,useTheme as Kt}from"@mui/material";import{TableVirtuoso as qt}from"react-virtuoso";import{jsx as Ve}from"react/jsx-runtime";import{useRef as nt,useState as It,useEffect as Ht}from"react";import{Box as At,CircularProgress as Nt}from"@mui/material";var ie=function(){return ie=Object.assign||function(c){for(var s,v=1,M=arguments.length;v<M;v++){s=arguments[v];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(c[h]=s[h])}return c},ie.apply(this,arguments)};function rt(a){var c=a.visible,s=a.onComplete,v=a.fadeoutDuration,M=v===void 0?200:v,h=a.exitDelay,le=h===void 0?0:h,de=a.size,Z=de===void 0?40:de,q=a.className,Q=a.style,I=a.sx,D=a.indicator,b=a.background,T=b===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:b,ce=nt(void 0),z=nt(null),ue=It(c),Me=ue[0],pe=ue[1],fe=T.show,H=fe===void 0?!0:fe,V=T.color,L=V===void 0?"255, 255, 255":V,E=T.opacity,y=E===void 0?.9:E;if(Ht(function(){var $=ce.current;if($===!0&&c===!1&&z.current){var _=z.current;_.style.opacity="0",setTimeout(function(){pe(!1),s?.()},M+le)}else c===!0&&(pe(!0),z.current&&(z.current.style.opacity="1"));ce.current=c},[c,s,M,le]),!Me)return null;var ge=function(){return typeof D=="string"?Ve("img",{src:D,alt:"Loading",style:{width:Z,height:Z}}):D||Ve(Nt,{size:Z})},Te=function(){return H?L.startsWith("rgba")?{backgroundColor:L}:/^\d+,\s*\d+,\s*\d+$/.test(L)?{backgroundColor:"rgba(".concat(L,", ").concat(y,")")}:y!==1?{backgroundColor:L,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:L,opacity:y,zIndex:-1}}:{backgroundColor:L}:{backgroundColor:"transparent"}};return Ve(At,{ref:z,className:q,style:ie({},Q),sx:ie(ie({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,opacity:c?1:0,transition:"opacity ".concat(M,"ms ease-out")},Te()),I),children:ge()})}import{Fragment as Ot,jsx as ot,jsxs as Ft}from"react/jsx-runtime";var Bt=`
|
|
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 ht({size:a=54}){return Dt(Rt,{children:[ft("style",{children:Lt}),ft("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:a,height:a}})]})}import{useRef as Z,useEffect as de,useState as B,useCallback as O,useMemo as Ae,forwardRef as Et,useImperativeHandle as Ht,useLayoutEffect as It}from"react";import{jsx as Oe,jsxs as gt}from"react/jsx-runtime";var Ot=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],mt=(a,p)=>{let u=a.tagName.toLowerCase(),S=["text","password","email","number","search","tel","url","checkbox","radio"];if(u==="input"){let R=a.type;return S.includes(R)}if(["textarea","select","button"].includes(u)||["svg","path","circle","rect","line","polygon","polyline"].includes(u)||a.getAttribute("contenteditable")==="true")return!0;if(p?.excludeSelectors){for(let R of p.excludeSelectors)if(a.matches(R))return!0}return Nt(a,p)},Nt=(a,p)=>{let u=[...Ot,...p?.excludeClasses||[]],S=a,R=0,y=5;for(;S&&R<=y;){if(u.some(h=>S.classList.contains(h)))return!0;if(S.classList.contains("MuiDialogContent-root"))break;S=S.parentElement,R++}return!1},$t={},Pt={},Ft={},Bt={},zt={},At=Et(({className:a="",style:p={},containerStyle:u={},contentStyle:S={},children:R,onScroll:y,thumb:h=$t,track:v=Pt,arrows:$=Ft,dragScroll:A=Bt,autoHide:X=zt,showScrollbar:F=!0,detectInnerScroll:K=!1},D)=>{let W=Z({});de(()=>{W.current={children:R,onScroll:y,showScrollbar:F,thumb:h,track:v,arrows:$,dragScroll:A,autoHide:X}});let pe=Z(null),s=Z(null),q=Z(null),fe=Z(null),Se=Z(null),P=Z(null),[V,M]=B(!1),[H,oe]=B(!1),[ie,ke]=B(!1),[G,le]=B({y:0,scrollTop:0}),[ae,se]=B(0),[at,J]=B(0),[Q,xe]=B(!1),[ce,$e]=B(!1),[Le,Ge]=B({x:0,y:0,scrollTop:0,scrollLeft:0}),[st,ct]=B(null),[Re,De]=B(null),[ut,Ee]=B(!1),ee=Z(null),[qe,Ue]=B(!1),m=Z(null),d=Z(null),U=Z(null),N=Ae(()=>{let n=h.color??"#606060";return{width:h.width??8,minHeight:h.minHeight??50,radius:h.radius??(h.width??8)/2,color:n,opacity:h.opacity??.6,hoverColor:h.hoverColor??n,hoverOpacity:h.hoverOpacity??1}},[h]),b=Ae(()=>({width:v.width??16,color:v.color??"rgba(128, 128, 128, 0.1)",visible:v.visible??!0,alignment:v.alignment??"center",radius:v.radius??N.radius??4,margin:v.margin??4}),[v,N.radius]),_=Ae(()=>{let n=$.color??"#808080";return{visible:$.visible??!1,step:$.step??50,color:n,opacity:$.opacity??.6,hoverColor:$.hoverColor??n,hoverOpacity:$.hoverOpacity??1}},[$]),He=Ae(()=>({enabled:A.enabled??!0,excludeClasses:A.excludeClasses??[],excludeSelectors:A.excludeSelectors??[]}),[A]),x=Ae(()=>({enabled:X.enabled??!0,delay:X.delay??1500,delayOnWheel:X.delayOnWheel??700}),[X]),E=N.width,Ve=b.width,Pe=N.minHeight,te=_.visible,he=_.step,j=O(()=>{if(!s.current)return;let n=document.activeElement;n&&s.current.contains(n)&&n!==s.current||s.current.focus()},[]);Ht(D,()=>({getScrollContainer:()=>s.current,scrollTo:n=>{s.current&&s.current.scrollTo(n)},get scrollTop(){return s.current?.scrollTop||0},get scrollHeight(){return s.current?.scrollHeight||0},get clientHeight(){return s.current?.clientHeight||0}}),[]);let w=O(()=>{if(P.current){let t=P.current;if(document.contains(t)&&t.scrollHeight>t.clientHeight+2)return t;P.current=null}if(!s.current)return null;if(q.current&&q.current.scrollHeight>s.current.clientHeight+2)return P.current=s.current,s.current;if(!K)return null;let n=s.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of n){let e=t;if(e!==s.current&&e.classList.contains("overlay-scrollbar-container"))continue;let o=e.parentElement,l=!1;for(;o&&o!==s.current;){if(o.classList.contains("overlay-scrollbar-container")&&o!==s.current){l=!0;break}o=o.parentElement}if(!l&&e.scrollHeight>e.clientHeight+2)return P.current=e,e}return null},[]),re=O(()=>w()!==null,[w]),C=O(()=>{m.current&&(clearTimeout(m.current),m.current=null)},[]),Fe=O(()=>{d.current&&(clearTimeout(d.current),d.current=null)},[]),ye=O(()=>{U.current&&(clearTimeout(U.current),U.current=null)},[]),T=O(n=>{x.enabled&&(C(),m.current=setTimeout(()=>{M(!1),m.current=null},n))},[C,x.enabled]),g=O(()=>{let n=w();if(!n){M(!1),xe(!1),C();return}if(xe(!0),!fe.current)return;x.enabled||(M(!0),C());let t=n.clientHeight,e=n.scrollHeight,o=n.scrollTop,l=0;if(pe.current){let ue=window.getComputedStyle(pe.current),L=parseFloat(ue.paddingTop)||0,Ie=parseFloat(ue.paddingBottom)||0;l=L+Ie}let i=te?E*2+b.margin*4:b.margin*2,r=t-i+l,f=t/e,I=Math.max(r*f,Pe),Y=e-t,k=r-I,Me=Y>0?o/Y*k:0;se(I),J(Me)},[w,C,te,E,Pe,x.enabled]),Ze=O(n=>{n.preventDefault(),n.stopPropagation();let t=w();t&&(oe(!0),le({y:n.clientY,scrollTop:t.scrollTop}),C(),M(!0),j())},[w,C,j]),ve=O(n=>{if(!H)return;let t=w();if(!t)return;let e=t.clientHeight,o=t.scrollHeight-e,l=n.clientY-G.y,i=e-ae,r=l/i*o,f=Math.max(0,Math.min(o,G.scrollTop+r));t.scrollTop=f,g()},[H,G,ae,g,w]),we=O(()=>{oe(!1),re()&&T(x.delay)},[re,T,x.delay]),Je=O(n=>{if(!fe.current)return;let t=fe.current.getBoundingClientRect(),e=n.clientY-t.top,o=w();if(!o)return;let l=o.clientHeight,i=o.scrollHeight,r=e/l*(i-l);o.scrollTop=Math.max(0,Math.min(i-l,r)),g(),M(!0),T(x.delay),j()},[g,T,x.delay,w,j]),Qe=O(n=>{if(n.preventDefault(),n.stopPropagation(),!s.current)return;let t=Math.max(0,s.current.scrollTop-he);s.current.scrollTop=t,g(),M(!0),T(x.delay),j()},[g,T,he,x.delay,j]),ne=O(n=>{if(n.preventDefault(),n.stopPropagation(),!s.current||!q.current)return;let t=s.current,e=q.current.scrollHeight-t.clientHeight,o=Math.min(e,t.scrollTop+he);t.scrollTop=o,g(),M(!0),T(x.delay),j()},[g,T,he,x.delay,j]),et=O(n=>{if(!He.enabled)return;let t=n.target;if(mt(t,He)||n.button!==0)return;let e=w();e&&(e.scrollHeight<=e.clientHeight||(n.preventDefault(),$e(!0),Ge({x:n.clientX,y:n.clientY,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft||0}),C()))},[He,mt,w,C]),_e=O(n=>{if(!ce)return;let t=w();if(!t)return;let e=Le.x-n.clientX,o=Le.y-n.clientY;if(Math.abs(o)<3&&Math.abs(e)<3)return;M(!0);let l=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,Le.scrollTop+o));t.scrollTop=l,g()},[ce,Le,w,g]),Be=O(()=>{$e(!1),re()&&T(x.delay)},[re,T,x.delay]);de(()=>{let n=i=>{g(),C(),M(!0);let r=qe?x.delayOnWheel:x.delay;T(r),y&&y(i)},t=()=>{Ue(!0),ee.current&&clearTimeout(ee.current),ee.current=setTimeout(()=>{Ue(!1)},300),C(),ye(),U.current=setTimeout(()=>{M(!0),U.current=null},50)},e=[],o=w();o&&e.push(o);let l=s.current;return l&&!o&&(e.push(l),l.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(i=>{let r=i;if(r!==l&&r.classList.contains("overlay-scrollbar-container"))return;let f=r.parentElement;for(;f&&f!==l;){if(f.classList.contains("overlay-scrollbar-container")&&f!==l)return;f=f.parentElement}e.push(r)})),e.forEach(i=>{i.addEventListener("scroll",n,{passive:!0}),i.addEventListener("wheel",t,{passive:!0})}),()=>{e.forEach(i=>{i.removeEventListener("scroll",n),i.removeEventListener("wheel",t)}),ee.current&&clearTimeout(ee.current),U.current&&clearTimeout(U.current)}},[w,g,y,C,T,x,qe]),de(()=>{let n=e=>{let o=w();if(!o)return;let{key:l}=e,{scrollTop:i,scrollHeight:r,clientHeight:f}=o,I=r-f,Y=50,k=null;switch(l){case"ArrowUp":e.preventDefault(),k=Math.max(0,i-Y);break;case"ArrowDown":e.preventDefault(),k=Math.min(I,i+Y);break;case"PageUp":e.preventDefault(),k=Math.max(0,i-f);break;case"PageDown":e.preventDefault(),k=Math.min(I,i+f);break;case"Home":e.preventDefault(),k=0;break;case"End":e.preventDefault(),k=I;break;default:return}if(k!==null){let Me=k/I,ue=te?E*2+b.margin*4:b.margin*2,L=(f-ue-ae)*Me;J(L),o.scrollTop=k,C(),M(!0),T(x.delay)}},t=s.current;if(t)return t.addEventListener("keydown",n),()=>{t.removeEventListener("keydown",n)}},[w,te,E,b.margin,ae,C,T,x.delay]),de(()=>{if(ce)return document.addEventListener("mousemove",_e),document.addEventListener("mouseup",Be),()=>{document.removeEventListener("mousemove",_e),document.removeEventListener("mouseup",Be)}},[ce,_e,Be]),de(()=>{if(H)return document.addEventListener("mousemove",ve),document.addEventListener("mouseup",we),()=>{document.removeEventListener("mousemove",ve),document.removeEventListener("mouseup",we)}},[H,ve,we]),de(()=>{g();let n=setTimeout(()=>{g()},100);return()=>clearTimeout(n)},[g]),It(()=>{Ee(!0),g(),!x.enabled&&re()&&M(!0)},[re,g,x.enabled]),de(()=>{let n=new ResizeObserver(()=>{g()}),t=[];return s.current&&t.push(s.current),q.current&&t.push(q.current),P.current&&document.contains(P.current)&&t.push(P.current),t.forEach(e=>{n.observe(e)}),()=>n.disconnect()},[g]),de(()=>{if(!s.current)return;let n=new MutationObserver(()=>{P.current=null,g()});return n.observe(s.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>n.disconnect()},[g]);let me=Math.max(Ve,E);return de(()=>{let n="overlay-scrollbar-webkit-hide",t=document.getElementById(n);t&&t.remove();let e=document.createElement("style");return e.id=n,e.textContent=`
|
|
5
|
-
.overlay-scrollbar-container::-webkit-scrollbar {
|
|
6
|
-
display: none !important;
|
|
7
|
-
width: 0 !important;
|
|
8
|
-
height: 0 !important;
|
|
9
|
-
}
|
|
10
|
-
.overlay-scrollbar-container::-webkit-scrollbar-track {
|
|
11
|
-
display: none !important;
|
|
12
|
-
}
|
|
13
|
-
.overlay-scrollbar-container::-webkit-scrollbar-thumb {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
.overlay-scrollbar-container:focus {
|
|
17
|
-
outline: 2px solid rgba(0, 123, 255, 0.3);
|
|
18
|
-
outline-offset: -2px;
|
|
19
|
-
}
|
|
20
|
-
.overlay-scrollbar-container:focus-visible {
|
|
21
|
-
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
22
|
-
outline-offset: -2px;
|
|
23
|
-
}
|
|
24
|
-
`,document.head.appendChild(e),()=>{let o=document.getElementById(n);o&&o.remove()}},[]),gt("div",{ref:pe,className:`overlay-scrollbar-wrapper ${a}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...p},children:[Oe("div",{ref:s,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:et,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:ce?"none":"auto",...u},children:Oe("div",{ref:q,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...S},children:R})}),F&&Q&>("div",{ref:fe,className:"overlay-scrollbar-track",onMouseEnter:()=>{C(),d.current=setTimeout(()=>{M(!0),d.current=null},100)},onMouseLeave:()=>{Fe(),H||T(x.delay)},style:{position:"absolute",top:0,right:0,width:`${me}px`,height:"100%",opacity:V?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[b.visible&&Oe("div",{className:"overlay-scrollbar-track-background",onClick:n=>{n.preventDefault(),n.stopPropagation(),Je(n)},style:{position:"absolute",top:te?`${N.width+b.margin*2}px`:`${b.margin}px`,right:b.alignment==="right"?"0px":`${(me-N.width)/2}px`,width:`${N.width}px`,height:te?`calc(100% - ${N.width*2+b.margin*4}px)`:`calc(100% - ${b.margin*2}px)`,backgroundColor:b.color,borderRadius:`${b.radius}px`,cursor:"pointer"}}),Oe("div",{ref:Se,className:"overlay-scrollbar-thumb",onMouseDown:Ze,onMouseEnter:()=>ke(!0),onMouseLeave:()=>ke(!1),style:{position:"absolute",top:`${(te?E+b.margin*2:b.margin)+at}px`,right:b.alignment==="right"?"0px":`${(me-E)/2}px`,width:`${E}px`,height:`${Math.max(ae,Pe)}px`,backgroundColor:ie||H?N.hoverColor:N.color,opacity:ie||H?N.hoverOpacity:N.opacity,borderRadius:`${N.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),F&&Q&&te&&Oe("div",{className:"overlay-scrollbar-up-arrow",onClick:Qe,onMouseEnter:()=>De("up"),onMouseLeave:()=>De(null),style:{position:"absolute",top:`${b.margin}px`,right:b.alignment==="right"?"0px":`${(me-E)/2}px`,width:`${E}px`,height:`${E}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(E*.75,8)}px`,color:Re==="up"?_.hoverColor:_.color,userSelect:"none",zIndex:1001,opacity:V?Re==="up"?_.hoverOpacity:_.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),F&&Q&&te&&Oe("div",{className:"overlay-scrollbar-down-arrow",onClick:ne,onMouseEnter:()=>De("down"),onMouseLeave:()=>De(null),style:{position:"absolute",bottom:`${b.margin}px`,right:b.alignment==="right"?"0px":`${(me-E)/2}px`,width:`${E}px`,height:`${E}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(E*.75,8)}px`,color:Re==="down"?_.hoverColor:_.color,userSelect:"none",zIndex:1001,opacity:V?Re==="down"?_.hoverOpacity:_.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),bt=At;import{Fragment as Ke,jsx as c,jsxs as Te}from"react/jsx-runtime";var Zt={alignment:"right",margin:0,radius:0},xt=5,Jt={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7"},yt="12px",Qt={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36"};function er({data:a,loading:p=!1,columns:u,onRowClick:S,getRowId:R,selectedRowId:y,selectedRowSx:h,rowHeight:v=50,columnHeight:$,striped:A,rowDivider:X=!0,onSort:F,onLoadMore:K,sortBy:D,sortDirection:W,showPaper:pe=!0,paddingX:s,paddingTop:q=0,paddingBottom:fe=0,rowHoverColor:Se,rowHoverOpacity:P,viewportBuffer:V,overscan:M,scrollbars:H,emptyMessage:oe="NO DATA",LoadingComponent:ie,showFooter:ke,footerHeight:G,footerSx:le,variant:ae="default"}){let se=ae==="notion",J=Gt().palette.mode==="dark"?Qt:Jt,Q=$??(se?40:56),xe=s??(se?"12px":"1rem"),ce=Se??(se?J.hoverBg:void 0),$e=P??(se?1:void 0),Le=Math.max(v*12,480),Ge=Math.max(v*12,480),st=typeof V=="number"?V:V?.top??Le,ct=typeof V=="number"?V:V?.bottom??Ge,Re=Math.max(v*8,420),De=Math.max(v*10,520),ut=typeof M=="number"?M:{main:M?.main??Re,reverse:M?.reverse??De},Ee=v+(X?1:0),ee=!h||typeof h!="function",qe=Xe(()=>!ee||y===null||y===void 0||!h?null:{[`& tbody tr[data-row-id="${String(y).replace(/["\\]/g,"\\$&")}"]`]:h},[ee,y,h]),Ue=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[m]=it(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),d=z({wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}),U=Ce(t=>{if(!m)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,i=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(i.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}},[m]);ge(()=>{if(!m||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let t=window.setInterval(()=>{U("interval")},1500);return()=>{window.clearInterval(t),U("cleanup")}},[U,m]);let N=Xe(()=>Ye((t,e)=>{let o=z(null),l=z(0),i=z(null);return ge(()=>{let r=o.current;if(!r)return;let f=I=>{let Y=m?performance.now():0;I.preventDefault();let k=I.deltaY;I.deltaMode===1?k*=40:I.deltaMode===2&&(k*=r.clientHeight),m&&(d.current.wheelEvents+=1,d.current.wheelInputPx+=k),l.current+=k,i.current===null&&(i.current=requestAnimationFrame(()=>{let Me=m?performance.now():0,ue=Math.max(r.clientHeight*.4,160),L=Math.max(-ue,Math.min(ue,l.current));l.current=0,i.current=null,L!==0&&(r.scrollTop+=L),m&&(d.current.wheelRafFlushes+=1,d.current.wheelRafMs+=performance.now()-Me)}),m&&(d.current.wheelHandlerMs+=performance.now()-Y))};return r.addEventListener("wheel",f,{passive:!1}),()=>{r.removeEventListener("wheel",f),i.current!==null&&(cancelAnimationFrame(i.current),i.current=null),l.current=0}},[]),c(bt,{detectInnerScroll:!0,track:Zt,...H,children:c(_t,{component:be,...t,ref:r=>{o.current=r,typeof e=="function"?e(r):e&&(e.current=r)},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:se?0:xe,paddingTop:q,paddingBottom:fe}}})})}),[]),b=Xe(()=>{if(A===!0)return"#f5f5f5";if(typeof A=="string")return A},[A]),[_,He]=it(p),[x,E]=it(0);ge(()=>{p&&He(!0)},[p]);let Ve=Ce(()=>{He(!1)},[]),Pe=_,te=p&&a.length>0,he=z(!1),j=z(-1),w=z(null),re=z(S);re.current=S;let C=z(R);C.current=R;let Fe=!!S,ye=z(!1),T=z({x:0,y:0});ge(()=>{let t=e=>{let o=e.clientX-T.current.x,l=e.clientY-T.current.y;Math.sqrt(o*o+l*l)>xt&&(ye.current=!0)};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}},[]),ge(()=>{let t=document.querySelector('[data-testid="virtuoso-scroller"]');t&&t.querySelectorAll(".MuiTableSortLabel-root").forEach(o=>{let l=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});o.dispatchEvent(l)})},[D]);let g=Ce(t=>{if(!F)return;F(t,D===t&&W==="asc"?"desc":"asc")},[F,D,W]),Ze=Ce(t=>{let e=m?performance.now():0;if(!K){m&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}if(p&&a.length===0){m&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e);return}let o=a.length>=30,l=t>=a.length-1,i=j.current===a.length;if(l&&o&&!he.current&&!i){he.current=!0,j.current=a.length;let r=a.length;K(r,50)}m&&(d.current.rangeChangedCalls+=1,d.current.rangeChangedMs+=performance.now()-e)},[a.length,p,K,m]);ge(()=>{p||(he.current=!1)},[p]),ge(()=>{a.length===0&&E(t=>t+1)},[a.length]);let ve=z(a.length),we=z(void 0);ge(()=>{let t=ve.current,e=a.length,o=e>0?C.current?C.current(a[0],0):a[0]:void 0,l=we.current;if(e>t&&t>0){ve.current=e,we.current=o;return}let i=e<t||t>0&&o!==l;i&&(j.current=-1),w.current&&e>0&&i&&w.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),ve.current=e,we.current=o},[a]);let Je=Ce(()=>{let t={},e=[];if(u.forEach(r=>{r.group?(t[r.group]||(t[r.group]=[]),t[r.group].push(r)):e.push(r)}),!(Object.keys(t).length>0))return c(We,{children:u.map(r=>c(Ne,{align:r.align||"left",style:{width:r.width,minWidth:r.width,...r.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:r.sortable?c("div",{style:{display:"flex",alignItems:"center",justifyContent:r.align==="center"?"center":r.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Te(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>g(String(r.id)),children:[r.text,c(lt,{active:D===r.id,direction:D===r.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:D===r.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)"}}})]})}):r.text},String(r.id)))});let l=[...e.map(r=>c(Ne,{rowSpan:2,align:r.align||"left",style:{width:r.width,minWidth:r.width,...r.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:r.sortable&&F?c("div",{style:{display:"flex",alignItems:"center",justifyContent:r.align==="center"?"center":r.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Te(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>g(String(r.id)),children:[r.text,c(lt,{active:D===r.id,direction:D===r.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:D===r.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)"}}})]})}):r.text},String(r.id))),...Object.entries(t).map(([r,f])=>c(Ne,{align:"center",colSpan:f.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:r},r))],i=[...Object.values(t).flat().map(r=>c(Ne,{align:r.align||"left",style:{width:r.width,minWidth:r.width,...r.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:r.sortable&&F?c("div",{style:{display:"flex",alignItems:"center",justifyContent:r.align==="center"?"center":r.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Te(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>g(String(r.id)),children:[r.text,c(lt,{active:D===r.id,direction:D===r.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:D===r.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)"}}})]})}):r.text},String(r.id)))];return Te(Ke,{children:[c(We,{children:l}),c(We,{children:i})]})},[u,D,W,g,F,Q]),Qe=Ce((t,e)=>{let o=m?performance.now():0;if(!e){if(m){d.current.rowContentCalls+=1;let i=performance.now()-o;d.current.rowContentMs+=i,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,i)}return null}let l=u.map(i=>{let r=m?performance.now():0,f=i.render?i.render(e,t):String(e[i.id]||"");if(m){let I=performance.now()-r;d.current.cellRenderCalls+=1,d.current.cellRenderMs+=I,d.current.cellRenderMaxMs=Math.max(d.current.cellRenderMaxMs,I)}return c(Ne,{align:i.align||"left",style:{width:i.width,minWidth:i.width,...i.style,padding:"8px 16px"},children:f},String(i.id))});if(m){d.current.rowContentCalls+=1;let i=performance.now()-o;d.current.rowContentMs+=i,d.current.rowContentMaxMs=Math.max(d.current.rowContentMaxMs,i)}return c(Ke,{children:l})},[u,m]),ne=ke??u.some(t=>typeof t.footer=="function"),et=Ce(()=>{if(!ne)return null;let t=[];for(let e=0;e<u.length;e+=1){let o=u[e],l=o.footerColSpan&&o.footerColSpan>1?Math.min(o.footerColSpan,u.length-e):1;t.push(c(Ne,{align:o.align||"left",colSpan:l>1?l:void 0,style:{...l>1?{}:{width:o.width,minWidth:o.width},...o.style,fontWeight:"bold",padding:"16px"},children:o.footer?o.footer(a):null},String(o.id))),e+=l-1}return c(We,{children:t})},[ne,u,a]),Be=Xe(()=>({Scroller:N,Table:t=>c(qt,{...t,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px",...ne?{height:"100%"}:{}}}),TableHead:Ye((t,e)=>c(jt,{...t,ref:e,sx:{userSelect:"none","& tr":{height:Q,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:t=>{let{item:e,selected:o,"aria-selected":l,className:i,...r}=t,f=r["data-index"]??0,I=f%2===1,Y=e&&C.current?C.current(e,f):f,k=!ee&&y!==null&&y!==void 0&&Y===y,Me=k&&h?typeof h=="function"?h(e,f):h:void 0,ue=String(i??"").split(/\s+/).filter(L=>L!=="Mui-selected"&&L!=="Mui-focusVisible").join(" ");return c(We,{...r,"data-row-id":Y!=null?String(Y):void 0,className:ue||void 0,selected:k,onMouseDown:L=>{ye.current=!1,T.current={x:L.clientX,y:L.clientY}},onClick:L=>{let Ie=L.clientX-T.current.x,tt=L.clientY-T.current.y;if(Math.sqrt(Ie*Ie+tt*tt)>xt||ye.current){L.preventDefault(),L.stopPropagation(),ye.current=!1;return}e&&re.current&&re.current(e,f),ye.current=!1},sx:[{userSelect:"none",height:Ee,maxHeight:Ee,boxSizing:"border-box",backgroundColor:I&&b?b:"transparent","& td":{padding:"8px 16px",boxSizing:"border-box",borderBottom:X?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":Fe&&!k?{backgroundColor:L=>{let Ie=L.palette.mode==="dark",rt=ce??"#000000",nt=$e??.06;if(!ce)return Ie?`rgba(255, 255, 255, ${nt})`:`rgba(0, 0, 0, ${nt})`;let je=rt.replace("#","").trim();if(je.length!==6)return rt;let vt=parseInt(je.substring(0,2),16),wt=parseInt(je.substring(2,4),16),Mt=parseInt(je.substring(4,6),16);return`rgba(${vt}, ${wt}, ${Mt}, ${nt})`}}:void 0,cursor:Fe?"pointer":void 0},Me]})},TableBody:Ye((t,e)=>{let{children:o,...l}=t;return Te(Vt,{...l,ref:e,sx:ne?{height:"100%"}:void 0,children:[o,ne&&c("tr",{"aria-hidden":!0,style:{height:"100%"},children:c("td",{colSpan:u.length,style:{padding:0,border:0}})})]})}),TableFoot:Ye((t,e)=>c(Yt,{...t,ref:e,sx:[{"& tr":{height:G??v,maxHeight:G??v,boxSizing:"border-box"},"& td":{height:G??v,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 #000000"}},...Array.isArray(le)?le:le?[le]:[]]}))}),[Fe,ee?null:y,h,v,b,X,Q,ce,$e,N,G,le,ne,u]),me=Te(be,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:t=>t.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...qe??{},...se?{border:`1px solid ${J.borderStrong}`,borderRadius:"4px",overflow:"hidden","& thead tr th":{height:Q,boxSizing:"border-box",padding:"0 14px !important",fontSize:13,fontWeight:"500 !important",color:J.headerColor,backgroundColor:`${J.bg} !important`,borderTop:"none",borderBottom:`1px solid ${J.borderStrong}`,borderRight:`1px solid ${J.border}`,"&:last-of-type":{borderRight:"none"}},"& tbody tr td":{padding:"0 14px !important",fontSize:14,borderBottom:`1px solid ${J.border}`}}:{}},children:[c(Ut,{ref:w,data:a,totalCount:K?a.length+1:a.length,defaultItemHeight:Ee,fixedItemHeight:Ee,fixedHeaderContent:Je,fixedFooterContent:ne?et:void 0,itemContent:Qe,endReached:Ze,style:{height:"100%"},increaseViewportBy:{top:st,bottom:ct},overscan:ut,followOutput:!1,components:Be},x),a.length===0&&!p&&c(be,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof oe=="string"?Te(Ke,{children:[c(be,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),c(Kt,{variant:"body1",sx:{color:"text.secondary"},children:oe})]}):oe}),Pe&&c(Ke,{children:ie?c(ie,{visible:p,onComplete:Ve}):c(pt,{visible:p,onComplete:Ve,size:40,indicator:c(ht,{}),sx:{top:`${u.some(t=>t.group)?Q*2:Q}px`,bottom:`${ne?G??v:0}px`},background:{show:a.length===0,opacity:.8}})})]}),n=se?{paddingRight:xe,paddingTop:yt,paddingBottom:yt}:{};return pe?c(Xt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:xe,...n,boxSizing:"border-box",height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:me}):c(be,{className:"grow",style:{padding:0,paddingLeft:xe,...n,boxSizing:"border-box",height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:me})}var tr=Wt(er);export{tr as VirtualDataTable};
|
|
4
|
+
`;function at({size:a=54}){return Ft(Ot,{children:[ot("style",{children:Bt}),ot("span",{className:"vdt-css-spinner",role:"progressbar","aria-label":"loading",style:{display:"inline-block",width:a,height:a}})]})}import Gt from"@ehfuse/overlay-scrollbar";import{Fragment as ve,jsx as o,jsxs as F}from"react/jsx-runtime";var Jt={alignment:"default",margin:0,radius:0},We=5,Ut={bg:"#ffffff",border:"#e6e6e3",borderStrong:"#dedddb",headerColor:"#787774",hoverBg:"#f8f8f7",emptyColor:"#9b9a97",selectedBg:"#dbeafe",selectedBar:"#3b82f6"},it="12px",Zt={bg:"#1e1e1e",border:"#2c333c",borderStrong:"#3b434e",headerColor:"#a3adbb",hoverBg:"#272d36",emptyColor:"#7d8590",selectedBg:"rgba(59, 130, 246, 0.22)",selectedBar:"#60a5fa"};function Qt({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:I,onLoadMore:D,sortBy:b,sortDirection:T,showPaper:ce=!0,paddingX:z,paddingTop:ue=0,paddingBottom:Me=0,rowHoverColor:pe,rowHoverOpacity:fe,viewportBuffer:H,overscan:V,scrollbars:L,emptyMessage:E="NO DATA",autoHeight:y=!1,LoadingComponent:ge,showFooter:Te,footerHeight:$,footerSx:_,variant:st="default",framed:ee=!0,rowHeightMode:lt="fixed",tableLayout:je="fixed",renderFullWidthRow:Se,fullWidthRowSx:te,onRowContextMenu:Ye}){let u=st==="notion",Re=Kt(),g=Re.palette.mode==="dark"?Zt:Ut,W=Z??(u?40:56),S=de??(u?48:50),be=ee?z??(u?"12px":"1rem"):0,ke=lt==="auto",De=pe??(u?g.hoverBg:void 0),Xe=fe??(u?1:void 0),dt=Math.max(S*12,480),ct=Math.max(S*12,480),ut=typeof H=="number"?H:H?.top??dt,pt=typeof H=="number"?H:H?.bottom??ct,ft=Math.max(S*8,420),gt=Math.max(S*10,520),bt=typeof V=="number"?V:{main:V?.main??ft,reverse:V?.reverse??gt},ne=S+(Q?1:0),ht=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??ht,he=!R||typeof R!="function",mt=U(()=>!he||h===null||h===void 0||!R?null:{[`& tbody tr[data-row-id="${String(h).replace(/["\\]/g,"\\$&")}"]`]:R},[he,h,R]),tn=typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),[p]=$e(()=>typeof window>"u"?!1:window.localStorage.getItem("vdt-perf-debug")==="1"),l=x({wheelEvents:0,wheelInputPx:0,wheelHandlerMs:0,wheelRafFlushes:0,wheelRafMs:0,rangeChangedCalls:0,rangeChangedMs:0,rowContentCalls:0,rowContentMs:0,rowContentMaxMs:0,cellRenderCalls:0,cellRenderMs:0,cellRenderMaxMs:0}),Le=B(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]);O(()=>{if(!p||typeof window>"u")return;console.log("[VDT perf] enabled (localStorage vdt-perf-debug=1)");let n=window.setInterval(()=>{Le("interval")},1500);return()=>{window.clearInterval(n),Le("cleanup")}},[Le,p]);let Ke=U(()=>we((n,t)=>{let r=x(null),i=x(0),f=x(null);return O(()=>{let e=r.current;if(!e)return;let m=C=>{let A=p?performance.now():0;if(C.shiftKey||Math.abs(C.deltaX)>Math.abs(C.deltaY))return;C.preventDefault();let w=C.deltaY;C.deltaMode===1?w*=40:C.deltaMode===2&&(w*=e.clientHeight),p&&(l.current.wheelEvents+=1,l.current.wheelInputPx+=w),i.current+=w,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()-A))};return e.addEventListener("wheel",m,{passive:!1}),()=>{e.removeEventListener("wheel",m),f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),i.current=0}},[]),o(Gt,{detectInnerScroll:!0,track:Jt,...L,children:o(_t,{component:k,...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:Me}}})})}),[]),Ee=U(()=>{if(q===!0)return"#f5f5f5";if(typeof q=="string")return q},[q]),[xt,qe]=$e(c),[yt,Ct]=$e(0);O(()=>{c&&qe(!0)},[c]);let Ge=B(()=>{qe(!1)},[]),wt=xt,nn=c&&a.length>0,Pe=x(!1),Ie=x(-1),He=x(null),Ae=x(v);Ae.current=v;let re=x(M);re.current=M;let Ne=x(Ye);Ne.current=Ye;let me=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=B((n,t)=>{let r=me.get(String(n.id));return r===void 0?{}:{position:"sticky",left:r,zIndex:t?3:1}},[me]),xe=!!v,oe=x(!1),j=x({x:0,y:0});O(()=>{let n=t=>{let r=t.clientX-j.current.x,i=t.clientY-j.current.y;Math.sqrt(r*r+i*i)>We&&(oe.current=!0)};return document.addEventListener("mousemove",n),()=>{document.removeEventListener("mousemove",n)}},[]),O(()=>{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 ye=B(n=>{if(!I)return;I(n,b===n&&T==="asc"?"desc":"asc")},[I,b,T]),vt=B(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=Ie.current===a.length;if(i&&r&&!Pe.current&&!f){Pe.current=!0,Ie.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]);O(()=>{c||(Pe.current=!1)},[c]),O(()=>{a.length===0&&Ct(n=>n+1)},[a.length]);let Be=x(a.length),Oe=x(void 0);O(()=>{let n=Be.current,t=a.length,r=t>0?re.current?re.current(a[0],0):a[0]:void 0,i=Oe.current;if(t>n&&n>0){Be.current=t,Oe.current=r;return}let f=t<n||n>0&&r!==i;f&&(Ie.current=-1),He.current&&t>0&&f&&He.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),Be.current=t,Oe.current=r},[a]);let Je=B(()=>{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:F(k,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ye(String(e.id)),children:[e.text,o(_e,{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&&I?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:F(k,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ye(String(e.id)),children:[e.text,o(_e,{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,m])=>o(K,{align:"center",colSpan:m.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&&I?o("div",{style:{display:"flex",alignItems:"center",justifyContent:e.align==="center"?"center":e.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:F(k,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>ye(String(e.id)),children:[e.text,o(_e,{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 F(ve,{children:[o(se,{children:i}),o(se,{children:f})]})},[s,b,T,ye,I,W,G]),Ue=B((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=Se?Se(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 m=p?performance.now():0,C=e.render?e.render(t,n):String(t[e.id]||"");if(p){let d=performance.now()-m;l.current.cellRenderCalls+=1,l.current.cellRenderMs+=d,l.current.cellRenderMaxMs=Math.max(l.current.cellRenderMaxMs,d)}let A=me.has(String(e.id)),w=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":w?"":void 0,"data-vdt-pinned":A?"":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)>We)&&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:w?e.cellPadding:"8px 16px",...G(e,!1)},children:C},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(ve,{children:f})},[s,p,Se,te,u,me,G]),P=Te??s.some(n=>typeof n.footer=="function"),Ze=B(()=>{if(!P)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})},[P,s,a,u]),Qe=U(()=>({Scroller:Ke,Table:n=>o(Vt,{...n,sx:{borderCollapse:"separate",tableLayout:je,marginRight:ee?"16px":0,...P?{height:"100%"}:{}}}),TableHead:we((n,t)=>o(Wt,{...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,m=e["data-index"]??0,C=m%2===1,A=t&&re.current?re.current(t,m):m,w=!he&&h!==null&&h!==void 0&&A===h,Y=w&&R?typeof R=="function"?R(t,m):R:void 0,N=String(f??"").split(/\s+/).filter(d=>d!=="Mui-selected"&&d!=="Mui-focusVisible").join(" ");return o(se,{...e,"data-row-id":A!=null?String(A):void 0,className:N||void 0,selected:w,onMouseDown:d=>{oe.current=!1,j.current={x:d.clientX,y:d.clientY}},onContextMenu:d=>{t&&Ne.current&&Ne.current(t,m,d)},onClick:d=>{let X=d.clientX-j.current.x,J=d.clientY-j.current.y;if(Math.sqrt(X*X+J*J)>We||oe.current){d.preventDefault(),d.stopPropagation(),oe.current=!1;return}t&&Ae.current&&Ae.current(t,m),oe.current=!1},sx:[{userSelect:"none",...ke?{"& > td":{height:ne}}:{height:ne,maxHeight:ne},boxSizing:"border-box",backgroundColor:C&&Ee?Ee:"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":xe&&!w?{backgroundColor:d=>{let X=d.palette.mode==="dark",Fe=De??"#000000",ze=Xe??.06;if(!De)return X?`rgba(255, 255, 255, ${ze})`:`rgba(0, 0, 0, ${ze})`;let Ce=Fe.replace("#","").trim();if(Ce.length!==6)return Fe;let Lt=parseInt(Ce.substring(0,2),16),Et=parseInt(Ce.substring(2,4),16),Pt=parseInt(Ce.substring(4,6),16);return`rgba(${Lt}, ${Et}, ${Pt}, ${ze})`}}:void 0,cursor:xe?"pointer":void 0},Y]})},TableBody:we((n,t)=>{let{children:r,...i}=n;return F($t,{...i,ref:t,sx:P?{height:"100%"}:void 0,children:[r,P&&o("tr",{"aria-hidden":!0,style:{height:"100%"},children:o("td",{colSpan:s.length,style:{padding:0,border:0}})})]})}),TableFoot:we((n,t)=>o(jt,{...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(_)?_:_?[_]:[]]}))}),[xe,he?null:h,R,S,Ee,Q,W,De,Xe,Ke,$,_,P,u,g,s,je,ee,ke]),Mt=Qe,ae=Qe,Tt=ae.Table,St=ae.TableHead,Rt=ae.TableBody,kt=ae.TableRow,Dt=ae.TableFoot,et=F(k,{sx:{position:"relative",height:y?"auto":"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:n=>n.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"},...mt??{},"& tbody td[data-vdt-pinned]":{backgroundColor:u?g.bg:Re.palette.background.paper},"& tbody td[data-vdt-cell-click]":{cursor:"pointer"},"& tbody td[data-vdt-cell-click]:hover":{backgroundColor:u?g.hoverBg:Re.palette.mode==="dark"?"rgba(255, 255, 255, 0.06)":"rgba(0, 0, 0, 0.04)"},...u&&xe?{"& 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}`}}:{}},children:[y?o(k,{sx:{overflowX:"auto",width:"100%"},children:F(Tt,{children:[o(St,{children:Je()}),o(Rt,{children:a.map((n,t)=>o(kt,{item:n,"data-index":t,children:Ue(t,n)},M?String(M(n,t)):t))}),P?o(Dt,{children:Ze()}):null]})}):o(qt,{ref:He,data:a,totalCount:D?a.length+1:a.length,defaultItemHeight:ne,fixedItemHeight:ke?void 0:ne,fixedHeaderContent:Je,fixedFooterContent:P?Ze:void 0,itemContent:Ue,endReached:vt,style:{height:"100%"},increaseViewportBy:{top:ut,bottom:pt},overscan:bt,followOutput:!1,components:Mt},yt),a.length===0&&!c&&u&&typeof E=="string"&&o(k,{sx:{position:y?"static":"absolute",top:W,left:0,right:0,py:6,textAlign:"center",fontSize:14,color:g.emptyColor},children:E}),a.length===0&&!c&&!(u&&typeof E=="string")&&o(k,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof E=="string"?F(ve,{children:[o(k,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),o(Xt,{variant:"body1",sx:{color:"text.secondary"},children:E})]}):E}),wt&&o(ve,{children:ge?o(ge,{visible:c,onComplete:Ge}):o(rt,{visible:c,onComplete:Ge,size:40,indicator:o(at,{}),sx:{top:`${s.some(n=>n.group)?W*2:W}px`,bottom:`${P?$??S:0}px`},background:{show:a.length===0,opacity:.8}})})]}),tt=u&&ee?{paddingRight:be,paddingTop:it,paddingBottom:it}:{};return ce?o(Yt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:be,...tt,boxSizing:"border-box",height:y?"auto":"100%",minHeight:0,flex:y?"none":1,display:"flex",flexDirection:"column"},children:et}):o(k,{className:"grow",style:{padding:0,paddingLeft:be,...tt,boxSizing:"border-box",height:y?"auto":"100%",minHeight:0,flex:y?"none":1,display:"flex",flexDirection:"column"},children:et})}var en=zt(Qt);export{en as VirtualDataTable};
|
|
25
5
|
/**
|
|
26
6
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
27
7
|
*
|