flexi-datagrid 1.2.3 → 1.2.4

package/dist/index.es.js

@@ -243,6 +243,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 			[i ? "right" : "left"]: `${r.offset}px`,
 			...t ? { top: 0 } : {},
 			zIndex: t ? 30 : 20,
+			background: "#f8fafc",
 			boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 			...n
 		};

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `),m=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e};function h({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:h,containerStyle:g,tableStyle:ee,bordered:te=!1,pinnedBottomRowData:_=[],pinnedRowClassName:v}){let[y,b]=(0,n.useState)(null),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(``),[T,E]=(0,n.useState)(null),D=(0,n.useRef)(new Map),[O,k]=(0,n.useState)(u),[A,j]=(0,n.useState)({}),[ne,M]=(0,n.useState)(!1),[N,re]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,ie]=(0,n.useState)(()=>{let e={};return P.forEach(t=>{let n=m(t.pinned);n&&(e[t.key]=n)}),e}),I=(0,n.useMemo)(()=>{let t=e=>{let n=e=>{let t=F[e];return t===`left`?0:t===`right`?2:1};return[...e].sort((e,t)=>n(e.key)-n(t.key)).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e)};return t(e)},[e,F]),L=(0,n.useMemo)(()=>{let e=f(I),t=l?O:[];return e.filter(e=>!t.includes(e.key))},[I,O,l]),R=(0,n.useRef)(null),z=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=y?D.current.get(y):null;z.current&&!z.current.contains(t)&&!(n&&n.contains(t))&&(b(null),w(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[y]),(0,n.useEffect)(()=>{if(!y)return;let e=()=>{let e=D.current.get(y),t=R.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();E({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[y]);let ae=e=>typeof o==`function`?o(e):String(e[o]),oe=e=>{ie(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},B=e=>{let t=`asc`;N.key===e&&(t=N.direction===`asc`?`desc`:N.direction===`desc`?null:`asc`),re({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),M(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!O.includes(t)){let e=[...O,t];k(e),h&&h(e)}},U=e=>{let t=O.filter(t=>t!==e);k(t),j({}),h&&h(t)},W=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(I),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?O.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?O:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(I,0),n.filter(e=>e.length>0)},[I,O,l]),G=e=>{let t=e.style?.width||e.headerStyle?.width||`150px`;return typeof t==`number`?t:parseInt(String(t),10)||150},K=(0,n.useMemo)(()=>{let e={},t=0;l&&O.length>0&&(t+=48),L.forEach(n=>{F[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=G(n))});let n=s?100:0;for(let t=L.length-1;t>=0;t--){let r=L[t];F[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=G(r))}return e},[L,F,O,l,s]),se=(e,t)=>{S(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},q=e=>{S(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!y)return[];let e=P.find(e=>e.key===y),t=a.map(t=>e?.getValue?e.getValue(t):t[y]),n=Array.from(new Set(t)).filter(e=>e!=null);return C.trim()?n.filter(e=>String(e).toLowerCase().includes(C.toLowerCase())):n},[a,y,C,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(x).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(N.key&&N.direction){let{key:t,direction:n}=N,r=P.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,x,N,P]),X=(0,n.useMemo)(()=>{if(!l||O.length===0)return Y;let e=(t,n,r=``)=>{if(n>=O.length)return t;let i=O[n],a=P.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(Y,0)},[Y,O,l,P]),ce=e=>{j(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||O.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),A[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,A,O,l]),Q=(e,t=!1,n)=>{let r=K[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},le=(0,n.useMemo)(()=>_.map((e,t)=>(_.length-1-t)*48),[_]),$=L.length+ +!!s+(l&&O.length>0?1:0);return(0,i.jsxs)(`div`,{ref:R,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),M(!0)},onDragLeave:()=>M(!1),onDrop:H,className:p(`flexi-groupzone`,ne&&`flexi-groupzone--dragover`),children:O.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),O.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>U(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:g,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,te&&`flexi-table--bordered`),style:ee,children:[(0,i.jsxs)(`colgroup`,{children:[l&&O.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),L.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&O.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(x[e.key]?.length||0)>0,s=!!F[e.key],c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=N.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>V(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&B(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&N.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&N.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?D.current.set(e.key,t):D.current.delete(e.key)},onClick:t=>{t.stopPropagation(),w(``),b(y===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),oe(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:F[e.key]===`left`?`Pinned left (click to pin right)`:F[e.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),y===e.key&&u&&T&&R.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:z,className:`flexi-filter-dropdown`,style:{top:T.top,left:T.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:C,onChange:e=>w(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:x[e.key]?.includes(t)||!1,onChange:()=>se(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>q(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),R.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-actions-th`,style:{position:`sticky`,top:0,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,t)=>ue(e,t))}),_.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:_.map((e,t)=>de(e,t))})]})})]});function ue(e,n){if(e.isGroupRow){let r=A[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>ce(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}let r=ae(e);return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,!!F[t.key]&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function de(e,t){let n=typeof v==`function`?v(e,t):v,r={position:`sticky`,bottom:`${le[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style),a=!!F[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=h});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `),m=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e};function h({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:h,containerStyle:g,tableStyle:ee,bordered:te=!1,pinnedBottomRowData:_=[],pinnedRowClassName:v}){let[y,b]=(0,n.useState)(null),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(``),[T,E]=(0,n.useState)(null),D=(0,n.useRef)(new Map),[O,k]=(0,n.useState)(u),[A,j]=(0,n.useState)({}),[ne,M]=(0,n.useState)(!1),[N,re]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,ie]=(0,n.useState)(()=>{let e={};return P.forEach(t=>{let n=m(t.pinned);n&&(e[t.key]=n)}),e}),I=(0,n.useMemo)(()=>{let t=e=>{let n=e=>{let t=F[e];return t===`left`?0:t===`right`?2:1};return[...e].sort((e,t)=>n(e.key)-n(t.key)).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e)};return t(e)},[e,F]),L=(0,n.useMemo)(()=>{let e=f(I),t=l?O:[];return e.filter(e=>!t.includes(e.key))},[I,O,l]),R=(0,n.useRef)(null),z=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=y?D.current.get(y):null;z.current&&!z.current.contains(t)&&!(n&&n.contains(t))&&(b(null),w(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[y]),(0,n.useEffect)(()=>{if(!y)return;let e=()=>{let e=D.current.get(y),t=R.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();E({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[y]);let ae=e=>typeof o==`function`?o(e):String(e[o]),oe=e=>{ie(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},B=e=>{let t=`asc`;N.key===e&&(t=N.direction===`asc`?`desc`:N.direction===`desc`?null:`asc`),re({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),M(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!O.includes(t)){let e=[...O,t];k(e),h&&h(e)}},U=e=>{let t=O.filter(t=>t!==e);k(t),j({}),h&&h(t)},W=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(I),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?O.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?O:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(I,0),n.filter(e=>e.length>0)},[I,O,l]),G=e=>{let t=e.style?.width||e.headerStyle?.width||`150px`;return typeof t==`number`?t:parseInt(String(t),10)||150},K=(0,n.useMemo)(()=>{let e={},t=0;l&&O.length>0&&(t+=48),L.forEach(n=>{F[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=G(n))});let n=s?100:0;for(let t=L.length-1;t>=0;t--){let r=L[t];F[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=G(r))}return e},[L,F,O,l,s]),se=(e,t)=>{S(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},q=e=>{S(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!y)return[];let e=P.find(e=>e.key===y),t=a.map(t=>e?.getValue?e.getValue(t):t[y]),n=Array.from(new Set(t)).filter(e=>e!=null);return C.trim()?n.filter(e=>String(e).toLowerCase().includes(C.toLowerCase())):n},[a,y,C,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(x).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(N.key&&N.direction){let{key:t,direction:n}=N,r=P.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,x,N,P]),X=(0,n.useMemo)(()=>{if(!l||O.length===0)return Y;let e=(t,n,r=``)=>{if(n>=O.length)return t;let i=O[n],a=P.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(Y,0)},[Y,O,l,P]),ce=e=>{j(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||O.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),A[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,A,O,l]),Q=(e,t=!1,n)=>{let r=K[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,background:`#f8fafc`,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},le=(0,n.useMemo)(()=>_.map((e,t)=>(_.length-1-t)*48),[_]),$=L.length+ +!!s+(l&&O.length>0?1:0);return(0,i.jsxs)(`div`,{ref:R,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),M(!0)},onDragLeave:()=>M(!1),onDrop:H,className:p(`flexi-groupzone`,ne&&`flexi-groupzone--dragover`),children:O.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),O.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>U(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:g,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,te&&`flexi-table--bordered`),style:ee,children:[(0,i.jsxs)(`colgroup`,{children:[l&&O.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),L.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&O.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(x[e.key]?.length||0)>0,s=!!F[e.key],c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=N.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>V(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&B(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&N.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&N.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?D.current.set(e.key,t):D.current.delete(e.key)},onClick:t=>{t.stopPropagation(),w(``),b(y===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),oe(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:F[e.key]===`left`?`Pinned left (click to pin right)`:F[e.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),y===e.key&&u&&T&&R.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:z,className:`flexi-filter-dropdown`,style:{top:T.top,left:T.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:C,onChange:e=>w(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:x[e.key]?.includes(t)||!1,onChange:()=>se(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>q(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),R.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-actions-th`,style:{position:`sticky`,top:0,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,t)=>ue(e,t))}),_.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:_.map((e,t)=>de(e,t))})]})})]});function ue(e,n){if(e.isGroupRow){let r=A[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>ce(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}let r=ae(e);return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,!!F[t.key]&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function de(e,t){let n=typeof v==`function`?v(e,t):v,r={position:`sticky`,bottom:`${le[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style),a=!!F[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=h});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexi-datagrid",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
   "type": "module",
   "main": "./dist/index.umd.js",