@shakibdshy/react-tablegrid/dist/chunk-4PB3QNXY.mjs

A modern, flexible, headless and advanced table component for React with grid layout

import {g,i}from'./chunk-PTGPPKQI.mjs';import {useRef,useState,useCallback,useMemo,useEffect}from'react';import {throttle}from'lodash';function Y(i,o){let n=useRef(null),[b,y]=useState({startIndex:0,endIndex:0,visibleItems:0,scrollTop:0}),T=o.enabled!==!1,h=useCallback(t=>o.getRowHeight?o.getRowHeight(t):o.rowHeight,[o.getRowHeight,o.rowHeight]),d=useMemo(()=>o.getRowHeight?i.reduce((t,s,C)=>t+h(C),0):i.length*o.rowHeight,[i.length,o.rowHeight,o.getRowHeight,h]),p=useCallback(t=>o.getRowHeight?Array.from({length:t}).reduce((s,C,f)=>s+h(f),0):t*o.rowHeight,[o.getRowHeight,o.rowHeight,h]),e=useCallback(()=>{let t=n.current;if(!t||!T)return;let s=t.clientHeight,C=t.scrollTop,f=0,D=0;if(o.getRowHeight){for(;D<C&&f<i.length;)D+=h(f),f++;f=Math.max(0,f-o.overscan);}else f=Math.max(0,Math.floor(C/o.rowHeight)-o.overscan);let g=f,H=0;for(;H<s+o.overscan*h(g)&&g<i.length;)H+=h(g),g++;g=Math.min(i.length-1,g),y(x=>x.startIndex!==f||x.endIndex!==g?{startIndex:f,endIndex:g,visibleItems:g-f+1,scrollTop:C}:x);},[T,o.overscan,h,i.length]),r=useMemo(()=>throttle(()=>{o.scrollingDelay?window.requestAnimationFrame(e):e();},o.scrollingDelay||16),[e,o.scrollingDelay]);useEffect(()=>{if(!T)return;let t=throttle(e,16);return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),t.cancel();}},[e,T]),useEffect(()=>{let t=n.current;if(!(!t||!T))return t.addEventListener("scroll",r,{passive:!0}),()=>{t.removeEventListener("scroll",r),r.cancel();}},[r,T]),useEffect(()=>{e();},[e,i,o.rowHeight]);let l=useMemo(()=>T?i.slice(b.startIndex,b.endIndex+1).map((t,s)=>{let C=b.startIndex+s;return {item:t,index:C,style:{position:"absolute",top:p(C),width:"100%",height:h(C)}}}):i.map((t,s)=>({item:t,index:s,style:{position:"absolute",top:p(s),width:"100%",height:h(s)}})),[T,i,b.startIndex,b.endIndex,p,h]),u=useCallback(t=>{if(!n.current)return;let s=p(t);n.current.scrollTop=s;},[p]);return {containerRef:n,virtualItems:l,totalHeight:d,scrollTo:u}}function K({data:i,columns:o,initialState:n,onStateChange:b,debounceMs:y=300,columnResizeMode:T="onChange",columnResizeDirection:h="ltr"}){let[d,p]=useState(()=>({...g(i,o),...n})),[e,r]=useState(d.filterValue),[l,u]=useState({startX:null,currentX:null,deltaX:null,isResizingColumn:!1,columnSizingStart:{}});useEffect(()=>{let a=setTimeout(()=>{r(d.filterValue);},y);return ()=>clearTimeout(a)},[d.filterValue,y]);let t=useCallback(a=>{p(m=>{let c=typeof a=="function"?a(m):{...m,...a};return JSON.stringify(m)!==JSON.stringify(c)&&(b==null||b(c)),c});},[b]),s=useCallback(()=>{let a=g(i,o);p(a),b==null||b(a);},[i,o,b]),C=useCallback(a=>{t({data:a});},[t]),f=useCallback(a=>{t(m=>({...m,visibleColumns:m.visibleColumns.includes(a)?m.visibleColumns.filter(c=>c!==a):[...m.visibleColumns,a]}));},[t]),D=useCallback((a,m)=>{t(c=>({...c,pinnedColumns:{left:m==="left"?[...c.pinnedColumns.left,a]:c.pinnedColumns.left.filter(z=>z!==a),right:m==="right"?[...c.pinnedColumns.right,a]:c.pinnedColumns.right.filter(z=>z!==a)}}));},[t]),g$1=useCallback((a,m)=>{t(c=>({...c,columnSizing:{columnSizes:{...c.columnSizing.columnSizes,[a]:m}}}));},[t]),H=useCallback((a,m)=>{var z;let c=d.columnSizing.columnSizes[a]||((z=document.querySelector(`[data-column-id="${a}"]`))==null?void 0:z.getBoundingClientRect().width)||100;u({startX:m,currentX:m,deltaX:0,isResizingColumn:a,columnSizingStart:{[a]:c}});},[d.columnSizing.columnSizes]),x=useCallback(a=>{var E;if(!l.isResizingColumn)return;let m=l.isResizingColumn,c=l.columnSizingStart[m]||0,z=a-((E=l.startX)!=null?E:0),M=Math.min(Math.max(c+z,50),800);g$1(m,M),u(V=>({...V,currentX:a,deltaX:z}));},[l,g$1]),k=useCallback(()=>{u({startX:null,currentX:null,deltaX:null,isResizingColumn:!1,columnSizingStart:{}});},[]);return {state:d,updateState:t,resetState:s,setData:C,toggleColumnVisibility:f,toggleColumnPin:D,updateColumnSizing:g$1,columnResizeInfo:l,handleColumnResizeStart:H,handleColumnResizeMove:x,handleColumnResizeEnd:k,columnResizeMode:T,columnResizeDirection:h,debouncedFilterValue:e}}function j({state:i,updateState:o,events:n}){let b=useCallback(l=>{var t;let u=i.sortColumn===l.id&&i.sortDirection==="asc"?"desc":"asc";o({sortColumn:l.id,sortDirection:u}),(t=n==null?void 0:n.onSort)==null||t.call(n,l,u);},[i.sortColumn,i.sortDirection,o,n]),y=useCallback((l,u)=>{var t;o({filterValue:l}),(t=n==null?void 0:n.onFilter)==null||t.call(n,l,u);},[o,n]),T=useCallback((l,u)=>{var t;o({columnSizing:{columnSizes:{...i.columnSizing.columnSizes,[String(l)]:u}}}),(t=n==null?void 0:n.onColumnResize)==null||t.call(n,l,u);},[i.columnSizing.columnSizes,o,n]),h=useCallback((l,u)=>{var t;o({visibleColumns:u?[...i.visibleColumns,l]:i.visibleColumns.filter(s=>s!==l)}),(t=n==null?void 0:n.onColumnVisibilityChange)==null||t.call(n,l,u);},[i.visibleColumns,o,n]),d=useCallback((l,u)=>{var t;o({pinnedColumns:{left:u==="left"?[...i.pinnedColumns.left,l]:i.pinnedColumns.left.filter(s=>s!==l),right:u==="right"?[...i.pinnedColumns.right,l]:i.pinnedColumns.right.filter(s=>s!==l)}}),(t=n==null?void 0:n.onColumnPin)==null||t.call(n,l,u);},[i.pinnedColumns,o,n]),p=useCallback((l,u)=>{var t;(t=n==null?void 0:n.onRowSelect)==null||t.call(n,l,u);},[n]),e=useCallback(l=>{var u;(u=n==null?void 0:n.onStateChange)==null||u.call(n,l);},[n]),r=useCallback(l=>{let{key:u,ctrlKey:t}=l;switch(u){case"ArrowDown":break;case"ArrowUp":break;case"Space":break;case"a":t&&l.preventDefault();break}},[]);return {handleSort:b,handleFilterChange:y,handleColumnResize:T,handleColumnVisibilityChange:h,handleColumnPin:d,handleRowSelect:p,handleStateChange:e,handleKeyDown:r}}function G({data:i$1,columns:o,initialState:n,onStateChange:b,events:y,columnResizeMode:T,columnResizeDirection:h,debounceMs:d,isLoading:p,serverSide:e}){var E;let{state:r,updateState:l,resetState:u,setData:t,updateColumnSizing:s,columnResizeInfo:C,handleColumnResizeStart:f,handleColumnResizeMove:D,handleColumnResizeEnd:g,columnResizeMode:H,columnResizeDirection:x}=K({data:i$1,columns:o,initialState:{...n,loading:p||(e==null?void 0:e.loading)},onStateChange:b,columnResizeMode:T,columnResizeDirection:h,debounceMs:d});useEffect(()=>{l(V=>({...V,loading:p||(e==null?void 0:e.loading)}));},[p,e==null?void 0:e.loading,l]);let{handleSort:k,handleFilterChange:a,handleColumnResize:m,handleColumnVisibilityChange:c,handleColumnPin:z,handleRowSelect:U,handleStateChange:W}=j({state:r,updateState:l,events:y}),M=useMemo(()=>e!=null&&e.enabled?r.data:i(r.data,r,o),[r,o,e==null?void 0:e.enabled]);return useEffect(()=>{e!=null&&e.enabled&&e.onFetch&&(async()=>{try{let I=await e.onFetch({page:e.currentPage,pageSize:e.pageSize,sortColumn:r.sortColumn,sortDirection:r.sortDirection,filters:r.filterValue?{search:r.filterValue}:void 0});t(I);}catch(I){console.error("Error fetching data:",I);}})();},[e==null?void 0:e.enabled,e==null?void 0:e.currentPage,e==null?void 0:e.pageSize,r.sortColumn,r.sortDirection,r.filterValue,t,e]),{state:r,columns:o,data:r.data,filteredData:M,visibleColumns:r.visibleColumns,toggleColumnVisibility:c,pinnedColumns:r.pinnedColumns,toggleColumnPin:z,sortColumn:r.sortColumn,sortDirection:r.sortDirection,handleSort:k,filterValue:(E=r.filterValue)!=null?E:"",setFilterValue:V=>a(V,M),columnSizing:r.columnSizing,columnResizeInfo:C,columnResizeMode:H,columnResizeDirection:x,handleColumnResize:m,handleColumnResizeStart:f,handleColumnResizeMove:D,handleColumnResizeEnd:g,updateColumnSizing:s,handleRowSelect:U,resetState:u,setData:t,handleStateChange:W,serverSide:e}}var ut=G;export{Y as a,K as b,j as c,ut as d};