@vuu-ui/vuu-table 0.6.25 → 0.6.26-debug

package/cjs/index.js

@@ -1,2 +1,2769 @@
-"use strict";var Wn=Object.create;var Ee=Object.defineProperty;var Gn=Object.getOwnPropertyDescriptor;var On=Object.getOwnPropertyNames;var Bn=Object.getPrototypeOf,Un=Object.prototype.hasOwnProperty;var _n=(e,t)=>{for(var n in t)Ee(e,n,{get:t[n],enumerable:!0})},dt=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of On(t))!Un.call(e,r)&&r!==n&&Ee(e,r,{get:()=>t[r],enumerable:!(o=Gn(t,r))||o.enumerable});return e};var j=(e,t,n)=>(n=e!=null?Wn(Bn(e)):{},dt(t||!e||!e.__esModule?Ee(n,"default",{value:e,enumerable:!0}):n,e)),Jn=e=>dt(Ee({},"__esModule",{value:!0}),e);var jo={};_n(jo,{Table:()=>_o,useMeasuredContainer:()=>st});module.exports=Jn(jo);var Mn=require("@vuu-ui/vuu-popups"),Ve=require("@salt-ds/core");var Kt=require("@vuu-ui/vuu-utils"),kt=require("react"),zt=j(require("classnames"));var O=require("@vuu-ui/vuu-utils"),vt=j(require("classnames")),ve=require("react");var Ae=require("@vuu-ui/vuu-utils"),ft=require("@heswell/salt-lab"),gt=j(require("classnames")),Z=require("react");var ye=require("react/jsx-runtime"),{KEY:pt}=Ae.metadataKeys,Oe=(0,Z.memo)(({className:e,column:t,onClick:n,row:o})=>{let r=(0,Z.useRef)(null),{align:l,CellRenderer:s,key:i,pin:a,editable:m,resizing:c,valueFormatter:d}=t,[C,y]=(0,Z.useState)(!1),w=d(o[i]),[u,f]=(0,Z.useState)(w),g=()=>{var z;(z=r.current)==null||z.focus()},p=z=>{z.key==="Enter"&&y(!0)},v=(0,Z.useCallback)(()=>{n==null||n(t)},[t,n]),E=()=>{y(!0)},L=(z="",G="",b=!0,M=!1)=>{var x;y(!1),M?f(z):G!==z&&f(G),b===!1&&((x=r.current)==null||x.focus())},h=(0,gt.default)(e,{vuuAlignRight:l==="right",vuuPinFloating:a==="floating",vuuPinLeft:a==="left",vuuPinRight:a==="right","vuuTableCell-resizing":c})||void 0,R=(0,Ae.getColumnPinStyle)(t);return m?(0,ye.jsx)("td",{className:h,"data-editable":!0,style:R,onKeyDown:p,children:(0,ye.jsx)(ft.EditableLabel,{editing:C,value:u,onChange:f,onMouseDownCapture:g,onEnterEditMode:E,onExitEditMode:L,onKeyDown:p,ref:r,tabIndex:0},"title")}):(0,ye.jsx)("td",{className:h,style:R,onClick:v,children:s?(0,ye.jsx)(s,{column:t,row:o}):w})},Xn);Oe.displayName="TableCell";function Xn(e,t){return e.column===t.column&&e.onClick===t.onClick&&e.row[pt]===t.row[pt]&&e.row[e.column.key]===t.row[t.column.key]}var Ct=require("@vuu-ui/vuu-utils"),bt=require("react");var de=require("react/jsx-runtime"),{DEPTH:Yn,IS_LEAF:ht}=Ct.metadataKeys,Qn=(e,t)=>{let{[Yn]:n,[ht]:o}=t;if(o||n>e.length)return[null,n===null?0:n-1];if(n===0)return["$root",0];{let{key:r,valueFormatter:l}=e[n-1];return[l(t[r]),n-1]}},yt=({column:e,onClick:t,row:n})=>{let{columns:o}=e,[r,l]=Qn(o,n),s=(0,bt.useCallback)(()=>{t==null||t(e)},[e,t]),i={left:e.pin=="left"?e.pinnedOffset:void 0},a=n[ht],m=Array(l).fill(0).map((c,d)=>(0,de.jsx)("span",{className:"vuuTableGroupCell-spacer"},d));return(0,de.jsxs)("td",{className:"vuuTableGroupCell vuuPinLeft",onClick:a?void 0:s,style:i,children:[m,a?null:(0,de.jsx)("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),(0,de.jsx)("span",{children:r})]})};var we=require("react/jsx-runtime"),{IDX:jn,IS_EXPANDED:Zn,SELECTED:qn}=O.metadataKeys,Le="vuuTableRow",Ke=(0,ve.memo)(function({columns:t,height:n,index:o,onClick:r,onToggleGroup:l,virtualColSpan:s=0,row:i}){let{[jn]:a,[Zn]:m,[qn]:c}=i,d=(0,vt.default)(Le,{[`${Le}-even`]:a%2===0,[`${Le}-expanded`]:m,[`${Le}-preSelected`]:c===2}),C=a-o,y=(0,ve.useCallback)(u=>{let f=u.shiftKey,g=u.ctrlKey||u.metaKey;r==null||r(i,f,g)},[r,i]),w=(0,ve.useCallback)(u=>{((0,O.isGroupColumn)(u)||(0,O.isJsonGroup)(u,i))&&(l==null||l(i,u))},[l,i]);return(0,we.jsxs)("tr",{"aria-selected":c===1?!0:void 0,"aria-rowindex":a,className:d,onClick:y,style:{transform:`translate(0px, ${C*n}px)`},children:[s>0?(0,we.jsx)("td",{colSpan:s}):null,t.filter(O.notHidden).map(u=>{let f=(0,O.isGroupColumn)(u),g=(0,O.isJsonColumn)(u);return(0,we.jsx)(f?yt:Oe,{column:u,onClick:f||g?w:void 0,row:i},u.name)})]})});var Et=j(require("classnames")),ae=require("react");var pe=require("react");var Mt=require("react/jsx-runtime"),wt=()=>{},eo="vuuColumnResizer",ke=({onDrag:e,onDragEnd:t=wt,onDragStart:n=wt})=>{let o=(0,pe.useRef)(0),r=(0,pe.useCallback)(i=>{i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault();let a=Math.round(i.clientX),m=a-o.current;o.current=a,m!==0&&e(i,m)},[e]),l=(0,pe.useCallback)(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",r),t(i)},[t,r]),s=(0,pe.useCallback)(i=>{n(i),o.current=Math.round(i.clientX),window.addEventListener("mouseup",l),window.addEventListener("mousemove",r),i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault()},[n,r,l]);return(0,Mt.jsx)("div",{className:eo,onMouseDown:s})};var Be=j(require("classnames"));var le=require("react/jsx-runtime"),Tt="vuuSortIndicator",Dt=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?(0,le.jsxs)("div",{className:(0,Be.default)(Tt,"multi-col",t),children:[(0,le.jsx)("span",{"data-icon":`sorted-${t}`}),(0,le.jsx)("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):(0,le.jsx)("div",{className:(0,Be.default)(Tt,"single-col"),children:(0,le.jsx)("span",{"data-icon":`sorted-${t}`})})};var ie=require("react"),ze=({column:e,onResize:t,rootRef:n})=>{let o=(0,ie.useRef)(0),r=(0,ie.useRef)(!1),{name:l}=e,s=(0,ie.useCallback)(()=>{if(t&&n.current){let{width:m}=n.current.getBoundingClientRect();o.current=Math.round(m),r.current=!0,t==null||t("begin",l)}},[l,t,n]),i=(0,ie.useCallback)((m,c)=>{if(n.current&&t){let{width:d}=n.current.getBoundingClientRect(),C=Math.round(d)+c;C!==o.current&&C>0&&(t("resize",l,C),o.current=C)}},[l,t,n]),a=(0,ie.useCallback)(()=>{t&&(t("end",l,o.current),setTimeout(()=>{r.current=!1},100))},[l,t]);return{isResizing:r.current,onDrag:i,onDragStart:s,onDragEnd:a}};var At=require("@vuu-ui/vuu-popups");var xt=require("@vuu-ui/vuu-popups"),Rt=j(require("classnames")),Ht=require("react");var St=require("react/jsx-runtime");var Pt=({column:e,filter:t})=>{let n=(0,xt.useContextMenu)(),o=(0,Ht.useCallback)(r=>{r.stopPropagation(),n(r,"filter",{column:e,filter:t})},[e,t,n]);return e.filter?(0,St.jsx)("div",{className:(0,Rt.default)("vuuFilterIndicator"),"data-icon":"filter",onClick:o}):null};var ne=require("react/jsx-runtime"),Me="vuuTable-headerCell",Ne=({column:e,className:t,onClick:n,onDragStart:o,onResize:r,...l})=>{let s=(0,ae.useRef)(null),{isResizing:i,...a}=ze({column:e,onResize:r,rootRef:s}),m=(0,At.useContextMenu)(),c=(0,ae.useRef)(null),d=f=>{m(f,"header",{column:e})},C=(0,ae.useCallback)(f=>!i&&(n==null?void 0:n(f)),[i,n]),y=(0,ae.useCallback)(f=>{c.current=window.setTimeout(()=>{o==null||o(f),c.current=null},250)},[o]),w=(0,ae.useCallback)(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),u=(0,Et.default)(Me,t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:e.endPin,[`${Me}-resizing`]:e.resizing,[`${Me}-right`]:e.align==="right"});return(0,ne.jsx)("th",{className:u,...l,onClick:C,onContextMenu:d,onMouseDown:y,onMouseUp:w,ref:s,children:(0,ne.jsxs)("div",{className:`${Me}-inner`,children:[(0,ne.jsx)(Pt,{column:e}),(0,ne.jsx)("div",{className:`${Me}-label`,children:e.label}),(0,ne.jsx)(Dt,{sorted:e.sorted}),e.resizeable!==!1?(0,ne.jsx)(ke,{...a}):null]})})};var B=require("react/jsx-runtime"),Lt="vuuTable",{RENDER_IDX:to}=Kt.metadataKeys,Nt=({columns:e,data:t,headerHeight:n,onHeaderCellDragEnd:o,rowHeight:r})=>{let l=(0,kt.useCallback)(()=>{o==null||o()},[o]);return console.log("ColumnBasedTable render"),(0,B.jsx)(B.Fragment,{children:e.map((s,i)=>(0,B.jsx)("table",{className:(0,zt.default)(`${Lt}-table`,`${Lt}-columnBased`,{vuuPinLeft:s.pin==="left"}),"data-idx":i,id:`col-${i}`,style:{width:s.width,left:s.pinnedOffset,"--vuuTableHeaderHeight":`${n}px`,"--row-height":`${r}px`},children:(0,B.jsxs)("tbody",{children:[(0,B.jsx)("tr",{children:(0,B.jsx)(Ne,{column:s,"data-idx":i,onDragEnd:l},i)},"header"),t.map((a,m)=>(0,B.jsx)(Ke,{columns:[s],height:r,index:m,row:a},a[to])),(0,B.jsx)("tr",{className:"vuuTable-filler"})]})},s.name))})};var It=require("@vuu-ui/vuu-utils"),Vt=e=>(t,n)=>{let o=[];if(e===void 0)return o;if(t==="header")o.push(...no(n,e)),o.push(...so(n,e)),o.push(...oo(n,e)),o.push(...ro(n));else if(t==="filter"){let{column:r,filter:l}=n,s=(l==null?void 0:l.column)===(r==null?void 0:r.name);o.push({label:"Edit filter",action:"filter-edit",options:n}),o.push({label:"Remove filter",action:"filter-remove-column",options:n}),r&&!s&&o.push({label:"Remove all filters",action:"remove-filters",options:n})}return o};function no(e,{sort:{sortDefs:t}}){let{column:n}=e,o=[];if(n===void 0)return o;let r=t.length>0;return n.sorted==="A"?o.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):n.sorted==="D"?o.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof n.sorted=="number"?(n.sorted>0?o.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):o.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),r&&Math.abs(n.sorted)<t.length&&o.push({label:"Remove from sort",action:"sort-remove",options:e}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r?(o.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):o.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),o}function oo(e,t){let{column:n}=e;if(n===void 0||t.groupBy.length===0)return[];let{name:o,label:r=o}=n;return[{label:`Aggregate ${r}`,children:[{label:"Count",action:"agg-count",options:e}].concat((0,It.isNumericColumn)(n)?[{label:"Sum",action:"agg-sum",options:e},{label:"Avg",action:"agg-avg",options:e},{label:"High",action:"agg-high",options:e},{label:"Low",action:"agg-low",options:e}]:[])}]}var Xe=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),Ue=e=>Xe(e,"left"),_e=e=>Xe(e,"floating"),Je=e=>Xe(e,"right");function ro(e){let{column:t}=e;if(t===void 0)return[];let{pin:n}=t,o=[{label:"Hide column",action:"column-hide",options:e},{label:"Remove column",action:"column-remove",options:e}];return n===void 0?o.push({label:"Pin column",children:[Ue(e),_e(e),Je(e)]}):n==="left"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[_e(e),Je(e)]}):n==="right"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Ue(e),_e(e)]}):n==="floating"&&o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Ue(e),Je(e)]}),o}function so(e,{groupBy:t}){let{column:n}=e,o=[];if(n===void 0)return o;let{name:r,label:l=r}=n;return t.length===0?o.push({label:`Group by ${l}`,action:"group",options:e}):o.push({label:`Add ${l} to group by`,action:"group-add",options:e}),o}var Ft=require("@vuu-ui/vuu-filters"),I=require("@vuu-ui/vuu-utils"),lo=(e,t)=>{if(e.filterStruct&&t){let[n,o]=(0,Ft.removeColumnFromFilter)(t,e.filterStruct);return{filter:o,filterStruct:n}}else return e},{Average:io,Count:ao,High:co,Low:uo,Sum:mo}=I.AggregationType,$t=({dataSource:e,onPersistentColumnOperation:t})=>(o,r)=>{let l=r;if(l.column&&e){let{column:s}=l;switch(o){case"sort-asc":return e.sort=(0,I.setSortColumn)(e.sort,s,"A"),!0;case"sort-dsc":return e.sort=(0,I.setSortColumn)(e.sort,s,"D"),!0;case"sort-add-asc":return e.sort=(0,I.addSortColumn)(e.sort,s,"A"),!0;case"sort-add-dsc":return e.sort=(0,I.addSortColumn)(e.sort,s,"D"),!0;case"group":return e.groupBy=(0,I.addGroupColumn)(e.groupBy,s),!0;case"group-add":return e.groupBy=(0,I.addGroupColumn)(e.groupBy,s),!0;case"column-hide":return t({type:"hideColumns",columns:[s]}),!0;case"column-remove":return e.columns=e.columns.filter(i=>i!==s.name),!0;case"filter-remove-column":return e.filter=lo(e.filter,s),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=(0,I.setAggregations)(e.aggregations,s,io),!0;case"agg-high":return e.aggregations=(0,I.setAggregations)(e.aggregations,s,co),!0;case"agg-low":return e.aggregations=(0,I.setAggregations)(e.aggregations,s,uo),!0;case"agg-count":return e.aggregations=(0,I.setAggregations)(e.aggregations,s,ao),!0;case"agg-sum":return e.aggregations=(0,I.setAggregations)(e.aggregations,s,mo),!0;case"column-pin-floating":return t({type:"pinColumn",column:s,pin:"floating"}),!0;case"column-pin-left":return t({type:"pinColumn",column:s,pin:"left"}),!0;case"column-pin-right":return t({type:"pinColumn",column:s,pin:"right"}),!0;case"column-unpin":return t({type:"pinColumn",column:s,pin:void 0}),!0;default:}}return!1};var _=require("@vuu-ui/vuu-utils"),Te=require("react");var Ye=j(require("classnames")),Wt=require("react");var q=require("react/jsx-runtime"),oe="vuuTable-groupHeaderCell",po=e=>{let{column:t,className:n,onRemoveColumn:o}=e;return(0,q.jsxs)("div",{className:(0,Ye.default)(`${oe}-col`,n),role:"columnheader",children:[(0,q.jsx)("span",{className:`${oe}-label`,children:t.name}),(0,q.jsx)("span",{className:`${oe}-close`,"data-icon":"close-circle",onClick:()=>o==null?void 0:o(t)})]})},Gt=({column:e,className:t,onRemoveColumn:n,onResize:o,...r})=>{let l=(0,Wt.useRef)(null),{isResizing:s,...i}=ze({column:e,onResize:o,rootRef:l}),a=(0,Ye.default)(oe,t,{vuuPinLeft:e.pin==="left",[`${oe}-right`]:e.align==="right",[`${oe}-resizing`]:e.resizing,[`${oe}-pending`]:e.groupConfirmed===!1}),{columns:m}=e;return(0,q.jsx)("th",{className:a,ref:l,...r,children:(0,q.jsxs)("div",{className:`${oe}-inner`,children:[m.map(c=>(0,q.jsx)(po,{column:c,onRemoveColumn:n},c.key)),e.resizeable!==!1?(0,q.jsx)(ke,{...i}):null]})})};var V=require("react/jsx-runtime"),Ot="vuuTable",{RENDER_IDX:fo}=_.metadataKeys,Bt=({columns:e,columnsWithinViewport:t,data:n,headings:o,onColumnResize:r,onHeaderCellDragStart:l,onContextMenu:s,onRemoveColumnFromGroupBy:i,onRowClick:a,onSort:m,onToggleGroup:c,virtualColSpan:d=0,rowCount:C,rowHeight:y})=>{let w=(0,Te.useCallback)(g=>{l==null||l(g)},[l]),u=(0,Te.useMemo)(()=>e.filter(_.notHidden),[e]),f=(0,Te.useCallback)(g=>{var R;let v=g.target.closest(".vuuTable-headerCell"),E=parseInt((R=v==null?void 0:v.dataset.idx)!=null?R:"-1"),L=(0,_.visibleColumnAtIndex)(e,E),h=g.shiftKey;L&&m(L,h)},[e,m]);return(0,V.jsxs)("table",{"aria-rowcount":C,className:`${Ot}-table`,children:[(0,V.jsx)("colgroup",{children:u.map((g,p)=>(0,V.jsx)("col",{width:`${g.width}px`},p))}),(0,V.jsxs)("thead",{children:[o.map((g,p)=>(0,V.jsx)("tr",{className:"vuuTable-heading",children:g.map(({label:v,span:E},L)=>(0,V.jsx)("th",{colSpan:E,className:"vuuTable-headingCell",children:v},L))},p)),(0,V.jsx)("tr",{children:u.map((g,p)=>{let v=(0,_.getColumnPinStyle)(g);return(0,_.isGroupColumn)(g)?(0,V.jsx)(Gt,{column:g,"data-idx":p,onRemoveColumn:i,onResize:r,style:v},p):(0,V.jsx)(Ne,{column:g,"data-idx":p,onClick:f,onDragStart:w,onResize:r,style:v},p)})})]}),(0,V.jsxs)("tbody",{onContextMenu:s,children:[n==null?void 0:n.map((g,p)=>(0,V.jsx)(Ke,{columns:t,height:y,index:p,onClick:a,virtualColSpan:d,onToggleGroup:c,row:g},g[fo])),(0,V.jsx)("tr",{className:`${Ot}-filler`})]})]})};var vn=require("@vuu-ui/vuu-popups"),J=require("@vuu-ui/vuu-utils"),S=require("react");var Ie=require("@vuu-ui/vuu-data"),re=require("@vuu-ui/vuu-utils"),P=require("react"),{SELECTED:De}=re.metadataKeys;function Ut({dataSource:e,onConfigChange:t,onFeatureEnabled:n,onFeatureInvocation:o,onSizeChange:r,onSubscribed:l,range:s={from:0,to:0},renderBufferSize:i=0,viewportRowCount:a}){let[,m]=(0,P.useState)(null),c=(0,P.useRef)(!0),d=(0,P.useRef)(!1),C=(0,P.useRef)({from:0,to:0}),y=(0,P.useRef)(null),w=(0,P.useRef)([]),u=(0,P.useMemo)(()=>new Qe((0,re.getFullRange)(s)),[]),f=(0,P.useCallback)(h=>{for(let R of h)u.add(R);w.current=u.data,d.current=!0},[u]),g=(0,P.useCallback)(h=>{h.type==="subscribed"?l==null||l(h):h.type==="viewport-update"?(typeof h.size=="number"&&(r==null||r(h.size),u.setRowCount(h.size)),h.rows?f(h.rows):typeof h.size=="number"&&(w.current=u.data,d.current=!0)):(0,Ie.isVuuFeatureAction)(h)?n==null||n(h):(0,Ie.isVuuFeatureInvocation)(h)?o==null||o(h):console.log(`useDataSource unexpected message ${h.type}`)},[u,n,o,r,l,f]);(0,P.useEffect)(()=>()=>{y.current&&(cancelAnimationFrame(y.current),y.current=null),c.current=!1},[]);let p=(0,P.useCallback)(()=>{c.current&&(d.current&&(m({}),d.current=!1),y.current=requestAnimationFrame(p))},[m]);(0,P.useEffect)(()=>{y.current=requestAnimationFrame(p)},[p]);let v=(0,P.useCallback)(h=>{let{from:R}=e.range,z={from:R,to:R+h},G=(0,re.getFullRange)(z,i);e.range=C.current=G,e.emit("range",z),u.setRange(G)},[e,u,i]),E=(0,P.useCallback)(h=>{let R=(0,re.getFullRange)(h,i);e.range=C.current=R,u.setRange(R),e.emit("range",h)},[e,u,i]),L=(0,P.useCallback)(()=>u.getSelectedRows(),[u]);return(0,P.useEffect)(()=>{e==null||e.subscribe({range:C.current},g)},[e,g,t]),(0,P.useEffect)(()=>{v(a)},[v,a]),{data:w.current,getSelectedRows:L,range:C.current,setRange:E,dataSource:e}}var Qe=class{constructor({from:t,to:n}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new re.WindowRange(t,n),this.data=new Array(n-t),this.rowCount=0}add(t){var o;let[n]=t;if(this.isWithinRange(n)){let r=n-this.range.from;this.data[r]=t;let l=t[De],s=(o=this.data[r-1])==null?void 0:o[De];s===0&&l?this.data[r-1][De]=2:s===2&&!l&&(this.data[r-1][De]=0)}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange({from:t,to:n}){if(t!==this.range.from||n!==this.range.to){let[o,r]=this.range.overlap(t,n),l=new Array(n-t);for(let s=o;s<r;s++){let i=this.getAtIndex(s);if(i){let a=s-t;l[a]=i}}this.data=l,this.range.from=t,this.range.to=n}}getSelectedRows(){return this.data.filter(t=>t[De]===1)}};var _t=require("@heswell/salt-lab"),ee=require("react"),Jt=({onDrop:e,tableContainerRef:t,tableLayout:n})=>{let[o,r]=(0,ee.useState)(n),l=(0,ee.useRef)(),s=(0,ee.useCallback)(()=>{console.log("handleDropSettle"),l.current=void 0,r("row")},[]),{draggable:i,draggedItemIndex:a,onMouseDown:m}=(0,_t.useDragDrop)({allowDragDrop:!0,draggableClassName:"table-column",orientation:"horizontal",containerRef:t,itemQuery:".vuuTable-table",onDrop:e,onDropSettle:s}),c=(0,ee.useCallback)(d=>{let{clientX:C,clientY:y}=d;console.log("useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable");let u=d.target.closest(".vuuTable-headerCell"),{dataset:{idx:f="-1"}}=u;l.current={clientX:C,clientY:y,idx:f},r("column")},[]);return(0,ee.useLayoutEffect)(()=>{var d;if(o==="column"&&l.current&&!i){let{clientX:C,clientY:y,idx:w}=l.current,u=(d=t.current)==null?void 0:d.querySelector(`.vuuTable-table[data-idx="${w}"]`);if(u){let f={persist:()=>{},nativeEvent:{clientX:C,clientY:y,target:u}};m==null||m(f)}}},[i,m,t,o]),{draggable:i,draggedItemIndex:a,tableLayout:o,onHeaderCellDragStart:o==="row"?c:void 0}};var Zt=require("@vuu-ui/vuu-utils"),A=require("react");function go(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var je="ArrowUp",Ze="ArrowDown",qe="ArrowLeft",et="ArrowRight";var tt="Home",nt="End",ot="PageUp",rt="PageDown";var Co=new Set(["Enter","Delete"," "]),bo=new Set(["Tab"]),ho=new Set(["ArrowRight","ArrowLeft"]),Xt=new Set([tt,nt,ot,rt,Ze,qe,et,je]),yo=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),ys=go(Co,Xt,ho,yo,bo);var vo=["Home","End","PageUp","PageDown"],Yt=e=>vo.includes(e),Qt=e=>Xt.has(e);var jt=e=>`thead th:nth-child(${e+1})`,wo=(e,t)=>`tbody > tr[aria-rowindex='${e}'] > td:nth-child(${t+1})`,Mo=[-1,-1];function To(e,[t,n],o,r){return e===je?t>-1?[t-1,n]:[t,n]:e===Ze?t===-1?[0,n]:t===r-1?[t,n]:[t+1,n]:e===et?n<o-1?[t,n+1]:[t,n]:e===qe?n>0?[t,n-1]:[t,n]:[t,n]}var qt=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:n,data:o,requestScroll:r,rowCount:l=0,viewportRange:s})=>{var G;let{from:i,to:a}=s,m=(0,A.useRef)([-1,-1]),c=(0,A.useRef)(),d=(0,A.useRef)([-1,0]),C=(0,A.useCallback)(([b,M])=>{var H;let x=b===-1?jt(M):wo(b,M);return(H=t.current)==null?void 0:H.querySelector(x)},[t]),y=b=>b==null?void 0:b.closest("th,td"),w=b=>{var M,x;if(b.tagName==="TH")return[-1,parseInt((M=b.dataset.idx)!=null?M:"-1",10)];{let H=b.closest("tr");if(H){let X=parseInt((x=H.ariaRowIndex)!=null?x:"-1",10),k=Array.from(H.childNodes).indexOf(b);return[X,k]}}return Mo},u=(0,A.useCallback)(b=>{var M;if(t.current){let x=C(b);x?(x!==c.current&&((M=c.current)==null||M.setAttribute("tabindex",""),c.current=x,x.setAttribute("tabindex","0")),x.focus()):(0,Zt.withinRange)(b[0],s)||(c.current=void 0,r==null||r({type:"scroll-page",direction:"up"}))}},[t,C,r,s]),f=(0,A.useCallback)((b,M,x=!1)=>{let H=[b,M];d.current=H,u(H),x&&(m.current=H)},[u]),g=(0,A.useCallback)(()=>{var b;(b=c.current)==null||b.setAttribute("tabindex",""),c.current=void 0},[]),p=(0,A.useCallback)(async(b,M)=>{switch(b){case rt:r==null||r({type:"scroll-page",direction:"down"});break;case ot:r==null||r({type:"scroll-page",direction:"up"});break;case tt:r==null||r({type:"scroll-end",direction:"home"});break;case nt:r==null||r({type:"scroll-end",direction:"end"});break}return M},[r]),v=(0,A.useCallback)(()=>{var b;if(n!==!0&&(b=t.current)!=null&&b.contains(document.activeElement)){let M=y(document.activeElement);M&&(m.current=w(M))}},[n,t]),E=(0,A.useCallback)(async b=>{let[M,x]=Yt(b)?await p(b,d.current):To(b,d.current,e,l),[H,X]=d.current;(M!==H||x!==X)&&f(M,x,!0)},[e,p,l,f]),L=(0,A.useCallback)(b=>{o.length>0&&Qt(b.key)&&(b.preventDefault(),b.stopPropagation(),E(b.key))},[o,E]),h=(0,A.useCallback)(b=>{let M=b.target,x=y(M);if(x){let[H,X]=w(x);f(H,X)}},[f]),R=(0,A.useMemo)(()=>({onClick:h,onFocus:v,onKeyDown:L}),[h,v,L]);(0,A.useLayoutEffect)(()=>{let{current:b}=d,M=b[0]>=i&&b[0]<=a;c.current&&!M?g():!c.current&&M&&u(b)},[u,i,a,g]);let z=((G=t.current)==null?void 0:G.firstChild)!=null;return(0,A.useEffect)(()=>{var b;if(z&&c.current===void 0){let M=(b=t.current)==null?void 0:b.querySelector(jt(0));M&&(M.setAttribute("tabindex","0"),c.current=M)}},[t,z]),R};var fe=require("react");var ue=require("react");var ce=new Map,tn=(e,t,n)=>{switch(n){case"height":return t.height;case"clientHeight":return e.clientHeight;case"clientWidth":return e.clientWidth;case"contentHeight":return t.contentHeight;case"contentWidth":return t.contentWidth;case"scrollHeight":return Math.ceil(e.scrollHeight);case"scrollWidth":return Math.ceil(e.scrollWidth);case"width":return t.width;default:return 0}},en=new ResizeObserver(e=>{for(let t of e){let{target:n,borderBoxSize:o,contentBoxSize:r}=t,l=ce.get(n);if(l){let[{blockSize:s,inlineSize:i}]=o,[{blockSize:a,inlineSize:m}]=r,{onResize:c,measurements:d}=l,C=!1;for(let[y,w]of Object.entries(d)){let u=tn(n,{height:s,width:i,contentHeight:a,contentWidth:m},y);u!==w&&(C=!0,d[y]=u)}C&&c&&c(d)}}});function nn(e,t,n,o=!1){let r=(0,ue.useRef)(t),l=(0,ue.useCallback)(s=>{let{width:i,height:a}=s.getBoundingClientRect(),{clientWidth:m,clientHeight:c}=s;return r.current.reduce((d,C)=>(d[C]=tn(s,{width:i,height:a,contentHeight:c,contentWidth:m},C),d),{})},[]);(0,ue.useEffect)(()=>{let s=e.current;async function i(){ce.set(s,{measurements:{}}),await document.fonts.ready;let a=ce.get(s);if(a){let m=l(s);a.measurements=m,en.observe(s),o&&n(m)}else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation","font-weight:bold; color:red;")}if(s){if(ce.has(s))throw Error("useResizeObserver attemping to observe same element twice");i()}return()=>{s&&ce.has(s)&&(en.unobserve(s),ce.delete(s))}},[l,e]),(0,ue.useEffect)(()=>{let s=e.current,i=ce.get(s);if(i){if(r.current!==t){r.current=t;let a=l(s);i.measurements=a}i.onResize=n}},[t,l,e,n])}var Do=["clientHeight","clientWidth"],on=e=>Number.isFinite(e),st=({defaultHeight:e=0,defaultWidth:t=0,height:n,width:o})=>{let r=(0,fe.useRef)(null),[l,s]=(0,fe.useState)({outer:{height:n!=null?n:"100%",width:o!=null?o:"100%"}}),i=(0,fe.useCallback)(({clientWidth:a,clientHeight:m})=>{s(c=>{let{inner:d,outer:C}=c;return on(m)&&on(a)&&(a!==(d==null?void 0:d.width)||m!==(d==null?void 0:d.height))?{outer:C,inner:{width:Math.floor(a)||t,height:Math.floor(m)||e}}:c})},[e,t]);return nn(r,Do,i,!0),{containerRef:r,outerSize:l.outer,innerSize:l.inner}};var ge=require("@vuu-ui/vuu-utils"),xe=require("react"),{IDX:xo,SELECTED:Ro}=ge.metadataKeys,Ho=[],rn=({selectionModel:e,onSelectionChange:t})=>{let n=(0,xe.useRef)(-1),o=(0,xe.useRef)(Ho);return(0,xe.useCallback)((l,s,i)=>{let{[xo]:a,[Ro]:m}=l,{current:c}=n,{current:d}=o,y=(m?ge.deselectItem:ge.selectItem)(e,d,a,s,i,c);o.current=y,n.current=a,t&&t(y)},[t,e])};var sn=require("@heswell/salt-lab"),T=require("@vuu-ui/vuu-utils"),ln=require("react"),{info:lt}=(0,T.logger)("useTableModel"),Po=100,an=T.metadataKeys.count,So=({serverDataType:e})=>e===void 0,Eo=e=>{var t;if((0,T.isTypeDescriptor)(e.type))return(0,T.getCellRenderer)((t=e.type)==null?void 0:t.renderer)},Ao=(e,t,n)=>{var r;let o=t.indexOf(e.name);return o!==-1&&n[o]?n[o]:(r=e.serverDataType)!=null?r:"string"},Lo=["int","long","double"],cn=e=>e===void 0?void 0:Lo.includes(e)?"right":"left",Ko=(e,t)=>{switch(lt==null||lt(`GridModelReducer ${t.type}`),t.type){case"init":return mn(t);case"moveColumn":return zo(e,t);case"resizeColumn":return Vo(e,t);case"setTypes":return Fo(e,t);case"hideColumns":return No(e,t);case"showColumns":return Io(e,t);case"pinColumn":return $o(e,t);case"updateColumnProp":return Re(e,t);case"tableConfig":return pn(e,t);default:return console.log(`unhandled action ${t.type}`),e}},un=(e,t)=>{let[n,o]=(0,ln.useReducer)(Ko,{tableConfig:e,dataSourceConfig:t},mn);return{columns:n.columns,dispatchColumnAction:o,headings:n.headings}};function mn({dataSourceConfig:e,tableConfig:t}){let n=t.columns.map(dn(t)),o=n.some(T.isPinned)?(0,T.sortPinnedColumns)(n):n,r={columns:o,headings:(0,T.getTableHeadings)(o)};if(e){let{columns:l,...s}=e;return pn(r,{type:"tableConfig",...s})}else return r}var ko=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,dn=e=>(t,n)=>{let{columnDefaultWidth:o=Po,columnFormatHeader:r}=e,{align:l=cn(t.serverDataType),key:s,name:i,label:a=i,width:m=o,...c}=t,d={...c,align:l,CellRenderer:Eo(t),label:ko(a,r),key:s!=null?s:n+an,name:i,originalIdx:n,valueFormatter:(0,T.getValueFormatter)(t),width:m};return(0,T.isGroupColumn)(d)&&(d.columns=d.columns.map(C=>dn(e)(C,C.key))),d};function zo(e,{column:t,moveBy:n,moveTo:o}){let{columns:r}=e;if(typeof n=="number"){let l=r.indexOf(t),s=r.slice(),[i]=s.splice(l,1);return s.splice(l+n,0,i),{...e,columns:s}}else if(typeof o=="number"){let l=r.indexOf(t);return{...e,columns:(0,sn.moveItem)(r,l,o)}}return e}function No(e,{columns:t}){return t.some(n=>n.hidden!==!0)?t.reduce((n,o)=>o.hidden!==!0?Re(n,{type:"updateColumnProp",column:o,hidden:!0}):n,e):e}function Io(e,{columns:t}){return t.some(n=>n.hidden)?t.reduce((n,o)=>o.hidden?Re(n,{type:"updateColumnProp",column:o,hidden:!1}):n,e):e}function Vo(e,{column:t,phase:n,width:o}){let r="updateColumnProp",l=n!=="end";switch(n){case"begin":case"end":return Re(e,{type:r,column:t,resizing:l});case"resize":return Re(e,{type:r,column:t,width:o});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${n}`)}}function Fo(e,{columnNames:t,serverDataTypes:n}){let{columns:o}=e;if(o.some(So)){let r=o.map(l=>{var i;let s=Ao(l,t,n);return{...l,align:(i=l.align)!=null?i:cn(s),serverDataType:s}});return{...e,columns:r}}else return e}function $o(e,t){let{columns:n}=e,{column:o,pin:r}=t,l=n.find(s=>s.name===o.name);return l?(n=Ce(n,{...l,pin:r}),n=(0,T.sortPinnedColumns)(n),{...e,columns:n}):e}function Re(e,t){let{columns:n}=e,{align:o,column:r,hidden:l,label:s,resizing:i,width:a}=t,m=n.find(c=>c.name===r.name);return m&&((o==="left"||o==="right")&&(n=Ce(n,{...m,align:o})),typeof s=="string"&&(n=Ce(n,{...m,label:s})),typeof i=="boolean"&&(n=Ce(n,{...m,resizing:i})),typeof l=="boolean"&&(n=Ce(n,{...m,hidden:l})),typeof a=="number"&&(n=Ce(n,{...m,width:a}))),{...e,columns:n}}function pn(e,{columns:t,confirmed:n,filter:o,groupBy:r,sort:l}){let s=t&&t.length>0,i=r!==void 0,a=typeof(o==null?void 0:o.filter)=="string",m=l&&l.sortDefs.length>0,c=e;return s&&(c={...e,columns:t.map((d,C)=>{let y=(0,T.getColumnName)(d),w=C+an,u=(0,T.findColumn)(c.columns,y);if(u)return u.key===w?u:{...u,key:w};throw Error(`useTableModel column ${d} not found`)})}),i&&(c={...e,columns:(0,T.applyGroupByToColumns)(c.columns,r,n)}),m&&(c={...e,columns:(0,T.applySortToColumns)(c.columns,l)}),a?c={...e,columns:(0,T.applyFilterToColumns)(c.columns,o)}:c.columns.some(T.isFilteredColumn)&&(c={...e,columns:(0,T.stripFilterFromColumns)(c.columns)}),c}function Ce(e,t){return e.map(n=>n.name===t.name?t:n)}var W=require("react"),fn=e=>{let{scrollLeft:t,scrollTop:n}=e,{clientHeight:o,clientWidth:r,scrollHeight:l,scrollWidth:s}=e,i=t/(s-r),a=n/(l-o);return[i,a,t,n]},Wo=e=>{let{clientHeight:t,clientWidth:n,scrollHeight:o,scrollWidth:r}=e;return[r-n,o-t]},gn=({onHorizontalScroll:e,onVerticalScroll:t,viewport:n})=>{let o=(0,W.useRef)({scrollTop:0,scrollLeft:0}),r=(0,W.useRef)(null),l=(0,W.useRef)(null),s=(0,W.useRef)(null),i=(0,W.useRef)(!1),{maxScrollContainerScrollHorizontal:a,maxScrollContainerScrollVertical:m}=n,c=(0,W.useCallback)((u,f)=>{let{current:g}=s;g&&g.scrollTo({top:f,left:u,behavior:"auto"})},[s]),d=(0,W.useCallback)(()=>{let{current:u}=s;if(u){let{current:f}=o,{scrollLeft:g,scrollTop:p}=u;f.scrollTop!==p&&(f.scrollTop=p,t==null||t(p)),f.scrollLeft!==g&&(f.scrollLeft=g,e==null||e(g))}},[e,t]),C=(0,W.useCallback)(()=>{let{current:u}=l,{current:f}=r;if(u&&f){let[g,p,v,E]=fn(u);i.current=!0,f.scrollLeft=Math.round(g*a),f.scrollTop=Math.round(p*m),c(v,E)}},[a,m,l,r,c]),y=(0,W.useCallback)(()=>{let{current:u}=l,{current:f}=r,{current:g}=i;if(g)i.current=!1;else if(u&&f){let[p,v]=fn(f),[E,L]=Wo(u),h=Math.round(p*E),R=Math.round(v*L);u.scrollTo({left:h,top:R,behavior:"auto"}),c(h,R)}},[l,r,c]),w=(0,W.useCallback)(u=>{let{current:f}=r;if(f){if(i.current=!1,u.type==="scroll-page"){let{clientHeight:g,scrollLeft:p,scrollTop:v}=f,{direction:E}=u,L=E==="down"?g:-g,h=Math.min(Math.max(0,v+L),n.maxScrollContainerScrollVertical);f.scrollTo({top:h,left:p,behavior:"auto"})}else if(u.type==="scroll-end"){let{direction:g}=u,p=g==="end"?n.maxScrollContainerScrollVertical:0;f.scrollTo({top:p,left:f.scrollLeft,behavior:"auto"})}}},[n.maxScrollContainerScrollVertical]);return{scrollbarContainerRef:r,onScrollbarContainerScroll:y,contentContainerRef:l,onContentContainerScroll:C,tableContainerRef:s,onTableContainerScroll:d,requestScroll:w}};var it=require("react"),Go={fillerHeight:0,maxScrollContainerScrollHorizontal:0,maxScrollContainerScrollVertical:0,pinnedWidthLeft:0,pinnedWidthRight:0,rowCount:0,scrollContentHeight:0,scrollbarSize:0,scrollContentWidth:0,totalHeaderHeight:0},Oo=e=>{let t=0,n=0,o=0;for(let r of e){let{hidden:l,pin:s,width:i}=r,a=l?0:i;s==="left"?t+=a:s==="right"?n+=a:o+=a}return{pinnedWidthLeft:t,pinnedWidthRight:n,unpinnedWidth:o}},Cn=({columns:e,headerHeight:t,headings:n,rowCount:o,rowHeight:r,size:l})=>{let{pinnedWidthLeft:s,pinnedWidthRight:i,unpinnedWidth:a}=(0,it.useMemo)(()=>Oo(e),[e]);return(0,it.useMemo)(()=>{var c;if(l){let d=n.length,C=15,y=o*r,w=s+a+i,u=y+t-(((c=l==null?void 0:l.height)!=null?c:0)-t-C),f=w-l.width+s,g=(l.height-t)/r,p=Number.isInteger(g)?g+1:Math.ceil(g);return{fillerHeight:(o-p)*r,maxScrollContainerScrollHorizontal:f,maxScrollContainerScrollVertical:u,pinnedWidthLeft:s,pinnedWidthRight:i,rowCount:p,scrollContentHeight:t+y+C,scrollbarSize:C,scrollContentWidth:w,totalHeaderHeight:t*(1+d)}}else return Go},[t,n.length,s,i,o,r,l,a])};var He=require("@vuu-ui/vuu-utils"),$=require("react"),bn=({columns:e,rowHeight:t,setRange:n,viewportMeasurements:o})=>{let r=(0,$.useRef)(-1),{rowCount:l,scrollContentWidth:s,maxScrollContainerScrollHorizontal:i}=o,a=s-i,m=(0,$.useRef)(0),[c,d]=(0,$.useMemo)(()=>(0,He.getColumnsInViewport)(e,m.current,m.current+a),[a,e]),C=(0,$.useRef)(d);(0,$.useEffect)(()=>{w(c)},[c]);let[y,w]=(0,$.useState)(c),u=(0,$.useCallback)(g=>{m.current=g;let[p,v]=(0,He.getColumnsInViewport)(e,g,g+a);(0,He.itemsChanged)(y,p)&&(C.current=v,w(p))},[a,e,y]),f=(0,$.useCallback)(g=>{let p=Math.floor(g/t);p!==r.current&&(r.current=p,n({from:p,to:p+l}))},[t,n,l]);return{columnsWithinViewport:y,onHorizontalScroll:u,onVerticalScroll:f,virtualColSpan:C.current}};var Bo=[],{KEY:Uo,IS_EXPANDED:hn,IS_LEAF:yn}=J.metadataKeys,wn=({config:e,dataSource:t,headerHeight:n,onConfigChange:o,onFeatureEnabled:r,onFeatureInvocation:l,onSelectionChange:s,renderBufferSize:i=0,rowHeight:a,selectionModel:m,tableLayout:c,...d})=>{var ut,mt;let[C,y]=(0,S.useState)(0),w=(0,S.useRef)(!1),u=(0,S.useRef)();if(u.current=t,t===void 0)throw Error("no data source provided to DataTable");let f=st(d),g=(0,S.useCallback)(D=>{y(D)},[]),{columns:p,dispatchColumnAction:v,headings:E}=un(e,t.config),L=(0,S.useCallback)(D=>{w.current=!0,v(D)},[v]),h=$t({dataSource:t,onPersistentColumnOperation:L}),R=Cn({columns:p,headerHeight:n,headings:E,rowCount:C,rowHeight:a,size:f.innerSize}),z=(0,S.useCallback)(D=>{if(D.tableMeta){let{columns:K,dataTypes:F}=D.tableMeta;w.current=!0,v({type:"setTypes",columnNames:K,serverDataTypes:F})}},[v]),G=(0,S.useCallback)(D=>{t.select(D),s==null||s(D)},[t,s]),b=rn({onSelectionChange:G,selectionModel:m}),{data:M,getSelectedRows:x,range:H,setRange:X}=Ut({dataSource:t,onFeatureEnabled:r,onFeatureInvocation:l,onSubscribed:z,onSizeChange:g,renderBufferSize:i,viewportRowCount:R.rowCount}),k=(0,S.useRef)();k.current=M;let Se=(0,S.useCallback)((D,K=!1,F)=>{t&&(t.sort=(0,J.applySort)(t.sort,D,K,F))},[t]),Fe=(0,S.useCallback)((D,K,F)=>{let N=p.find(Y=>Y.name===K);if(N)D==="end"&&(w.current=!0),v({type:"resizeColumn",phase:D,column:N,width:F});else throw Error(`useDataTable.handleColumnResize, column ${K} not found`)},[p,v]),$e=(0,S.useCallback)((D,K)=>{let F=(0,J.isJsonGroup)(K,D),N=D[Uo];if(D[hn]){if(t.closeTreeNode(N,!0),F){let Y=p.indexOf(K);t.getRowsAtDepth(Y+1).some(Q=>Q[hn]||Q[yn])||v({type:"hideColumns",columns:p.slice(Y+2)})}}else if(t.openTreeNode(N),F){let Y=t.getChildRows(N),se=p.indexOf(K)+1,Q=[p[se]];Y.some(me=>me[yn])&&Q.push(p[se+1]),Q.some(me=>me.hidden)&&v({type:"showColumns",columns:Q})}},[p,t,v]),{onVerticalScroll:We,onHorizontalScroll:Ge,columnsWithinViewport:Rn,virtualColSpan:Hn}=bn({columns:p,rowHeight:a,setRange:X,viewportMeasurements:R}),{requestScroll:Pn,...at}=gn({onHorizontalScroll:Ge,onVerticalScroll:We,viewport:R,viewportHeight:((mt=(ut=f.innerSize)==null?void 0:ut.height)!=null?mt:0)-n}),Sn=qt({columnCount:p.length,containerRef:f.containerRef,data:M,requestScroll:Pn,rowCount:t==null?void 0:t.size,viewportRange:H}),En=(0,S.useCallback)(D=>{t&&t.groupBy.includes(D.name)&&(t.groupBy=t.groupBy.filter(K=>K!==D.name))},[t]),An=(0,S.useCallback)((D,K)=>{let F=t.columns[D],N=(0,J.moveItem)(t.columns,F,K);N!==t.columns&&(t.columns=N,v({type:"tableConfig",columns:N}))},[t,v]),Ln=Jt({onDrop:An,tableContainerRef:at.tableContainerRef,tableLayout:c});(0,S.useEffect)(()=>{u.current&&(w.current=!0,v({type:"init",tableConfig:e,dataSourceConfig:u.current.config}))},[e,v]),(0,S.useEffect)(()=>{t.on("config",(D,K)=>{w.current=!0,v({type:"tableConfig",...D,confirmed:K})})},[t,v]),(0,S.useMemo)(()=>{w.current&&(o==null||o({...e,columns:p}),w.current=!1)},[p,e,o]);let ct=(0,vn.useContextMenu)(),Kn=(0,S.useCallback)(D=>{var Q;let{current:K}=k,{current:F}=u,N=D.target,Y=N==null?void 0:N.closest("td"),se=N==null?void 0:N.closest("tr");if(Y&&se&&K&&F){let{columns:me,selectedRowsCount:kn}=F,zn=(0,J.buildColumnMap)(me),Nn=parseInt((Q=se.ariaRowIndex)!=null?Q:"-1"),In=Array.from(se.childNodes).indexOf(Y),Vn=K.find(([$n])=>$n===Nn),Fn=me[In];ct(D,"grid",{columnMap:zn,columnName:Fn,row:Vn,selectedRows:kn===0?Bo:x(),viewport:t==null?void 0:t.viewport})}},[t==null?void 0:t.viewport,x,ct]);return{containerMeasurements:f,containerProps:Sn,columns:p,columnsWithinViewport:Rn,data:M,dispatchColumnAction:v,handleContextMenuAction:h,headings:E,onColumnResize:Fe,onContextMenu:Kn,onRemoveColumnFromGroupBy:En,onRowClick:b,onSort:Se,onToggleGroup:$e,virtualColSpan:Hn,scrollProps:at,rowCount:C,viewportMeasurements:R,...Ln}};var Tn=j(require("classnames"));var Dn=require("@vuu-ui/vuu-utils"),U=require("react/jsx-runtime"),te="vuuTable",_o=({allowConfigEditing:e=!1,className:t,config:n,dataSource:o,headerHeight:r=25,height:l,id:s,onConfigChange:i,onFeatureEnabled:a,onFeatureInvocation:m,onSelectionChange:c,onShowConfigEditor:d,renderBufferSize:C=0,rowHeight:y=20,selectionModel:w="extended",style:u,tableLayout:f="row",width:g,zebraStripes:p=!1,...v})=>{let E=(0,Ve.useIdMemo)(s),{containerMeasurements:{containerRef:L,innerSize:h,outerSize:R},containerProps:z,dispatchColumnAction:G,draggable:b,draggedItemIndex:M,handleContextMenuAction:x,scrollProps:H,tableLayout:X,viewportMeasurements:k,...Se}=wn({config:n,dataSource:o,renderBufferSize:C,headerHeight:r,height:l,onConfigChange:i,onFeatureEnabled:a,onFeatureInvocation:m,onSelectionChange:c,rowHeight:y,selectionModel:w,tableLayout:f,width:g}),Fe={...R,"--content-height":`${k.scrollContentHeight}px`,"--content-width":`${k.scrollContentWidth}px`,"--filler-height":`${k.fillerHeight}px`,"--pinned-width-left":`${k.pinnedWidthLeft}px`,"--pinned-width-right":`${k.pinnedWidthRight}px`,"--header-height":`${r}px`,"--row-height":`${y}px`,"--scrollbar-size":`${k.scrollbarSize}px`,"--table-height":`${h==null?void 0:h.height}px`,"--table-width":`${h==null?void 0:h.width}px`,"--total-header-height":`${k==null?void 0:k.totalHeaderHeight}px`},$e={left:k.pinnedWidthLeft-1,top:(k==null?void 0:k.totalHeaderHeight)-1},We=X==="column"?Nt:Bt,Ge=(0,Tn.default)(te,t,{[`${te}-zebra`]:p,[`${te}-loading`]:(0,Dn.isDataLoading)(Se.columns)});return(0,U.jsx)(Mn.ContextMenuProvider,{menuActionHandler:x,menuBuilder:Vt(o),children:(0,U.jsxs)("div",{...z,className:Ge,id:E,ref:L,style:Fe,tabIndex:-1,children:[h?(0,U.jsx)("div",{className:`${te}-scrollbarContainer`,onScroll:H.onScrollbarContainerScroll,ref:H.scrollbarContainerRef,style:$e,children:(0,U.jsx)("div",{className:`${te}-scrollContent`})}):null,h?(0,U.jsxs)("div",{className:`${te}-contentContainer`,onScroll:H.onContentContainerScroll,ref:H.contentContainerRef,...v,children:[(0,U.jsx)("div",{className:`${te}-scrollContent`}),(0,U.jsx)("div",{className:`${te}-tableContainer`,onScroll:H.onTableContainerScroll,ref:H.tableContainerRef,children:(0,U.jsx)(We,{...Se,headerHeight:r,rowHeight:y})}),b]}):null,e&&h?(0,U.jsx)(Ve.Button,{className:`${te}-settings`,"data-icon":"settings",onClick:d,variant:"secondary"}):null]})})};var xn=j(require("classnames")),he=require("@vuu-ui/vuu-utils");var be=require("react/jsx-runtime"),Pe="vuuJsonCell",{IS_EXPANDED:Jo,KEY:Xo}=he.metadataKeys,Yo=e=>{let t=e.lastIndexOf("|");return t===-1?"":e.slice(t+1)},Qo=({column:e,row:t})=>{let{key:n}=e,o=t[n],r=!1;(0,he.isJsonAttribute)(o)&&(o=o.slice(0,-1),r=!0);let l=Yo(t[Xo]),s=(0,xn.default)({[`${Pe}-name`]:l===o,[`${Pe}-value`]:l!==o,[`${Pe}-group`]:r});if(r){let i=t[Jo]?"minus-box":"plus-box";return(0,be.jsxs)("span",{className:s,children:[(0,be.jsx)("span",{className:`${Pe}-value`,children:o}),(0,be.jsx)("span",{className:`${Pe}-toggle`,"data-icon":i})]})}else return o?(0,be.jsx)("span",{className:s,children:o}):null};(0,he.registerComponent)("json",Qo,"cell-renderer",{});
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Table: () => Table,
+  useMeasuredContainer: () => useMeasuredContainer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Table.tsx
+var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
+var import_core = require("@salt-ds/core");
+
+// src/context-menu/buildContextMenuDescriptors.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+  } else if (location === "filter") {
+    const { column, filter } = options;
+    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
+    descriptors.push({
+      label: "Edit filter",
+      action: "filter-edit",
+      options
+    });
+    descriptors.push({
+      label: "Remove filter",
+      action: "filter-remove-column",
+      options
+    });
+    if (column && !colIsOnlyFilter) {
+      descriptors.push({
+        label: `Remove all filters`,
+        action: "remove-filters",
+        options
+      });
+    }
+  }
+  return descriptors;
+};
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
+      children: [
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name, label = name } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [{ label: "Count", action: "agg-count", options }].concat(
+        (0, import_vuu_utils.isNumericColumn)(column) ? [
+          { label: "Sum", action: "agg-sum", options },
+          { label: "Avg", action: "agg-avg", options },
+          { label: "High", action: "agg-high", options },
+          { label: "Low", action: "agg-low", options }
+        ] : []
+      )
+    }
+  ];
+}
+var pinColumn = (options, pinLocation) => ({
+  label: `Pin ${pinLocation}`,
+  action: `column-pin-${pinLocation}`,
+  options
+});
+var pinLeft = (options) => pinColumn(options, "left");
+var pinFloating = (options) => pinColumn(options, "floating");
+var pinRight = (options) => pinColumn(options, "right");
+function buildColumnDisplayMenuItems(options) {
+  const { column } = options;
+  if (column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [
+    {
+      label: `Hide column`,
+      action: "column-hide",
+      options
+    },
+    {
+      label: `Remove column`,
+      action: "column-remove",
+      options
+    }
+  ];
+  if (pin === void 0) {
+    menuItems.push({
+      label: `Pin column`,
+      children: [pinLeft(options), pinFloating(options), pinRight(options)]
+    });
+  } else if (pin === "left") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinFloating(options), pinRight(options)]
+      }
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
+      }
+    );
+  } else if (pin === "floating") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinRight(options)]
+      }
+    );
+  }
+  return menuItems;
+}
+function buildGroupMenuItems(options, { groupBy }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const { name, label = name } = column;
+  if (groupBy.length === 0) {
+    menuItems.push({
+      label: `Group by ${label}`,
+      action: "group",
+      options
+    });
+  } else {
+    menuItems.push({
+      label: `Add ${label} to group by`,
+      action: "group-add",
+      options
+    });
+  }
+  return menuItems;
+}
+
+// src/context-menu/useContextMenu.ts
+var import_vuu_filters = require("@vuu-ui/vuu-filters");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = (0, import_vuu_filters.removeColumnFromFilter)(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
+var { Average, Count, High, Low, Sum } = import_vuu_utils2.AggregationType;
+var useContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (type, options) => {
+    const gridOptions = options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (type) {
+        case "sort-asc":
+          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
+        case "column-hide":
+          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
+        case "column-remove":
+          return dataSource.columns = dataSource.columns.filter((name) => name !== column.name), true;
+        case "filter-remove-column":
+          return dataSource.filter = removeFilterColumn(dataSource.filter, column), true;
+        case "remove-filters":
+          return dataSource.filter = { filter: "" }, true;
+        case "agg-avg":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Count), true;
+        case "agg-sum":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Sum), true;
+        case "column-pin-floating":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
+        case "column-pin-left":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "left" }), true;
+        case "column-pin-right":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "right" }), true;
+        case "column-unpin":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: void 0 }), true;
+        default:
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
+
+// src/RowBasedTable.tsx
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react9 = require("react");
+
+// src/TableRow.tsx
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_classnames2 = __toESM(require("classnames"));
+var import_react3 = require("react");
+
+// src/TableCell.tsx
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_salt_lab = require("@heswell/salt-lab");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { KEY } = import_vuu_utils3.metadataKeys;
+var TableCell = (0, import_react.memo)(
+  ({
+    className: classNameProp,
+    column,
+    columnMap,
+    onClick,
+    row
+  }) => {
+    const labelFieldRef = (0, import_react.useRef)(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = (0, import_react.useState)(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = (0, import_react.useState)(value);
+    const handleTitleMouseDown = () => {
+      var _a;
+      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleTitleKeyDown = (evt) => {
+      if (evt.key === "Enter") {
+        setEditing(true);
+      }
+    };
+    const handleClick = (0, import_react.useCallback)(() => {
+      onClick == null ? void 0 : onClick(column);
+    }, [column, onClick]);
+    const handleEnterEditMode = () => {
+      setEditing(true);
+    };
+    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
+      var _a;
+      setEditing(false);
+      if (editCancelled) {
+        setEditableValue(originalValue);
+      } else if (finalValue !== originalValue) {
+        setEditableValue(finalValue);
+      }
+      if (allowDeactivation === false) {
+        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    const className = (0, import_classnames.default)(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const style = (0, import_vuu_utils3.getColumnStyle)(column);
+    return editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        "data-editable": true,
+        role: "cell",
+        style,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_salt_lab.EditableLabel,
+          {
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
+          },
+          "title"
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        role: "cell",
+        style,
+        onClick: handleClick,
+        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellRenderer, { column, columnMap, row }) : value
+      }
+    );
+  },
+  cellValuesAreEqual
+);
+TableCell.displayName = "TableCell";
+function cellValuesAreEqual(prev, next) {
+  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY] === next.row[KEY] && prev.row[prev.column.key] === next.row[next.column.key];
+}
+
+// src/TableGroupCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var { DEPTH, IS_LEAF } = import_vuu_utils4.metadataKeys;
+var getGroupValueAndOffset = (columns, row) => {
+  const { [DEPTH]: depth, [IS_LEAF]: isLeaf } = row;
+  if (isLeaf || depth > columns.length) {
+    return [null, depth === null ? 0 : depth - 1];
+  } else if (depth === 0) {
+    return ["$root", 0];
+  } else {
+    const { key, valueFormatter } = columns[depth - 1];
+    const value = valueFormatter(row[key]);
+    return [value, depth - 1];
+  }
+};
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const handleClick = (0, import_react2.useCallback)(() => {
+    onClick == null ? void 0 : onClick(column);
+  }, [column, onClick]);
+  const style = (0, import_vuu_utils4.getColumnStyle)(column);
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      role: "cell",
+      style,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: value })
+      ]
+    }
+  );
+};
+
+// src/TableRow.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
+var classBase = "vuuTableRow";
+var TableRow = (0, import_react3.memo)(function Row({
+  columnMap,
+  columns,
+  offset,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = (0, import_classnames2.default)(classBase, {
+    [`${classBase}-even`]: rowIndex % 2 === 0,
+    [`${classBase}-expanded`]: isExpanded,
+    [`${classBase}-preSelected`]: isSelected === 2
+  });
+  const handleRowClick = (0, import_react3.useCallback)(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+    },
+    [onClick, row]
+  );
+  const handleGroupCellClick = (0, import_react3.useCallback)(
+    (column) => {
+      if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
+    },
+    [onToggleGroup, row]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-rowindex": rowIndex,
+      className,
+      onClick: handleRowClick,
+      role: "row",
+      style: {
+        transform: `translate3d(0px, ${offset}px, 0px)`
+      },
+      children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(import_vuu_utils5.notHidden).map((column) => {
+          const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
+          const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Cell,
+            {
+              column,
+              columnMap,
+              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+              row
+            },
+            column.name
+          );
+        })
+      ]
+    }
+  );
+});
+
+// src/TableGroupHeaderCell.tsx
+var import_classnames3 = __toESM(require("classnames"));
+var import_react6 = require("react");
+
+// src/ColumnResizer.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizer";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = (0, import_react4.useRef)(0);
+  const onMouseMove = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.current;
+      position.current = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = (0, import_react4.useCallback)(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = (0, import_react4.useCallback)(
+    (e) => {
+      onDragStart(e);
+      position.current = Math.round(e.clientX);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+    },
+    [onDragStart, onMouseMove, onMouseUp]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: baseClass, "data-align": "end", onMouseDown: handleMouseDown });
+};
+
+// src/useTableColumnResize.tsx
+var import_react5 = require("react");
+var useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = (0, import_react5.useRef)(0);
+  const isResizing = (0, import_react5.useRef)(false);
+  const { name } = column;
+  const handleResizeStart = (0, import_react5.useCallback)(() => {
+    if (onResize && rootRef.current) {
+      const { width } = rootRef.current.getBoundingClientRect();
+      widthRef.current = Math.round(width);
+      isResizing.current = true;
+      onResize == null ? void 0 : onResize("begin", name);
+    }
+  }, [name, onResize, rootRef]);
+  const handleResize = (0, import_react5.useCallback)(
+    (_evt, moveBy) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { width } = rootRef.current.getBoundingClientRect();
+          const newWidth = Math.round(width) + moveBy;
+          if (newWidth !== widthRef.current && newWidth > 0) {
+            onResize("resize", name, newWidth);
+            widthRef.current = newWidth;
+          }
+        }
+      }
+    },
+    [name, onResize, rootRef]
+  );
+  const handleResizeEnd = (0, import_react5.useCallback)(() => {
+    if (onResize) {
+      onResize("end", name, widthRef.current);
+      setTimeout(() => {
+        isResizing.current = false;
+      }, 100);
+    }
+  }, [name, onResize]);
+  return {
+    isResizing: isResizing.current,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
+
+// src/TableGroupHeaderCell.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase2 = "vuuTable-groupHeaderCell";
+var RemoveButton = ({
+  column,
+  onClick,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      ...htmlAttributes,
+      className: `${classBase2}-close`,
+      "data-icon": "close-circle",
+      onClick: () => onClick == null ? void 0 : onClick(column)
+    }
+  );
+};
+var ColHeader = (props) => {
+  const { children, column, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames3.default)(`${classBase2}-col`, className), role: "columnheader", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase2}-label`, children: column.name }),
+    children
+  ] });
+};
+var TableGroupHeaderCell = ({
+  column: groupColumn,
+  className: classNameProp,
+  onRemoveColumn,
+  onResize,
+  ...props
+}) => {
+  const rootRef = (0, import_react6.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const className = (0, import_classnames3.default)(classBase2, classNameProp, {
+    vuuPinLeft: groupColumn.pin === "left",
+    [`${classBase2}-right`]: groupColumn.align === "right",
+    [`${classBase2}-resizing`]: groupColumn.resizing,
+    [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
+  });
+  const { columns } = groupColumn;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, ref: rootRef, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase2}-inner`, children: [
+    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColHeader, { column, children: columns.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { column, onClick: onRemoveColumn }) : null }, column.key)),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { "data-align": "end", onClick: onRemoveColumn }),
+    groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnResizer, { ...resizeProps }) : null
+  ] }) });
+};
+
+// src/TableHeaderCell.tsx
+var import_classnames6 = __toESM(require("classnames"));
+var import_react8 = require("react");
+
+// src/SortIndicator.tsx
+var import_classnames4 = __toESM(require("classnames"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase3 = "vuuSortIndicator";
+var SortIndicator = ({ sorted }) => {
+  if (!sorted) {
+    return null;
+  }
+  const direction = typeof sorted === "number" ? sorted < 0 ? "dsc" : "asc" : sorted === "A" ? "asc" : "dsc";
+  return typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames4.default)(classBase3, "multi-col", direction), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames4.default)(classBase3, "single-col"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }) });
+};
+
+// src/TableHeaderCell.tsx
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+
+// src/filter-indicator.tsx
+var import_vuu_popups = require("@vuu-ui/vuu-popups");
+var import_classnames5 = __toESM(require("classnames"));
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FilterIndicator = ({ column, filter }) => {
+  const showContextMenu = (0, import_vuu_popups.useContextMenu)();
+  const handleClick = (0, import_react7.useCallback)(
+    (evt) => {
+      evt.stopPropagation();
+      showContextMenu(evt, "filter", { column, filter });
+    },
+    [column, filter, showContextMenu]
+  );
+  if (!column.filter) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: (0, import_classnames5.default)("vuuFilterIndicator"),
+      "data-icon": "filter",
+      onClick: handleClick
+    }
+  );
+};
+
+// src/TableHeaderCell.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase4 = "vuuTable-headerCell";
+var TableHeaderCell = ({
+  column,
+  className: classNameProp,
+  onClick,
+  onDragStart,
+  onResize,
+  ...props
+}) => {
+  const rootRef = (0, import_react8.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const showContextMenu = (0, import_vuu_popups2.useContextMenu)();
+  const dragTimerRef = (0, import_react8.useRef)(null);
+  const handleContextMenu = (e) => {
+    showContextMenu(e, "header", { column });
+  };
+  const handleClick = (0, import_react8.useCallback)(
+    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
+    [isResizing, onClick]
+  );
+  const handleMouseDown = (0, import_react8.useCallback)(
+    (evt) => {
+      dragTimerRef.current = window.setTimeout(() => {
+        onDragStart == null ? void 0 : onDragStart(evt);
+        dragTimerRef.current = null;
+      }, 500);
+    },
+    [onDragStart]
+  );
+  const handleMouseUp = (0, import_react8.useCallback)(() => {
+    if (dragTimerRef.current !== null) {
+      window.clearTimeout(dragTimerRef.current);
+      dragTimerRef.current = null;
+    }
+  }, []);
+  const className = (0, import_classnames6.default)(classBase4, classNameProp, {
+    vuuPinFloating: column.pin === "floating",
+    vuuPinLeft: column.pin === "left",
+    vuuPinRight: column.pin === "right",
+    vuuEndPin: column.endPin,
+    [`${classBase4}-resizing`]: column.resizing,
+    [`${classBase4}-right`]: column.align === "right"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className,
+      ...props,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ref: rootRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${classBase4}-inner`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterIndicator, { column }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase4}-label`, children: column.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SortIndicator, { sorted: column.sorted }),
+        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnResizer, { ...resizeProps }) : null
+      ] })
+    }
+  );
+};
+
+// src/RowBasedTable.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase5 = "vuuTable";
+var { RENDER_IDX } = import_vuu_utils6.metadataKeys;
+var RowBasedTable = ({
+  columns,
+  columnsWithinViewport,
+  data,
+  getRowOffset,
+  headings,
+  onColumnResize,
+  onHeaderCellDragStart,
+  onContextMenu,
+  onRemoveColumnFromGroupBy,
+  onRowClick,
+  onSort,
+  onToggleGroup,
+  tableId,
+  virtualColSpan = 0,
+  rowCount
+}) => {
+  const handleDragStart = (0, import_react9.useCallback)(
+    (evt) => {
+      onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
+    },
+    [onHeaderCellDragStart]
+  );
+  const visibleColumns = (0, import_react9.useMemo)(() => {
+    return columns.filter(import_vuu_utils6.notHidden);
+  }, [columns]);
+  const columnMap = (0, import_react9.useMemo)(() => (0, import_vuu_utils6.buildColumnMap)(columns), [columns]);
+  const handleHeaderClick = (0, import_react9.useCallback)(
+    (evt) => {
+      var _a;
+      const targetElement = evt.target;
+      const headerCell = targetElement.closest(
+        ".vuuTable-headerCell"
+      );
+      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.idx) != null ? _a : "-1");
+      const column = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSort(column, isAdditive);
+    },
+    [columns, onSort]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "aria-rowcount": rowCount, className: `${classBase5}-table`, role: "table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-headers`, role: "rowGroup", children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "row", children: visibleColumns.map((column, i) => {
+        const style = (0, import_vuu_utils6.getColumnStyle)(column);
+        return (0, import_vuu_utils6.isGroupColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          TableGroupHeaderCell,
+          {
+            column,
+            "data-idx": i,
+            onRemoveColumn: onRemoveColumnFromGroupBy,
+            onResize: onColumnResize,
+            role: "columnHeader",
+            style
+          },
+          i
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          TableHeaderCell,
+          {
+            column,
+            "data-idx": i,
+            id: `${tableId}-${i}`,
+            onClick: handleHeaderClick,
+            onDragStart: handleDragStart,
+            onResize: onColumnResize,
+            role: "columnHeader",
+            style
+          },
+          i
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `${classBase5}-body`,
+        onContextMenu,
+        role: "rowGroup",
+        children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          TableRow,
+          {
+            columnMap,
+            columns: columnsWithinViewport,
+            offset: getRowOffset(row),
+            onClick: onRowClick,
+            virtualColSpan,
+            onToggleGroup,
+            row
+          },
+          row[RENDER_IDX]
+        ))
+      }
+    )
+  ] });
+};
+
+// src/useTable.ts
+var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react20 = require("react");
+
+// src/useDataSource.ts
+var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
+var { SELECTED: SELECTED2 } = import_vuu_utils7.metadataKeys;
+function useDataSource({
+  dataSource,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = { from: 0, to: 0 },
+  renderBufferSize = 0,
+  viewportRowCount
+}) {
+  const [, forceUpdate] = (0, import_react10.useState)(null);
+  const isMounted = (0, import_react10.useRef)(true);
+  const hasUpdated = (0, import_react10.useRef)(false);
+  const rangeRef = (0, import_react10.useRef)({ from: 0, to: 0 });
+  const rafHandle = (0, import_react10.useRef)(null);
+  const data = (0, import_react10.useRef)([]);
+  const dataWindow = (0, import_react10.useMemo)(
+    () => new MovingWindow((0, import_vuu_utils7.getFullRange)(range)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = (0, import_react10.useCallback)(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      hasUpdated.current = true;
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = (0, import_react10.useCallback)(
+    (message) => {
+      if (message.type === "subscribed") {
+        onSubscribed == null ? void 0 : onSubscribed(message);
+      } else if (message.type === "viewport-update") {
+        if (typeof message.size === "number") {
+          onSizeChange == null ? void 0 : onSizeChange(message.size);
+          dataWindow.setRowCount(message.size);
+        }
+        if (message.rows) {
+          setData(message.rows);
+        } else if (typeof message.size === "number") {
+          data.current = dataWindow.data;
+          hasUpdated.current = true;
+        }
+      } else if ((0, import_vuu_data.isVuuFeatureAction)(message)) {
+        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
+      } else if ((0, import_vuu_data.isVuuFeatureInvocation)(message)) {
+        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
+      } else {
+        console.log(`useDataSource unexpected message ${message.type}`);
+      }
+    },
+    [
+      dataWindow,
+      onFeatureEnabled,
+      onFeatureInvocation,
+      onSizeChange,
+      onSubscribed,
+      setData
+    ]
+  );
+  (0, import_react10.useEffect)(
+    () => () => {
+      if (rafHandle.current) {
+        cancelAnimationFrame(rafHandle.current);
+        rafHandle.current = null;
+      }
+      isMounted.current = false;
+    },
+    []
+  );
+  const refreshIfUpdated = (0, import_react10.useCallback)(() => {
+    if (isMounted.current) {
+      if (hasUpdated.current) {
+        forceUpdate({});
+        hasUpdated.current = false;
+      }
+      rafHandle.current = requestAnimationFrame(refreshIfUpdated);
+    }
+  }, [forceUpdate]);
+  (0, import_react10.useEffect)(() => {
+    rafHandle.current = requestAnimationFrame(refreshIfUpdated);
+  }, [refreshIfUpdated]);
+  const adjustRange = (0, import_react10.useCallback)(
+    (rowCount) => {
+      const { from } = dataSource.range;
+      const rowRange = { from, to: from + rowCount };
+      const fullRange = (0, import_vuu_utils7.getFullRange)(rowRange, renderBufferSize);
+      dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", rowRange);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  const setRange = (0, import_react10.useCallback)(
+    (range2) => {
+      const fullRange = (0, import_vuu_utils7.getFullRange)(range2, renderBufferSize);
+      dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", range2);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  const getSelectedRows = (0, import_react10.useCallback)(() => {
+    return dataWindow.getSelectedRows();
+  }, [dataWindow]);
+  (0, import_react10.useEffect)(() => {
+    dataSource == null ? void 0 : dataSource.subscribe(
+      {
+        range: rangeRef.current
+      },
+      datasourceMessageHandler
+    );
+  }, [dataSource, datasourceMessageHandler, onConfigChange]);
+  (0, import_react10.useEffect)(() => {
+    adjustRange(viewportRowCount);
+  }, [adjustRange, viewportRowCount]);
+  return {
+    data: data.current,
+    getSelectedRows,
+    range: rangeRef.current,
+    setRange,
+    dataSource
+  };
+}
+var MovingWindow = class {
+  constructor({ from, to }) {
+    this.rowCount = 0;
+    this.setRowCount = (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    };
+    this.range = new import_vuu_utils7.WindowRange(from, to);
+    this.data = new Array(to - from);
+    this.rowCount = 0;
+  }
+  add(data) {
+    var _a;
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      this.data[internalIndex] = data;
+      const isSelected = data[SELECTED2];
+      const preSelected = (_a = this.data[internalIndex - 1]) == null ? void 0 : _a[SELECTED2];
+      if (preSelected === 0 && isSelected) {
+        this.data[internalIndex - 1][SELECTED2] = 2;
+      } else if (preSelected === 2 && !isSelected) {
+        this.data[internalIndex - 1][SELECTED2] = 0;
+      }
+    }
+  }
+  getAtIndex(index) {
+    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+  }
+  isWithinRange(index) {
+    return this.range.isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => row[SELECTED2] === 1);
+  }
+};
+
+// src/useDraggableColumn.ts
+var import_salt_lab2 = require("@heswell/salt-lab");
+var import_react11 = require("react");
+var useDraggableColumn = ({ onDrop }) => {
+  const mousePosRef = (0, import_react11.useRef)();
+  const containerRef = (0, import_react11.useRef)(null);
+  const handleDropSettle = (0, import_react11.useCallback)(() => {
+    console.log(`handleDropSettle`);
+    mousePosRef.current = void 0;
+    containerRef.current = null;
+  }, []);
+  const { draggable, draggedItemIndex, onMouseDown } = (0, import_salt_lab2.useDragDrop)({
+    // allowDragDrop: "drop-indicator",
+    allowDragDrop: true,
+    draggableClassName: "vuuTable-headerCell",
+    orientation: "horizontal",
+    containerRef,
+    itemQuery: ".vuuTable-headerCell",
+    onDrop,
+    onDropSettle: handleDropSettle
+  });
+  const onHeaderCellDragStart = (0, import_react11.useCallback)(
+    (evt) => {
+      const { clientX, clientY } = evt;
+      console.log(
+        `useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable`
+      );
+      const sourceElement = evt.target;
+      const columnHeaderCell = sourceElement.closest(".vuuTable-headerCell");
+      containerRef.current = columnHeaderCell == null ? void 0 : columnHeaderCell.closest(
+        "[role='row']"
+      );
+      const {
+        dataset: { idx = "-1" }
+      } = columnHeaderCell;
+      mousePosRef.current = {
+        clientX,
+        clientY,
+        idx
+      };
+      onMouseDown == null ? void 0 : onMouseDown(evt);
+    },
+    [onMouseDown]
+  );
+  return {
+    draggable,
+    draggedItemIndex,
+    onHeaderCellDragStart
+  };
+};
+
+// src/useKeyboardNavigation.ts
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_react12 = require("react");
+
+// src/keyUtils.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (let set of sets) {
+    for (let element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+var ArrowUp = "ArrowUp";
+var ArrowDown = "ArrowDown";
+var ArrowLeft = "ArrowLeft";
+var ArrowRight = "ArrowRight";
+var Home = "Home";
+var End = "End";
+var PageUp = "PageUp";
+var PageDown = "PageDown";
+var actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var navigationKeys = /* @__PURE__ */ new Set([
+  Home,
+  End,
+  PageUp,
+  PageDown,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  navigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+var PageKeys = ["Home", "End", "PageUp", "PageDown"];
+var isPagingKey = (key) => PageKeys.includes(key);
+var isNavigationKey = (key) => {
+  return navigationKeys.has(key);
+};
+
+// src/useKeyboardNavigation.ts
+var headerCellQuery = (colIdx) => `.vuuTable-headers .vuuTable-headerCell:nth-child(${colIdx + 1})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
+var NULL_CELL_POS = [-1, -1];
+function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
+  if (key === ArrowUp) {
+    if (rowIdx > -1) {
+      return [rowIdx - 1, colIdx];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === ArrowDown) {
+    if (rowIdx === -1) {
+      return [0, colIdx];
+    } else if (rowIdx === rowCount - 1) {
+      return [rowIdx, colIdx];
+    } else {
+      return [rowIdx + 1, colIdx];
+    }
+  } else if (key === ArrowRight) {
+    if (colIdx < columnCount - 1) {
+      return [rowIdx, colIdx + 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === ArrowLeft) {
+    if (colIdx > 0) {
+      return [rowIdx, colIdx - 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  }
+  return [rowIdx, colIdx];
+}
+var useKeyboardNavigation = ({
+  columnCount = 0,
+  containerRef,
+  disableHighlightOnFocus,
+  data,
+  requestScroll,
+  rowCount = 0,
+  viewportRange
+}) => {
+  var _a;
+  const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;
+  const focusedCellPos = (0, import_react12.useRef)([-1, -1]);
+  const focusableCell = (0, import_react12.useRef)();
+  const activeCellPos = (0, import_react12.useRef)([-1, 0]);
+  const getTableCell = (0, import_react12.useCallback)(
+    ([rowIdx, colIdx]) => {
+      var _a2;
+      const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
+      return (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
+        cssQuery
+      );
+    },
+    [containerRef]
+  );
+  const getFocusedCell = (element) => element == null ? void 0 : element.closest(
+    "[role='columnHeader'],[role='cell']"
+  );
+  const getTableCellPos = (tableCell) => {
+    var _a2, _b;
+    if (tableCell.role === "columnHeader") {
+      const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
+      return [-1, colIdx];
+    } else {
+      const focusedRow = tableCell.closest("[role='row']");
+      if (focusedRow) {
+        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
+        return [rowIdx, colIdx];
+      }
+    }
+    return NULL_CELL_POS;
+  };
+  const focusCell = (0, import_react12.useCallback)(
+    (cellPos) => {
+      var _a2;
+      if (containerRef.current) {
+        const activeCell = getTableCell(cellPos);
+        if (activeCell) {
+          if (activeCell !== focusableCell.current) {
+            (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
+            focusableCell.current = activeCell;
+            activeCell.setAttribute("tabindex", "0");
+          }
+          activeCell.focus();
+        } else if (!(0, import_vuu_utils8.withinRange)(cellPos[0], viewportRange)) {
+          focusableCell.current = void 0;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+        }
+      }
+    },
+    // TODO we recreate this function whenever viewportRange changes, which will
+    // be often whilst scrolling - store range in a a ref ?
+    [containerRef, getTableCell, requestScroll, viewportRange]
+  );
+  const setActiveCell = (0, import_react12.useCallback)(
+    (rowIdx, colIdx, fromKeyboard = false) => {
+      const pos = [rowIdx, colIdx];
+      activeCellPos.current = pos;
+      focusCell(pos);
+      if (fromKeyboard) {
+        focusedCellPos.current = pos;
+      }
+    },
+    [focusCell]
+  );
+  const virtualizeActiveCell = (0, import_react12.useCallback)(() => {
+    var _a2;
+    (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
+    focusableCell.current = void 0;
+  }, []);
+  const nextPageItemIdx = (0, import_react12.useCallback)(
+    async (key, cellPos) => {
+      switch (key) {
+        case PageDown:
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          break;
+        case PageUp:
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          break;
+        case Home:
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          break;
+        case End:
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          break;
+      }
+      return cellPos;
+    },
+    [requestScroll]
+  );
+  const handleFocus = (0, import_react12.useCallback)(() => {
+    var _a2;
+    if (disableHighlightOnFocus !== true) {
+      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
+        const focusedCell = getFocusedCell(document.activeElement);
+        if (focusedCell) {
+          focusedCellPos.current = getTableCellPos(focusedCell);
+        }
+      }
+    }
+  }, [disableHighlightOnFocus, containerRef]);
+  const navigateChildItems = (0, import_react12.useCallback)(
+    async (key) => {
+      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
+      const [rowIdx, colIdx] = activeCellPos.current;
+      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
+        setActiveCell(nextRowIdx, nextColIdx, true);
+      }
+    },
+    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
+  );
+  const handleKeyDown = (0, import_react12.useCallback)(
+    (e) => {
+      if (data.length > 0 && isNavigationKey(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        void navigateChildItems(e.key);
+      }
+    },
+    [data, navigateChildItems]
+  );
+  const handleClick = (0, import_react12.useCallback)(
+    // Might not be a cell e.g the Settings button
+    (evt) => {
+      const target = evt.target;
+      const focusedCell = getFocusedCell(target);
+      if (focusedCell) {
+        const [rowIdx, colIdx] = getTableCellPos(focusedCell);
+        setActiveCell(rowIdx, colIdx);
+      }
+    },
+    [setActiveCell]
+  );
+  const containerProps = (0, import_react12.useMemo)(() => {
+    return {
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    };
+  }, [handleClick, handleFocus, handleKeyDown]);
+  (0, import_react12.useLayoutEffect)(() => {
+    const { current: cellPos } = activeCellPos;
+    const withinViewport = cellPos[0] >= viewportFirstRow && cellPos[0] <= viewportLastRow;
+    if (focusableCell.current && !withinViewport) {
+      virtualizeActiveCell();
+    } else if (!focusableCell.current && withinViewport) {
+      focusCell(cellPos);
+    }
+  }, [focusCell, viewportFirstRow, viewportLastRow, virtualizeActiveCell]);
+  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
+  (0, import_react12.useEffect)(() => {
+    var _a2;
+    if (fullyRendered && focusableCell.current === void 0) {
+      const headerCell = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
+        headerCellQuery(0)
+      );
+      if (headerCell) {
+        headerCell.setAttribute("tabindex", "0");
+        focusableCell.current = headerCell;
+      }
+    }
+  }, [containerRef, fullyRendered]);
+  return containerProps;
+};
+
+// src/useMeasuredContainer.ts
+var import_react14 = require("react");
+
+// src/useResizeObserver.ts
+var import_react13 = require("react");
+var observedMap = /* @__PURE__ */ new Map();
+var getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return element.clientHeight;
+    case "clientWidth":
+      return element.clientWidth;
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(element.scrollHeight);
+    case "scrollWidth":
+      return Math.ceil(element.scrollWidth);
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+var resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize && onResize(measurements);
+      }
+    }
+  }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = (0, import_react13.useRef)(dimensions);
+  const measure = (0, import_react13.useCallback)((target) => {
+    const { width, height } = target.getBoundingClientRect();
+    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(
+          target,
+          { width, height, contentHeight, contentWidth },
+          dim
+        );
+        return map;
+      },
+      {}
+    );
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    const target = ref.current;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      await document.fonts.ready;
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const measurements = measure(target);
+        observedTarget.measurements = measurements;
+        resizeObserver.observe(target);
+        if (reportInitialSize) {
+          onResize(measurements);
+        }
+      } else {
+        console.log(
+          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
+          "font-weight:bold; color:red;"
+        );
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        throw Error(
+          "useResizeObserver attemping to observe same element twice"
+        );
+      }
+      registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+      }
+    };
+  }, [measure, ref]);
+  (0, import_react13.useEffect)(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+
+// src/useMeasuredContainer.ts
+var ClientWidthHeight = ["clientHeight", "clientWidth"];
+var isNumber = (val) => Number.isFinite(val);
+var useMeasuredContainer = ({
+  defaultHeight = 0,
+  defaultWidth = 0,
+  height,
+  width
+}) => {
+  const containerRef = (0, import_react14.useRef)(null);
+  const [size, setSize] = (0, import_react14.useState)({
+    outer: {
+      height: height != null ? height : "100%",
+      width: width != null ? width : "100%"
+    }
+  });
+  const onResize = (0, import_react14.useCallback)(
+    ({ clientWidth, clientHeight }) => {
+      console.log(`Resize ${clientHeight}`);
+      setSize((currentSize) => {
+        const { inner, outer } = currentSize;
+        return isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== (inner == null ? void 0 : inner.width) || clientHeight !== (inner == null ? void 0 : inner.height)) ? {
+          outer,
+          inner: {
+            width: Math.floor(clientWidth) || defaultWidth,
+            height: Math.floor(clientHeight) || defaultHeight
+          }
+        } : currentSize;
+      });
+    },
+    [defaultHeight, defaultWidth]
+  );
+  useResizeObserver(containerRef, ClientWidthHeight, onResize, true);
+  return {
+    containerRef,
+    outerSize: size.outer,
+    innerSize: size.inner
+  };
+};
+
+// src/useSelection.ts
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_react15 = require("react");
+var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils9.metadataKeys;
+var NO_SELECTION = [];
+var useSelection = ({
+  selectionModel,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = (0, import_react15.useRef)(-1);
+  const selectedRef = (0, import_react15.useRef)(NO_SELECTION);
+  const handleSelectionChange = (0, import_react15.useCallback)(
+    (row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = isSelected ? import_vuu_utils9.deselectItem : import_vuu_utils9.selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      if (onSelectionChange) {
+        onSelectionChange(newSelected);
+      }
+    },
+    [onSelectionChange, selectionModel]
+  );
+  return handleSelectionChange;
+};
+
+// src/useTableModel.ts
+var import_salt_lab3 = require("@heswell/salt-lab");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_react16 = require("react");
+var { info } = (0, import_vuu_utils10.logger)("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
+var KEY_OFFSET = import_vuu_utils10.metadataKeys.count;
+var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
+var getCellRendererForColumn = (column) => {
+  var _a;
+  if ((0, import_vuu_utils10.isTypeDescriptor)(column.type)) {
+    return (0, import_vuu_utils10.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
+  }
+};
+var getDataType = (column, columnNames, dataTypes) => {
+  var _a;
+  const index = columnNames.indexOf(column.name);
+  if (index !== -1 && dataTypes[index]) {
+    return dataTypes[index];
+  } else {
+    return (_a = column.serverDataType) != null ? _a : "string";
+  }
+};
+var numericTypes = ["int", "long", "double"];
+var getDefaultAlignment = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
+var columnReducer = (state, action) => {
+  info == null ? void 0 : info(`GridModelReducer ${action.type}`);
+  switch (action.type) {
+    case "init":
+      return init(action);
+    case "moveColumn":
+      return moveColumn(state, action);
+    case "resizeColumn":
+      return resizeColumn(state, action);
+    case "setTypes":
+      return setTypes(state, action);
+    case "hideColumns":
+      return hideColumns(state, action);
+    case "showColumns":
+      return showColumns(state, action);
+    case "pinColumn":
+      return pinColumn2(state, action);
+    case "updateColumnProp":
+      return updateColumnProp(state, action);
+    case "tableConfig":
+      return updateTableConfig(state, action);
+    default:
+      console.log(`unhandled action ${action.type}`);
+      return state;
+  }
+};
+var useTableModel = (tableConfig, dataSourceConfig) => {
+  const [state, dispatchColumnAction] = (0, import_react16.useReducer)(columnReducer, { tableConfig, dataSourceConfig }, init);
+  return {
+    columns: state.columns,
+    dispatchColumnAction,
+    headings: state.headings
+  };
+};
+function init({ dataSourceConfig, tableConfig }) {
+  const columns = tableConfig.columns.map(
+    toKeyedColumWithDefaults(tableConfig)
+  );
+  const maybePinnedColumns = columns.some(import_vuu_utils10.isPinned) ? (0, import_vuu_utils10.sortPinnedColumns)(columns) : columns;
+  const state = {
+    columns: maybePinnedColumns,
+    headings: (0, import_vuu_utils10.getTableHeadings)(maybePinnedColumns)
+  };
+  if (dataSourceConfig) {
+    const { columns: columns2, ...rest } = dataSourceConfig;
+    return updateTableConfig(state, {
+      type: "tableConfig",
+      ...rest
+    });
+  } else {
+    return state;
+  }
+}
+var getLabel = (label, columnFormatHeader) => {
+  if (columnFormatHeader === "uppercase") {
+    return label.toUpperCase();
+  } else if (columnFormatHeader === "capitalize") {
+    return label[0].toUpperCase() + label.slice(1).toLowerCase();
+  }
+  return label;
+};
+var toKeyedColumWithDefaults = (options) => (column, index) => {
+  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = options;
+  const {
+    align = getDefaultAlignment(column.serverDataType),
+    key,
+    name,
+    label = name,
+    width = columnDefaultWidth,
+    ...rest
+  } = column;
+  const keyedColumnWithDefaults = {
+    ...rest,
+    align,
+    CellRenderer: getCellRendererForColumn(column),
+    label: getLabel(label, columnFormatHeader),
+    key: key != null ? key : index + KEY_OFFSET,
+    name,
+    originalIdx: index,
+    valueFormatter: (0, import_vuu_utils10.getValueFormatter)(column),
+    width
+  };
+  if ((0, import_vuu_utils10.isGroupColumn)(keyedColumnWithDefaults)) {
+    keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
+      (col) => toKeyedColumWithDefaults(options)(col, col.key)
+    );
+  }
+  return keyedColumnWithDefaults;
+};
+function moveColumn(state, { column, moveBy, moveTo }) {
+  const { columns } = state;
+  if (typeof moveBy === "number") {
+    const idx = columns.indexOf(column);
+    const newColumns = columns.slice();
+    const [movedColumns] = newColumns.splice(idx, 1);
+    newColumns.splice(idx + moveBy, 0, movedColumns);
+    return {
+      ...state,
+      columns: newColumns
+    };
+  } else if (typeof moveTo === "number") {
+    const index = columns.indexOf(column);
+    return {
+      ...state,
+      columns: (0, import_salt_lab3.moveItem)(columns, index, moveTo)
+    };
+  }
+  return state;
+}
+function hideColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden !== true)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden !== true) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: true
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function showColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: false
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function resizeColumn(state, { column, phase, width }) {
+  const type = "updateColumnProp";
+  const resizing = phase !== "end";
+  switch (phase) {
+    case "begin":
+    case "end":
+      return updateColumnProp(state, { type, column, resizing });
+    case "resize":
+      return updateColumnProp(state, { type, column, width });
+    default:
+      throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
+  }
+}
+function setTypes(state, { columnNames, serverDataTypes }) {
+  const { columns } = state;
+  if (columns.some(columnWithoutDataType)) {
+    const cols = columns.map((column) => {
+      var _a;
+      const serverDataType = getDataType(column, columnNames, serverDataTypes);
+      return {
+        ...column,
+        align: (_a = column.align) != null ? _a : getDefaultAlignment(serverDataType),
+        serverDataType
+      };
+    });
+    return {
+      ...state,
+      columns: cols
+    };
+  } else {
+    return state;
+  }
+}
+function pinColumn2(state, action) {
+  let { columns } = state;
+  const { column, pin } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    columns = replaceColumn(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils10.sortPinnedColumns)(columns);
+    return {
+      ...state,
+      columns
+    };
+  } else {
+    return state;
+  }
+}
+function updateColumnProp(state, action) {
+  let { columns } = state;
+  const { align, column, hidden, label, resizing, width } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    if (align === "left" || align === "right") {
+      columns = replaceColumn(columns, { ...targetColumn, align });
+    }
+    if (typeof label === "string") {
+      columns = replaceColumn(columns, { ...targetColumn, label });
+    }
+    if (typeof resizing === "boolean") {
+      columns = replaceColumn(columns, { ...targetColumn, resizing });
+    }
+    if (typeof hidden === "boolean") {
+      columns = replaceColumn(columns, { ...targetColumn, hidden });
+    }
+    if (typeof width === "number") {
+      columns = replaceColumn(columns, { ...targetColumn, width });
+    }
+  }
+  return {
+    ...state,
+    columns
+  };
+}
+function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort }) {
+  const hasColumns = columns && columns.length > 0;
+  const hasGroupBy = groupBy !== void 0;
+  const hasFilter = typeof (filter == null ? void 0 : filter.filter) === "string";
+  const hasSort = sort && sort.sortDefs.length > 0;
+  let result = state;
+  if (hasColumns) {
+    result = {
+      ...state,
+      columns: columns.map((colName, index) => {
+        const columnName = (0, import_vuu_utils10.getColumnName)(colName);
+        const key = index + KEY_OFFSET;
+        const col = (0, import_vuu_utils10.findColumn)(result.columns, columnName);
+        if (col) {
+          if (col.key === key) {
+            return col;
+          } else {
+            return {
+              ...col,
+              key
+            };
+          }
+        }
+        throw Error(`useTableModel column ${colName} not found`);
+      })
+    };
+  }
+  if (hasGroupBy) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils10.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils10.applySortToColumns)(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils10.applyFilterToColumns)(result.columns, filter)
+    };
+  } else if (result.columns.some(import_vuu_utils10.isFilteredColumn)) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils10.stripFilterFromColumns)(result.columns)
+    };
+  }
+  return result;
+}
+function replaceColumn(state, column) {
+  return state.map((col) => col.name === column.name ? column : col);
+}
+
+// src/useTableScroll.ts
+var import_react17 = require("react");
+var getPctScroll = (container) => {
+  const { scrollLeft, scrollTop } = container;
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  return [pctScrollLeft, pctScrollTop];
+};
+var getMaxScroll = (container) => {
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
+};
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = (0, import_react17.useRef)(null);
+  const callbackRef = (0, import_react17.useCallback)(
+    (el) => {
+      if (el) {
+        ref.current = el;
+        onAttach == null ? void 0 : onAttach(el);
+      } else if (ref.current) {
+        const { current: originalRef } = ref;
+        ref.current = el;
+        onDetach == null ? void 0 : onDetach(originalRef);
+      }
+    },
+    [onAttach, onDetach]
+  );
+  return callbackRef;
+};
+var useTableScroll = ({
+  onHorizontalScroll,
+  onVerticalScroll,
+  viewport
+}) => {
+  const contentContainerScrolledRef = (0, import_react17.useRef)(false);
+  const scrollPosRef = (0, import_react17.useRef)({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = (0, import_react17.useRef)(null);
+  const contentContainerRef = (0, import_react17.useRef)(null);
+  const {
+    maxScrollContainerScrollHorizontal: maxScrollLeft,
+    maxScrollContainerScrollVertical: maxScrollTop
+  } = viewport;
+  const handleScrollbarContainerScroll = (0, import_react17.useCallback)(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    if (contentContainerScrolled) {
+      contentContainerScrolledRef.current = false;
+    } else if (contentContainer && scrollbarContainer) {
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
+      const [maxScrollLeft2, maxScrollTop2] = getMaxScroll(contentContainer);
+      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft2);
+      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop2);
+      contentContainer.scrollTo({
+        left: rootScrollLeft,
+        top: rootScrollTop,
+        behavior: "auto"
+      });
+    }
+  }, []);
+  const handleContentContainerScroll = (0, import_react17.useCallback)(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: scrollPos } = scrollPosRef;
+    if (contentContainer && scrollbarContainer) {
+      const { scrollLeft, scrollTop } = contentContainer;
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
+      contentContainerScrolledRef.current = true;
+      scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      if (scrollPos.scrollTop !== scrollTop) {
+        scrollPos.scrollTop = scrollTop;
+        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        scrollPos.scrollLeft = scrollLeft;
+        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  const handleAttachScrollbarContainer = (0, import_react17.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = (0, import_react17.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = (0, import_react17.useCallback)(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = (0, import_react17.useCallback)(
+    (el) => {
+      contentContainerRef.current = null;
+      el.removeEventListener("scroll", handleContentContainerScroll);
+    },
+    [handleContentContainerScroll]
+  );
+  const contentContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachContentContainer,
+    onDetach: handleDetachContentContainer
+  });
+  const scrollbarContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachScrollbarContainer,
+    onDetach: handleDetachScrollbarContainer
+  });
+  const requestScroll = (0, import_react17.useCallback)(
+    (scrollRequest) => {
+      const { current: scrollbarContainer } = contentContainerRef;
+      if (scrollbarContainer) {
+        contentContainerScrolledRef.current = false;
+        if (scrollRequest.type === "scroll-page") {
+          const { clientHeight, scrollLeft, scrollTop } = scrollbarContainer;
+          const { direction } = scrollRequest;
+          const scrollBy = direction === "down" ? clientHeight : -clientHeight;
+          const newScrollTop = Math.min(
+            Math.max(0, scrollTop + scrollBy),
+            maxScrollTop
+          );
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: scrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
+          scrollbarContainer.scrollTo({
+            top: scrollTo,
+            left: scrollbarContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [maxScrollTop]
+  );
+  return {
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: contentContainerCallbackRef,
+    /** Scroll the table  */
+    requestScroll
+  };
+};
+
+// src/useTableViewport.ts
+var import_react18 = require("react");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var MAX_RAW_ROWS = 15e5;
+var UNMEASURED_VIEWPORT = {
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
+  maxScrollContainerScrollHorizontal: 0,
+  maxScrollContainerScrollVertical: 0,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  setPctScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0
+};
+var measurePinnedColumns = (columns) => {
+  let pinnedWidthLeft = 0;
+  let pinnedWidthRight = 0;
+  let unpinnedWidth = 0;
+  for (const column of columns) {
+    const { hidden, pin, width } = column;
+    const visibleWidth = hidden ? 0 : width;
+    if (pin === "left") {
+      pinnedWidthLeft += visibleWidth;
+    } else if (pin === "right") {
+      pinnedWidthRight += visibleWidth;
+    } else {
+      unpinnedWidth += visibleWidth;
+    }
+  }
+  return { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth };
+};
+var useTableViewport = ({
+  columns,
+  headerHeight,
+  headings,
+  rowCount,
+  rowHeight,
+  size
+}) => {
+  const pctScrollTopRef = (0, import_react18.useRef)(0);
+  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
+  const appliedContentHeight = appliedRowCount * rowHeight;
+  const virtualContentHeight = rowCount * rowHeight;
+  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react18.useMemo)(
+    () => measurePinnedColumns(columns),
+    [columns]
+  );
+  const [actualRowOffset, actualRowAtPosition] = (0, import_react18.useMemo)(
+    () => (0, import_vuu_utils11.actualRowPositioning)(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = (0, import_react18.useMemo)(() => {
+    if (virtualisedExtent) {
+      return (0, import_vuu_utils11.virtualRowPositioning)(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = (0, import_react18.useCallback)((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return (0, import_react18.useMemo)(() => {
+    var _a;
+    if (size) {
+      const headingsDepth = headings.length;
+      const scrollbarSize = 15;
+      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
+      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const maxScrollContainerScrollHorizontal = contentWidth - size.width + pinnedWidthLeft;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      const viewportBodyHeight = size.height - totalHeaderHeight;
+      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      return {
+        contentHeight: appliedContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        horizontalScrollbarHeight,
+        maxScrollContainerScrollHorizontal,
+        maxScrollContainerScrollVertical,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        contentWidth,
+        setPctScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    size,
+    headings.length,
+    pinnedWidthLeft,
+    unpinnedWidth,
+    pinnedWidthRight,
+    appliedContentHeight,
+    headerHeight,
+    rowHeight,
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop
+  ]);
+};
+
+// src/useVirtualViewport.ts
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_react19 = require("react");
+var useVirtualViewport = ({
+  columns,
+  getRowAtPosition,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = (0, import_react19.useRef)(-1);
+  const {
+    rowCount: viewportRowCount,
+    contentWidth,
+    maxScrollContainerScrollHorizontal
+  } = viewportMeasurements;
+  const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
+  const scrollLeftRef = (0, import_react19.useRef)(0);
+  const [visibleColumns, preSpan] = (0, import_react19.useMemo)(
+    () => (0, import_vuu_utils12.getColumnsInViewport)(
+      columns,
+      scrollLeftRef.current,
+      scrollLeftRef.current + availableWidth
+    ),
+    [availableWidth, columns]
+  );
+  const preSpanRef = (0, import_react19.useRef)(preSpan);
+  (0, import_react19.useEffect)(() => {
+    setColumnsWithinViewport(visibleColumns);
+  }, [visibleColumns]);
+  const [columnsWithinViewport, setColumnsWithinViewport] = (0, import_react19.useState)(visibleColumns);
+  const handleHorizontalScroll = (0, import_react19.useCallback)(
+    (scrollLeft) => {
+      scrollLeftRef.current = scrollLeft;
+      const [visibleColumns2, pre] = (0, import_vuu_utils12.getColumnsInViewport)(
+        columns,
+        scrollLeft,
+        scrollLeft + availableWidth
+      );
+      if ((0, import_vuu_utils12.itemsChanged)(columnsWithinViewport, visibleColumns2)) {
+        preSpanRef.current = pre;
+        setColumnsWithinViewport(visibleColumns2);
+      }
+    },
+    [availableWidth, columns, columnsWithinViewport]
+  );
+  const handleVerticalScroll = (0, import_react19.useCallback)(
+    (scrollTop) => {
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+    },
+    [getRowAtPosition, setRange, viewportRowCount]
+  );
+  return {
+    columnsWithinViewport,
+    onHorizontalScroll: handleHorizontalScroll,
+    onVerticalScroll: handleVerticalScroll,
+    /** number of leading columns not rendered because of virtualization  */
+    virtualColSpan: preSpanRef.current
+  };
+};
+
+// src/useTable.ts
+var NO_ROWS = [];
+var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils13.metadataKeys;
+var useTable = ({
+  config,
+  dataSource,
+  headerHeight,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight,
+  selectionModel,
+  ...measuredProps
+}) => {
+  var _a, _b;
+  const [rowCount, setRowCount] = (0, import_react20.useState)(0);
+  const expectConfigChangeRef = (0, import_react20.useRef)(false);
+  const dataSourceRef = (0, import_react20.useRef)();
+  dataSourceRef.current = dataSource;
+  if (dataSource === void 0) {
+    throw Error("no data source provided to DataTable");
+  }
+  const containerMeasurements = useMeasuredContainer(measuredProps);
+  const onDataRowcountChange = (0, import_react20.useCallback)((size) => {
+    setRowCount(size);
+  }, []);
+  const { columns, dispatchColumnAction, headings } = useTableModel(
+    config,
+    dataSource.config
+  );
+  const handlePersistentColumnOperation = (0, import_react20.useCallback)(
+    (action) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction(action);
+    },
+    [dispatchColumnAction]
+  );
+  const handleContextMenuAction = useContextMenu({
+    dataSource,
+    onPersistentColumnOperation: handlePersistentColumnOperation
+  });
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size: containerMeasurements.innerSize
+  });
+  const onSubscribed = (0, import_react20.useCallback)(
+    (subscription) => {
+      if (subscription.tableMeta) {
+        const { columns: columnNames, dataTypes: serverDataTypes } = subscription.tableMeta;
+        expectConfigChangeRef.current = true;
+        dispatchColumnAction({
+          type: "setTypes",
+          columnNames,
+          serverDataTypes
+        });
+      }
+    },
+    [dispatchColumnAction]
+  );
+  const handleSelectionChange = (0, import_react20.useCallback)(
+    (selected) => {
+      dataSource.select(selected);
+      onSelectionChange == null ? void 0 : onSelectionChange(selected);
+    },
+    [dataSource, onSelectionChange]
+  );
+  const handleRowClick = useSelection({
+    onSelectionChange: handleSelectionChange,
+    selectionModel
+  });
+  const { data, getSelectedRows, range, setRange } = useDataSource({
+    dataSource,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    onSubscribed,
+    onSizeChange: onDataRowcountChange,
+    renderBufferSize,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const dataRef = (0, import_react20.useRef)();
+  dataRef.current = data;
+  const handleSort = (0, import_react20.useCallback)(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = (0, import_vuu_utils13.applySort)(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const handleColumnResize = (0, import_react20.useCallback)(
+    (phase, columnName, width) => {
+      const column = columns.find((column2) => column2.name === columnName);
+      if (column) {
+        if (phase === "end") {
+          expectConfigChangeRef.current = true;
+        }
+        dispatchColumnAction({
+          type: "resizeColumn",
+          phase,
+          column,
+          width
+        });
+      } else {
+        throw Error(
+          `useDataTable.handleColumnResize, column ${columnName} not found`
+        );
+      }
+    },
+    [columns, dispatchColumnAction]
+  );
+  const handleToggleGroup = (0, import_react20.useCallback)(
+    (row, column) => {
+      const isJson = (0, import_vuu_utils13.isJsonGroup)(column, row);
+      const key = row[KEY2];
+      if (row[IS_EXPANDED2]) {
+        dataSource.closeTreeNode(key, true);
+        if (isJson) {
+          const idx = columns.indexOf(column);
+          const rows = dataSource.getRowsAtDepth(idx + 1);
+          if (!rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
+            dispatchColumnAction({
+              type: "hideColumns",
+              columns: columns.slice(idx + 2)
+            });
+          }
+        }
+      } else {
+        dataSource.openTreeNode(key);
+        if (isJson) {
+          const childRows = dataSource.getChildRows(key);
+          const idx = columns.indexOf(column) + 1;
+          const columnsToShow = [columns[idx]];
+          if (childRows.some((row2) => row2[IS_LEAF2])) {
+            columnsToShow.push(columns[idx + 1]);
+          }
+          if (columnsToShow.some((col) => col.hidden)) {
+            dispatchColumnAction({
+              type: "showColumns",
+              columns: columnsToShow
+            });
+          }
+        }
+      }
+    },
+    [columns, dataSource, dispatchColumnAction]
+  );
+  const {
+    onVerticalScroll,
+    onHorizontalScroll,
+    columnsWithinViewport,
+    virtualColSpan
+  } = useVirtualViewport({
+    columns,
+    getRowAtPosition,
+    setRange,
+    viewportMeasurements
+  });
+  const handleVerticalScroll = (0, import_react20.useCallback)(
+    (scrollTop, pctScrollTop) => {
+      setPctScrollTop(pctScrollTop);
+      onVerticalScroll(scrollTop);
+    },
+    [onVerticalScroll, setPctScrollTop]
+  );
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    onHorizontalScroll,
+    onVerticalScroll: handleVerticalScroll,
+    viewport: viewportMeasurements,
+    viewportHeight: ((_b = (_a = containerMeasurements.innerSize) == null ? void 0 : _a.height) != null ? _b : 0) - headerHeight
+  });
+  const containerProps = useKeyboardNavigation({
+    columnCount: columns.length,
+    containerRef: containerMeasurements.containerRef,
+    data,
+    requestScroll,
+    rowCount: dataSource == null ? void 0 : dataSource.size,
+    viewportRange: range
+  });
+  const handleRemoveColumnFromGroupBy = (0, import_react20.useCallback)(
+    (column) => {
+      if (column) {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      } else {
+        dataSource.groupBy = [];
+      }
+    },
+    [dataSource]
+  );
+  const handleDropColumn = (0, import_react20.useCallback)(
+    (fromIndex, toIndex) => {
+      const column = dataSource.columns[fromIndex];
+      const columns2 = (0, import_vuu_utils13.moveItem)(dataSource.columns, column, toIndex);
+      if (columns2 !== dataSource.columns) {
+        dataSource.columns = columns2;
+        dispatchColumnAction({ type: "tableConfig", columns: columns2 });
+      }
+    },
+    [dataSource, dispatchColumnAction]
+  );
+  const draggableHook = useDraggableColumn({
+    onDrop: handleDropColumn
+  });
+  (0, import_react20.useEffect)(() => {
+    if (dataSourceRef.current) {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: config,
+        dataSourceConfig: dataSourceRef.current.config
+      });
+    }
+  }, [config, dispatchColumnAction]);
+  (0, import_react20.useEffect)(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  (0, import_react20.useMemo)(() => {
+    if (expectConfigChangeRef.current) {
+      onConfigChange == null ? void 0 : onConfigChange({
+        ...config,
+        columns
+      });
+      expectConfigChangeRef.current = false;
+    }
+  }, [columns, config, onConfigChange]);
+  const showContextMenu = (0, import_vuu_popups3.useContextMenu)();
+  const onContextMenu = (0, import_react20.useCallback)(
+    (evt) => {
+      var _a2;
+      const { current: currentData } = dataRef;
+      const { current: currentDataSource } = dataSourceRef;
+      const target = evt.target;
+      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
+      const rowEl = target == null ? void 0 : target.closest(".vuuTableRow");
+      if (cellEl && rowEl && currentData && currentDataSource) {
+        const { columns: columns2, selectedRowsCount } = currentDataSource;
+        const columnMap = (0, import_vuu_utils13.buildColumnMap)(columns2);
+        const rowIndex = parseInt((_a2 = rowEl.ariaRowIndex) != null ? _a2 : "-1");
+        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
+        const row = currentData.find(([idx]) => idx === rowIndex);
+        const columnName = columns2[cellIndex];
+        showContextMenu(evt, "grid", {
+          columnMap,
+          columnName,
+          row,
+          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
+          viewport: dataSource == null ? void 0 : dataSource.viewport
+        });
+      }
+    },
+    [dataSource == null ? void 0 : dataSource.viewport, getSelectedRows, showContextMenu]
+  );
+  return {
+    containerMeasurements,
+    containerProps,
+    columns,
+    columnsWithinViewport,
+    data,
+    dispatchColumnAction,
+    getRowOffset,
+    handleContextMenuAction,
+    headings,
+    onColumnResize: handleColumnResize,
+    onContextMenu,
+    onRemoveColumnFromGroupBy: handleRemoveColumnFromGroupBy,
+    onRowClick: handleRowClick,
+    onSort: handleSort,
+    onToggleGroup: handleToggleGroup,
+    virtualColSpan,
+    scrollProps,
+    rowCount,
+    viewportMeasurements,
+    ...draggableHook
+  };
+};
+
+// src/Table.tsx
+var import_classnames7 = __toESM(require("classnames"));
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase6 = "vuuTable";
+var Table = ({
+  allowConfigEditing: showSettings = false,
+  className: classNameProp,
+  config,
+  dataSource,
+  headerHeight = 25,
+  height,
+  id: idProp,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSelectionChange,
+  onShowConfigEditor: onShowSettings,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel = "extended",
+  style: styleProp,
+  width,
+  zebraStripes = false,
+  ...props
+}) => {
+  const id = (0, import_core.useIdMemo)(idProp);
+  const {
+    containerMeasurements: { containerRef, innerSize, outerSize },
+    containerProps,
+    dispatchColumnAction,
+    draggable,
+    draggedItemIndex,
+    handleContextMenuAction,
+    scrollProps,
+    viewportMeasurements,
+    ...tableProps
+  } = useTable({
+    config,
+    dataSource,
+    renderBufferSize,
+    headerHeight,
+    height,
+    onConfigChange,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    onSelectionChange,
+    rowHeight,
+    selectionModel,
+    width
+  });
+  const style = {
+    ...outerSize,
+    "--content-height": `${viewportMeasurements.contentHeight}px`,
+    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+    "--content-width": `${viewportMeasurements.contentWidth}px`,
+    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+    "--header-height": `${headerHeight}px`,
+    "--row-height": `${rowHeight}px`,
+    "--table-height": `${innerSize == null ? void 0 : innerSize.height}px`,
+    "--table-width": `${innerSize == null ? void 0 : innerSize.width}px`,
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+  };
+  const className = (0, import_classnames7.default)(classBase6, classNameProp, {
+    [`${classBase6}-zebra`]: zebraStripes,
+    [`${classBase6}-loading`]: (0, import_vuu_utils14.isDataLoading)(tableProps.columns)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_vuu_popups4.ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder: buildContextMenuDescriptors(dataSource),
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          ...props,
+          ...containerProps,
+          className,
+          id,
+          ref: containerRef,
+          style,
+          tabIndex: -1,
+          children: [
+            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                className: `${classBase6}-scrollbarContainer`,
+                ref: scrollProps.scrollbarContainerRef,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase6}-scrollbarContent` })
+              }
+            ) : null,
+            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              "div",
+              {
+                className: `${classBase6}-contentContainer`,
+                ref: scrollProps.contentContainerRef,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    RowBasedTable,
+                    {
+                      ...tableProps,
+                      headerHeight,
+                      tableId: id
+                    }
+                  ),
+                  draggable
+                ]
+              }
+            ) : null,
+            showSettings && innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_core.Button,
+              {
+                className: `${classBase6}-settings`,
+                "data-icon": "settings",
+                onClick: onShowSettings,
+                variant: "secondary"
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/cell-renderers/json-cell/JsonCell.tsx
+var import_classnames8 = __toESM(require("classnames"));
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase7 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = import_vuu_utils15.metadataKeys;
+var localKey = (key) => {
+  const pos = key.lastIndexOf("|");
+  if (pos === -1) {
+    return "";
+  } else {
+    return key.slice(pos + 1);
+  }
+};
+var JsonCell = ({ column, row }) => {
+  const {
+    key: columnKey
+    /*, type, valueFormatter */
+  } = column;
+  let value = row[columnKey];
+  let isToggle = false;
+  if ((0, import_vuu_utils15.isJsonAttribute)(value)) {
+    value = value.slice(0, -1);
+    isToggle = true;
+  }
+  const rowKey = localKey(row[KEY3]);
+  const className = (0, import_classnames8.default)({
+    [`${classBase7}-name`]: rowKey === value,
+    [`${classBase7}-value`]: rowKey !== value,
+    [`${classBase7}-group`]: isToggle
+  });
+  if (isToggle) {
+    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-value`, children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-toggle`, "data-icon": toggleIcon })
+    ] });
+  } else if (value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className, children: value });
+  } else {
+    return null;
+  }
+};
+(0, import_vuu_utils15.registerComponent)("json", JsonCell, "cell-renderer", {});
 //# sourceMappingURL=index.js.map