@vuu-ui/vuu-table 0.6.21 → 0.6.22-debug

package/esm/index.js

@@ -1,2 +1,2793 @@
-import{ContextMenuProvider as ns}from"@vuu-ui/vuu-popups";import{Button as os,useIdMemo as rs}from"@salt-ds/core";import{metadataKeys as Zn}from"@vuu-ui/vuu-utils";import{useCallback as qn}from"react";import eo from"classnames";import{isGroupColumn as Ze,isJsonColumn as An,isJsonGroup as Ln,metadataKeys as Kn,notHidden as kn}from"@vuu-ui/vuu-utils";import zn from"classnames";import{memo as Nn,useCallback as qe}from"react";import{getColumnPinStyle as hn,metadataKeys as yn}from"@vuu-ui/vuu-utils";import{EditableLabel as vn}from"@heswell/salt-lab";import wn from"classnames";import{memo as Mn,useCallback as Tn,useRef as Dn,useState as Xe}from"react";import{jsx as ie}from"react/jsx-runtime";var{KEY:Ye}=yn,ye=Mn(({className:e,column:t,onClick:n,row:o})=>{let r=Dn(null),{align:l,CellRenderer:s,key:i,pin:a,editable:m,resizing:c,valueFormatter:d}=t,[C,y]=Xe(!1),w=d(o[i]),[u,f]=Xe(w),g=()=>{var A;(A=r.current)==null||A.focus()},p=A=>{A.key==="Enter"&&y(!0)},v=Tn(()=>{n==null||n(t)},[t,n]),H=()=>{y(!0)},P=(A="",k="",b=!0,M=!1)=>{var D;y(!1),M?f(A):k!==A&&f(k),b===!1&&((D=r.current)==null||D.focus())},h=wn(e,{vuuAlignRight:l==="right",vuuPinFloating:a==="floating",vuuPinLeft:a==="left",vuuPinRight:a==="right","vuuTableCell-resizing":c})||void 0,x=hn(t);return m?ie("td",{className:h,"data-editable":!0,style:x,onKeyDown:p,children:ie(vn,{editing:C,value:u,onChange:f,onMouseDownCapture:g,onEnterEditMode:H,onExitEditMode:P,onKeyDown:p,ref:r,tabIndex:0},"title")}):ie("td",{className:h,style:x,onClick:v,children:s?ie(s,{column:t,row:o}):w})},xn);ye.displayName="TableCell";function xn(e,t){return e.column===t.column&&e.onClick===t.onClick&&e.row[Ye]===t.row[Ye]&&e.row[e.column.key]===t.row[t.column.key]}import{metadataKeys as Rn}from"@vuu-ui/vuu-utils";import{useCallback as Hn}from"react";import{jsx as ve,jsxs as En}from"react/jsx-runtime";var{DEPTH:Pn,IS_LEAF:Qe}=Rn,Sn=(e,t)=>{let{[Pn]:n,[Qe]:o}=t;if(o||n>e.length)return[null,n===null?0:n-1];if(n===0)return["$root",0];{let r=e[n-1];return[t[r.key],n-1]}},je=({column:e,onClick:t,row:n})=>{let{columns:o}=e,[r,l]=Sn(o,n),s=Hn(()=>{t==null||t(e)},[e,t]),i={left:e.pin=="left"?e.pinnedOffset:void 0},a=n[Qe],m=Array(l).fill(0).map((c,d)=>ve("span",{className:"vuuTableGroupCell-spacer"},d));return En("td",{className:"vuuTableGroupCell vuuPinLeft",onClick:a?void 0:s,style:i,children:[m,a?null:ve("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),ve("span",{children:r})]})};import{jsx as et,jsxs as $n}from"react/jsx-runtime";var{IDX:In,IS_EXPANDED:Vn,SELECTED:Fn}=Kn,ae="vuuTableRow",ce=Nn(function({columns:t,height:n,index:o,onClick:r,onToggleGroup:l,virtualColSpan:s=0,row:i}){let{[In]:a,[Vn]:m,[Fn]:c}=i,d=zn(ae,{[`${ae}-even`]:a%2===0,[`${ae}-expanded`]:m,[`${ae}-preSelected`]:c===2}),C=a-o,y=qe(u=>{let f=u.shiftKey,g=u.ctrlKey||u.metaKey;r==null||r(i,f,g)},[r,i]),w=qe(u=>{(Ze(u)||Ln(u,i))&&(l==null||l(i,u))},[l,i]);return $n("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?et("td",{colSpan:s}):null,t.filter(kn).map(u=>{let f=Ze(u),g=An(u);return et(f?je:ye,{column:u,onClick:f||g?w:void 0,row:i},u.name)})]})});import Yn from"classnames";import{useCallback as Te,useRef as it}from"react";import{useCallback as we,useRef as Wn}from"react";import{jsx as On}from"react/jsx-runtime";var tt=()=>{},Gn="vuuColumnResizer",ue=({onDrag:e,onDragEnd:t=tt,onDragStart:n=tt})=>{let o=Wn(0),r=we(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=we(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",r),t(i)},[t,r]),s=we(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 On("div",{className:Gn,onMouseDown:s})};import nt from"classnames";import{jsx as me,jsxs as Bn}from"react/jsx-runtime";var ot="vuuSortIndicator",rt=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?Bn("div",{className:nt(ot,"multi-col",t),children:[me("span",{"data-icon":`sorted-${t}`}),me("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):me("div",{className:nt(ot,"single-col"),children:me("span",{"data-icon":`sorted-${t}`})})};import{useCallback as Me,useRef as st}from"react";var de=({column:e,onResize:t,rootRef:n})=>{let o=st(0),r=st(!1),{name:l}=e,s=Me(()=>{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=Me((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=Me(()=>{t&&(t("end",l,o.current),setTimeout(()=>{r.current=!1},100))},[l,t]);return{isResizing:r.current,onDrag:i,onDragStart:s,onDragEnd:a}};import{useContextMenu as Qn}from"@vuu-ui/vuu-popups";import{useContextMenu as Un}from"@vuu-ui/vuu-popups";import _n from"classnames";import{useCallback as Jn}from"react";import{jsx as Xn}from"react/jsx-runtime";var lt=({column:e,filter:t})=>{let n=Un(),o=Jn(r=>{r.stopPropagation(),n(r,"filter",{column:e,filter:t})},[e,t,n]);return e.filter?Xn("div",{className:_n("vuuFilterIndicator"),"data-icon":"filter",onClick:o}):null};import{jsx as j,jsxs as jn}from"react/jsx-runtime";var Q="vuuTable-headerCell",pe=({column:e,className:t,onClick:n,onDragStart:o,onResize:r,...l})=>{let s=it(null),{isResizing:i,...a}=de({column:e,onResize:r,rootRef:s}),m=Qn(),c=it(null),d=f=>{m(f,"header",{column:e})},C=Te(f=>!i&&(n==null?void 0:n(f)),[i,n]),y=Te(f=>{c.current=window.setTimeout(()=>{o==null||o(f),c.current=null},250)},[o]),w=Te(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),u=Yn(Q,t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:e.endPin,[`${Q}-resizing`]:e.resizing,[`${Q}-right`]:e.align==="right"});return j("th",{className:u,...l,onClick:C,onContextMenu:d,onMouseDown:y,onMouseUp:w,ref:s,children:jn("div",{className:`${Q}-inner`,children:[j(lt,{column:e}),j("div",{className:`${Q}-label`,children:e.label}),j(rt,{sorted:e.sorted}),e.resizeable!==!1?j(ue,{...a}):null]})})};import{Fragment as oo,jsx as J,jsxs as no}from"react/jsx-runtime";var at="vuuTable",{RENDER_IDX:to}=Zn,ct=({columns:e,data:t,headerHeight:n,onHeaderCellDragEnd:o,rowHeight:r})=>{let l=qn(()=>{o==null||o()},[o]);return console.log("ColumnBasedTable render"),J(oo,{children:e.map((s,i)=>J("table",{className:eo(`${at}-table`,`${at}-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:no("tbody",{children:[J("tr",{children:J(pe,{column:s,"data-idx":i,onDragEnd:l},i)},"header"),t.map((a,m)=>J(ce,{columns:[s],height:r,index:m,row:a},a[to])),J("tr",{className:"vuuTable-filler"})]})},s.name))})};import{isNumericColumn as ro}from"@vuu-ui/vuu-utils";var ut=e=>(t,n)=>{let o=[];if(e===void 0)return o;if(t==="header")o.push(...so(n,e)),o.push(...ao(n,e)),o.push(...lo(n,e)),o.push(...io(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 so(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 lo(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(ro(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 He=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),De=e=>He(e,"left"),xe=e=>He(e,"floating"),Re=e=>He(e,"right");function io(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:[De(e),xe(e),Re(e)]}):n==="left"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[xe(e),Re(e)]}):n==="right"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[De(e),xe(e)]}):n==="floating"&&o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[De(e),Re(e)]}),o}function ao(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}import{removeColumnFromFilter as co}from"@vuu-ui/vuu-filters";import{addGroupColumn as mt,addSortColumn as dt,AggregationType as uo,setAggregations as Z,setSortColumn as pt}from"@vuu-ui/vuu-utils";var mo=(e,t)=>{if(e.filterStruct&&t){let[n,o]=co(t,e.filterStruct);return{filter:o,filterStruct:n}}else return e},{Average:po,Count:fo,High:go,Low:Co,Sum:bo}=uo,ft=({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=pt(e.sort,s,"A"),!0;case"sort-dsc":return e.sort=pt(e.sort,s,"D"),!0;case"sort-add-asc":return e.sort=dt(e.sort,s,"A"),!0;case"sort-add-dsc":return e.sort=dt(e.sort,s,"D"),!0;case"group":return e.groupBy=mt(e.groupBy,s),!0;case"group-add":return e.groupBy=mt(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=mo(e.filter,s),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=Z(e.aggregations,s,po),!0;case"agg-high":return e.aggregations=Z(e.aggregations,s,go),!0;case"agg-low":return e.aggregations=Z(e.aggregations,s,Co),!0;case"agg-count":return e.aggregations=Z(e.aggregations,s,fo),!0;case"agg-sum":return e.aggregations=Z(e.aggregations,s,bo),!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};import{getColumnPinStyle as vo,isGroupColumn as wo,metadataKeys as Mo,notHidden as To,visibleColumnAtIndex as Do}from"@vuu-ui/vuu-utils";import{useCallback as ht,useMemo as xo}from"react";import gt from"classnames";import{useRef as ho}from"react";import{jsx as q,jsxs as bt}from"react/jsx-runtime";var G="vuuTable-groupHeaderCell",yo=e=>{let{column:t,className:n,onRemoveColumn:o}=e;return bt("div",{className:gt(`${G}-col`,n),role:"columnheader",children:[q("span",{className:`${G}-label`,children:t.name}),q("span",{className:`${G}-close`,"data-icon":"close-circle",onClick:()=>o==null?void 0:o(t)})]})},Ct=({column:e,className:t,onRemoveColumn:n,onResize:o,...r})=>{let l=ho(null),{isResizing:s,...i}=de({column:e,onResize:o,rootRef:l}),a=gt(G,t,{vuuPinLeft:e.pin==="left",[`${G}-right`]:e.align==="right",[`${G}-resizing`]:e.resizing,[`${G}-pending`]:e.groupConfirmed===!1}),{columns:m}=e;return q("th",{className:a,ref:l,...r,children:bt("div",{className:`${G}-inner`,children:[m.map(c=>q(yo,{column:c,onRemoveColumn:n},c.key)),e.resizeable!==!1?q(ue,{...i}):null]})})};import{jsx as F,jsxs as Pe}from"react/jsx-runtime";var yt="vuuTable",{RENDER_IDX:Ro}=Mo,vt=({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=ht(g=>{l==null||l(g)},[l]),u=xo(()=>e.filter(To),[e]),f=ht(g=>{var x;let v=g.target.closest(".vuuTable-headerCell"),H=parseInt((x=v==null?void 0:v.dataset.idx)!=null?x:"-1"),P=Do(e,H),h=g.shiftKey;P&&m(P,h)},[e,m]);return Pe("table",{"aria-rowcount":C,className:`${yt}-table`,children:[F("colgroup",{children:u.map((g,p)=>F("col",{width:`${g.width}px`},p))}),Pe("thead",{children:[o.map((g,p)=>F("tr",{className:"vuuTable-heading",children:g.map(({label:v,span:H},P)=>F("th",{colSpan:H,className:"vuuTable-headingCell",children:v},P))},p)),F("tr",{children:u.map((g,p)=>{let v=vo(g);return wo(g)?F(Ct,{column:g,"data-idx":p,onRemoveColumn:i,onResize:r,style:v},p):F(pe,{column:g,"data-idx":p,onClick:f,onDragStart:w,onResize:r,style:v},p)})})]}),Pe("tbody",{onContextMenu:s,children:[n==null?void 0:n.map((g,p)=>F(ce,{columns:t,height:y,index:p,onClick:a,virtualColSpan:d,onToggleGroup:c,row:g},g[Ro])),F("tr",{className:`${yt}-filler`})]})]})};import{useContextMenu as _r}from"@vuu-ui/vuu-popups";import{applySort as Jr,buildColumnMap as Xr,isJsonGroup as Yr,metadataKeys as Qr,moveItem as jr}from"@vuu-ui/vuu-utils";import{useCallback as z,useEffect as jt,useMemo as Zr,useRef as Ge,useState as qr}from"react";import{isVuuFeatureAction as Ho,isVuuFeatureInvocation as Po}from"@vuu-ui/vuu-data";import{getFullRange as Se,metadataKeys as So,WindowRange as Eo}from"@vuu-ui/vuu-utils";import{useCallback as X,useEffect as fe,useMemo as Ao,useRef as ee,useState as Lo}from"react";var{SELECTED:te}=So;function wt({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]=Lo(null),c=ee(!0),d=ee(!1),C=ee({from:0,to:0}),y=ee(null),w=ee([]),u=Ao(()=>new Ee(Se(s)),[]),f=X(h=>{for(let x of h)u.add(x);w.current=u.data,d.current=!0},[u]),g=X(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)):Ho(h)?n==null||n(h):Po(h)?o==null||o(h):console.log(`useDataSource unexpected message ${h.type}`)},[u,n,o,r,l,f]);fe(()=>()=>{y.current&&(cancelAnimationFrame(y.current),y.current=null),c.current=!1},[]);let p=X(()=>{c.current&&(d.current&&(m({}),d.current=!1),y.current=requestAnimationFrame(p))},[m]);fe(()=>{y.current=requestAnimationFrame(p)},[p]);let v=X(h=>{let{from:x}=e.range,A={from:x,to:x+h},k=Se(A,i);e.range=C.current=k,e.emit("range",A),u.setRange(k)},[e,u,i]),H=X(h=>{let x=Se(h,i);e.range=C.current=x,u.setRange(x),e.emit("range",h)},[e,u,i]),P=X(()=>u.getSelectedRows(),[u]);return fe(()=>{e==null||e.subscribe({range:C.current},g)},[e,g,t]),fe(()=>{v(a)},[v,a]),{data:w.current,getSelectedRows:P,range:C.current,setRange:H,dataSource:e}}var Ee=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 Eo(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[te],s=(o=this.data[r-1])==null?void 0:o[te];s===0&&l?this.data[r-1][te]=2:s===2&&!l&&(this.data[r-1][te]=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[te]===1)}};import{useDragDrop as Ko}from"@heswell/salt-lab";import{useCallback as Mt,useLayoutEffect as ko,useRef as zo,useState as No}from"react";var Tt=({onDrop:e,tableContainerRef:t,tableLayout:n})=>{let[o,r]=No(n),l=zo(),s=Mt(()=>{console.log("handleDropSettle"),l.current=void 0,r("row")},[]),{draggable:i,draggedItemIndex:a,onMouseDown:m}=Ko({allowDragDrop:!0,draggableClassName:"table-column",orientation:"horizontal",containerRef:t,itemQuery:".vuuTable-table",onDrop:e,onDropSettle:s}),c=Mt(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 ko(()=>{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}};import{withinRange as Oo}from"@vuu-ui/vuu-utils";import{useCallback as $,useEffect as Bo,useLayoutEffect as Uo,useMemo as _o,useRef as Fe}from"react";function Io(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var Ae="ArrowUp",Le="ArrowDown",Ke="ArrowLeft",ke="ArrowRight";var ze="Home",Ne="End",Ie="PageUp",Ve="PageDown";var Vo=new Set(["Enter","Delete"," "]),Fo=new Set(["Tab"]),$o=new Set(["ArrowRight","ArrowLeft"]),Dt=new Set([ze,Ne,Ie,Ve,Le,Ke,ke,Ae]),Wo=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),xi=Io(Vo,Dt,$o,Wo,Fo);var Go=["Home","End","PageUp","PageDown"],xt=e=>Go.includes(e),Rt=e=>Dt.has(e);var Ht=e=>`thead th:nth-child(${e+1})`,Jo=(e,t)=>`tbody > tr[aria-rowindex='${e}'] > td:nth-child(${t+1})`,Xo=[-1,-1];function Yo(e,[t,n],o,r){return e===Ae?t>-1?[t-1,n]:[t,n]:e===Le?t===-1?[0,n]:t===r-1?[t,n]:[t+1,n]:e===ke?n<o-1?[t,n+1]:[t,n]:e===Ke?n>0?[t,n-1]:[t,n]:[t,n]}var Pt=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:n,data:o,requestScroll:r,rowCount:l=0,viewportRange:s})=>{var k;let{from:i,to:a}=s,m=Fe([-1,-1]),c=Fe(),d=Fe([-1,0]),C=$(([b,M])=>{var R;let D=b===-1?Ht(M):Jo(b,M);return(R=t.current)==null?void 0:R.querySelector(D)},[t]),y=b=>b==null?void 0:b.closest("th,td"),w=b=>{var M,D;if(b.tagName==="TH")return[-1,parseInt((M=b.dataset.idx)!=null?M:"-1",10)];{let R=b.closest("tr");if(R){let N=parseInt((D=R.ariaRowIndex)!=null?D:"-1",10),E=Array.from(R.childNodes).indexOf(b);return[N,E]}}return Xo},u=$(b=>{var M;if(t.current){let D=C(b);D?(D!==c.current&&((M=c.current)==null||M.setAttribute("tabindex",""),c.current=D,D.setAttribute("tabindex","0")),D.focus()):Oo(b[0],s)||(c.current=void 0,r==null||r({type:"scroll-page",direction:"up"}))}},[t,C,r,s]),f=$((b,M,D=!1)=>{let R=[b,M];d.current=R,u(R),D&&(m.current=R)},[u]),g=$(()=>{var b;(b=c.current)==null||b.setAttribute("tabindex",""),c.current=void 0},[]),p=$(async(b,M)=>{switch(b){case Ve:r==null||r({type:"scroll-page",direction:"down"});break;case Ie:r==null||r({type:"scroll-page",direction:"up"});break;case ze:r==null||r({type:"scroll-end",direction:"home"});break;case Ne:r==null||r({type:"scroll-end",direction:"end"});break}return M},[r]),v=$(()=>{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]),H=$(async b=>{let[M,D]=xt(b)?await p(b,d.current):Yo(b,d.current,e,l),[R,N]=d.current;(M!==R||D!==N)&&f(M,D,!0)},[e,p,l,f]),P=$(b=>{o.length>0&&Rt(b.key)&&(b.preventDefault(),b.stopPropagation(),H(b.key))},[o,H]),h=$(b=>{let M=b.target,D=y(M);if(D){let[R,N]=w(D);f(R,N)}},[f]),x=_o(()=>({onClick:h,onFocus:v,onKeyDown:P}),[h,v,P]);Uo(()=>{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 A=((k=t.current)==null?void 0:k.firstChild)!=null;return Bo(()=>{var b;if(A&&c.current===void 0){let M=(b=t.current)==null?void 0:b.querySelector(Ht(0));M&&(M.setAttribute("tabindex","0"),c.current=M)}},[t,A]),x};import{useCallback as Zo,useRef as qo,useState as er}from"react";import{useCallback as Qo,useEffect as St,useRef as jo}from"react";var B=new Map,At=(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}},Et=new ResizeObserver(e=>{for(let t of e){let{target:n,borderBoxSize:o,contentBoxSize:r}=t,l=B.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=At(n,{height:s,width:i,contentHeight:a,contentWidth:m},y);u!==w&&(C=!0,d[y]=u)}C&&c&&c(d)}}});function Lt(e,t,n,o=!1){let r=jo(t),l=Qo(s=>{let{width:i,height:a}=s.getBoundingClientRect(),{clientWidth:m,clientHeight:c}=s;return r.current.reduce((d,C)=>(d[C]=At(s,{width:i,height:a,contentHeight:c,contentWidth:m},C),d),{})},[]);St(()=>{let s=e.current;async function i(){B.set(s,{measurements:{}}),await document.fonts.ready;let a=B.get(s);if(a){let m=l(s);a.measurements=m,Et.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(B.has(s))throw Error("useResizeObserver attemping to observe same element twice");i()}return()=>{s&&B.has(s)&&(Et.unobserve(s),B.delete(s))}},[l,e]),St(()=>{let s=e.current,i=B.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 tr=["clientHeight","clientWidth"],Kt=e=>Number.isFinite(e),kt=({defaultHeight:e=0,defaultWidth:t=0,height:n,width:o})=>{let r=qo(null),[l,s]=er({outer:{height:n!=null?n:"100%",width:o!=null?o:"100%"}}),i=Zo(({clientWidth:a,clientHeight:m})=>{s(c=>{let{inner:d,outer:C}=c;return Kt(m)&&Kt(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 Lt(r,tr,i,!0),{containerRef:r,outerSize:l.outer,innerSize:l.inner}};import{deselectItem as nr,metadataKeys as or,selectItem as rr}from"@vuu-ui/vuu-utils";import{useCallback as sr,useRef as zt}from"react";var{IDX:lr,SELECTED:ir}=or,ar=[],Nt=({selectionModel:e,onSelectionChange:t})=>{let n=zt(-1),o=zt(ar);return sr((l,s,i)=>{let{[lr]:a,[ir]:m}=l,{current:c}=n,{current:d}=o,y=(m?nr:rr)(e,d,a,s,i,c);o.current=y,n.current=a,t&&t(y)},[t,e])};import{moveItem as cr}from"@heswell/salt-lab";import{applyFilterToColumns as ur,applyGroupByToColumns as mr,applySortToColumns as dr,findColumn as pr,getCellRenderer as fr,getColumnName as gr,getTableHeadings as Cr,getValueFormatter as br,isFilteredColumn as hr,isGroupColumn as yr,isPinned as vr,isTypeDescriptor as wr,logger as Mr,metadataKeys as Tr,sortPinnedColumns as It,stripFilterFromColumns as Dr}from"@vuu-ui/vuu-utils";import{useReducer as xr}from"react";var{info:$e}=Mr("useTableModel"),Rr=100,Vt=Tr.count,Hr=({serverDataType:e})=>e===void 0,Pr=e=>{var t,n;if(wr(e.type))return fr((n=(t=e.type)==null?void 0:t.renderer)==null?void 0:n.name)},Sr=(e,t,n)=>{var r;let o=t.indexOf(e.name);return o!==-1&&n[o]?n[o]:(r=e.serverDataType)!=null?r:"string"},Er=["int","long","double"],Ft=e=>e===void 0?void 0:Er.includes(e)?"right":"left",Ar=(e,t)=>{switch($e==null||$e(`GridModelReducer ${t.type}`),t.type){case"init":return Wt(t);case"moveColumn":return Kr(e,t);case"resizeColumn":return Nr(e,t);case"setTypes":return Ir(e,t);case"hideColumns":return kr(e,t);case"showColumns":return zr(e,t);case"pinColumn":return Vr(e,t);case"updateColumnProp":return ne(e,t);case"tableConfig":return Ot(e,t);default:return console.log(`unhandled action ${t.type}`),e}},$t=(e,t)=>{let[n,o]=xr(Ar,{tableConfig:e,dataSourceConfig:t},Wt);return{columns:n.columns,dispatchColumnAction:o,headings:n.headings}};function Wt({dataSourceConfig:e,tableConfig:t}){let n=t.columns.map(Gt(t)),o=n.some(vr)?It(n):n,r={columns:o,headings:Cr(o)};if(e){let{columns:l,...s}=e;return Ot(r,{type:"tableConfig",...s})}else return r}var Lr=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,Gt=e=>(t,n)=>{let{columnDefaultWidth:o=Rr,columnFormatHeader:r}=e,{align:l=Ft(t.serverDataType),key:s,name:i,label:a=i,width:m=o,...c}=t,d={...c,align:l,CellRenderer:Pr(t),label:Lr(a,r),key:s!=null?s:n+Vt,name:i,originalIdx:n,valueFormatter:br(t),width:m};return yr(d)&&(d.columns=d.columns.map(C=>Gt(e)(C,C.key))),d};function Kr(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:cr(r,l,o)}}return e}function kr(e,{columns:t}){return t.some(n=>n.hidden!==!0)?t.reduce((n,o)=>o.hidden!==!0?ne(n,{type:"updateColumnProp",column:o,hidden:!0}):n,e):e}function zr(e,{columns:t}){return t.some(n=>n.hidden)?t.reduce((n,o)=>o.hidden?ne(n,{type:"updateColumnProp",column:o,hidden:!1}):n,e):e}function Nr(e,{column:t,phase:n,width:o}){let r="updateColumnProp",l=n!=="end";switch(n){case"begin":case"end":return ne(e,{type:r,column:t,resizing:l});case"resize":return ne(e,{type:r,column:t,width:o});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${n}`)}}function Ir(e,{columnNames:t,serverDataTypes:n}){let{columns:o}=e;if(o.some(Hr)){let r=o.map(l=>{var i;let s=Sr(l,t,n);return{...l,align:(i=l.align)!=null?i:Ft(s),serverDataType:s}});return{...e,columns:r}}else return e}function Vr(e,t){let{columns:n}=e,{column:o,pin:r}=t,l=n.find(s=>s.name===o.name);return l?(n=Y(n,{...l,pin:r}),n=It(n),{...e,columns:n}):e}function ne(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=Y(n,{...m,align:o})),typeof s=="string"&&(n=Y(n,{...m,label:s})),typeof i=="boolean"&&(n=Y(n,{...m,resizing:i})),typeof l=="boolean"&&(n=Y(n,{...m,hidden:l})),typeof a=="number"&&(n=Y(n,{...m,width:a}))),{...e,columns:n}}function Ot(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=gr(d),w=C+Vt,u=pr(c.columns,y);if(u)return u.key===w?u:{...u,key:w};throw Error(`useTableModel column ${d} not found`)})}),i&&(c={...e,columns:mr(c.columns,r,n)}),m&&(c={...e,columns:dr(c.columns,l)}),a?c={...e,columns:ur(c.columns,o)}:c.columns.some(hr)&&(c={...e,columns:Dr(c.columns)}),c}function Y(e,t){return e.map(n=>n.name===t.name?t:n)}import{useCallback as oe,useRef as re}from"react";var Bt=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]},Fr=e=>{let{clientHeight:t,clientWidth:n,scrollHeight:o,scrollWidth:r}=e;return[r-n,o-t]},Ut=({onHorizontalScroll:e,onVerticalScroll:t,viewport:n})=>{let o=re({scrollTop:0,scrollLeft:0}),r=re(null),l=re(null),s=re(null),i=re(!1),{maxScrollContainerScrollHorizontal:a,maxScrollContainerScrollVertical:m}=n,c=oe((u,f)=>{let{current:g}=s;g&&g.scrollTo({top:f,left:u,behavior:"auto"})},[s]),d=oe(()=>{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=oe(()=>{let{current:u}=l,{current:f}=r;if(u&&f){let[g,p,v,H]=Bt(u);i.current=!0,f.scrollLeft=Math.round(g*a),f.scrollTop=Math.round(p*m),c(v,H)}},[a,m,l,r,c]),y=oe(()=>{let{current:u}=l,{current:f}=r,{current:g}=i;if(g)i.current=!1;else if(u&&f){let[p,v]=Bt(f),[H,P]=Fr(u),h=Math.round(p*H),x=Math.round(v*P);u.scrollTo({left:h,top:x,behavior:"auto"}),c(h,x)}},[l,r,c]),w=oe(u=>{let{current:f}=r;if(f){if(i.current=!1,u.type==="scroll-page"){let{clientHeight:g,scrollLeft:p,scrollTop:v}=f,{direction:H}=u,P=H==="down"?g:-g,h=Math.min(Math.max(0,v+P),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}};import{useMemo as _t}from"react";var $r={fillerHeight:0,maxScrollContainerScrollHorizontal:0,maxScrollContainerScrollVertical:0,pinnedWidthLeft:0,pinnedWidthRight:0,rowCount:0,scrollContentHeight:0,scrollbarSize:0,scrollContentWidth:0,totalHeaderHeight:0},Wr=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}},Jt=({columns:e,headerHeight:t,headings:n,rowCount:o,rowHeight:r,size:l})=>{let{pinnedWidthLeft:s,pinnedWidthRight:i,unpinnedWidth:a}=_t(()=>Wr(e),[e]);return _t(()=>{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 $r},[t,n.length,s,i,o,r,l,a])};import{getColumnsInViewport as Xt,itemsChanged as Gr}from"@vuu-ui/vuu-utils";import{useCallback as Yt,useEffect as Or,useMemo as Br,useRef as We,useState as Ur}from"react";var Qt=({columns:e,rowHeight:t,setRange:n,viewportMeasurements:o})=>{let r=We(-1),{rowCount:l,scrollContentWidth:s,maxScrollContainerScrollHorizontal:i}=o,a=s-i,m=We(0),[c,d]=Br(()=>Xt(e,m.current,m.current+a),[a,e]),C=We(d);Or(()=>{w(c)},[c]);let[y,w]=Ur(c),u=Yt(g=>{m.current=g;let[p,v]=Xt(e,g,g+a);Gr(y,p)&&(C.current=v,w(p))},[a,e,y]),f=Yt(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 es=[],{KEY:ts,IS_EXPANDED:Zt,IS_LEAF:qt}=Qr,en=({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 _e,Je;let[C,y]=qr(0),w=Ge(!1),u=Ge();if(u.current=t,t===void 0)throw Error("no data source provided to DataTable");let f=kt(d),g=z(T=>{y(T)},[]),{columns:p,dispatchColumnAction:v,headings:H}=$t(e,t.config),P=z(T=>{w.current=!0,v(T)},[v]),h=ft({dataSource:t,onPersistentColumnOperation:P}),x=Jt({columns:p,headerHeight:n,headings:H,rowCount:C,rowHeight:a,size:f.innerSize}),A=z(T=>{if(T.tableMeta){let{columns:S,dataTypes:K}=T.tableMeta;w.current=!0,v({type:"setTypes",columnNames:S,serverDataTypes:K})}},[v]),k=z(T=>{t.select(T),s==null||s(T)},[t,s]),b=Nt({onSelectionChange:k,selectionModel:m}),{data:M,getSelectedRows:D,range:R,setRange:N}=wt({dataSource:t,onFeatureEnabled:r,onFeatureInvocation:l,onSubscribed:A,onSizeChange:g,renderBufferSize:i,viewportRowCount:x.rowCount}),E=Ge();E.current=M;let le=z((T,S=!1,K)=>{t&&(t.sort=Jr(t.sort,T,S,K))},[t]),ge=z((T,S,K)=>{let L=p.find(I=>I.name===S);if(L)T==="end"&&(w.current=!0),v({type:"resizeColumn",phase:T,column:L,width:K});else throw Error(`useDataTable.handleColumnResize, column ${S} not found`)},[p,v]),Ce=z((T,S)=>{let K=Yr(S,T),L=T[ts];if(T[Zt]){if(t.closeTreeNode(L,!0),K){let I=p.indexOf(S);t.getRowsAtDepth(I+1).some(V=>V[Zt]||V[qt])||v({type:"hideColumns",columns:p.slice(I+2)})}}else if(t.openTreeNode(L),K){let I=t.getChildRows(L),O=p.indexOf(S)+1,V=[p[O]];I.some(_=>_[qt])&&V.push(p[O+1]),V.some(_=>_.hidden)&&v({type:"showColumns",columns:V})}},[p,t,v]),{onVerticalScroll:be,onHorizontalScroll:he,columnsWithinViewport:nn,virtualColSpan:on}=Qt({columns:p,rowHeight:a,setRange:N,viewportMeasurements:x}),{requestScroll:rn,...Be}=Ut({onHorizontalScroll:he,onVerticalScroll:be,viewport:x,viewportHeight:((Je=(_e=f.innerSize)==null?void 0:_e.height)!=null?Je:0)-n}),sn=Pt({columnCount:p.length,containerRef:f.containerRef,data:M,requestScroll:rn,rowCount:t==null?void 0:t.size,viewportRange:R}),ln=z(T=>{t&&t.groupBy.includes(T.name)&&(t.groupBy=t.groupBy.filter(S=>S!==T.name))},[t]),an=z((T,S)=>{let K=t.columns[T],L=jr(t.columns,K,S);L!==t.columns&&(t.columns=L,v({type:"tableConfig",columns:L}))},[t,v]),cn=Tt({onDrop:an,tableContainerRef:Be.tableContainerRef,tableLayout:c});jt(()=>{u.current&&(w.current=!0,v({type:"init",tableConfig:e,dataSourceConfig:u.current.config}))},[e,v]),jt(()=>{t.on("config",(T,S)=>{w.current=!0,v({type:"tableConfig",...T,confirmed:S})})},[t,v]),Zr(()=>{w.current&&(o==null||o({...e,columns:p}),w.current=!1)},[p,e,o]);let Ue=_r(),un=z(T=>{var V;let{current:S}=E,{current:K}=u,L=T.target,I=L==null?void 0:L.closest("td"),O=L==null?void 0:L.closest("tr");if(I&&O&&S&&K){let{columns:_,selectedRowsCount:mn}=K,dn=Xr(_),pn=parseInt((V=O.ariaRowIndex)!=null?V:"-1"),fn=Array.from(O.childNodes).indexOf(I),gn=S.find(([bn])=>bn===pn),Cn=_[fn];Ue(T,"grid",{columnMap:dn,columnName:Cn,row:gn,selectedRows:mn===0?es:D(),viewport:t==null?void 0:t.viewport})}},[t==null?void 0:t.viewport,D,Ue]);return{containerMeasurements:f,containerProps:sn,columns:p,columnsWithinViewport:nn,data:M,dispatchColumnAction:v,handleContextMenuAction:h,headings:H,onColumnResize:ge,onContextMenu:un,onRemoveColumnFromGroupBy:ln,onRowClick:b,onSort:le,onToggleGroup:Ce,virtualColSpan:on,scrollProps:Be,rowCount:C,viewportMeasurements:x,...cn}};import ss from"classnames";import{isDataLoading as ls}from"@vuu-ui/vuu-utils";import{jsx as U,jsxs as tn}from"react/jsx-runtime";var W="vuuTable",Ka=({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 H=rs(s),{containerMeasurements:{containerRef:P,innerSize:h,outerSize:x},containerProps:A,dispatchColumnAction:k,draggable:b,draggedItemIndex:M,handleContextMenuAction:D,scrollProps:R,tableLayout:N,viewportMeasurements:E,...le}=en({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}),ge={...x,"--content-height":`${E.scrollContentHeight}px`,"--content-width":`${E.scrollContentWidth}px`,"--filler-height":`${E.fillerHeight}px`,"--pinned-width-left":`${E.pinnedWidthLeft}px`,"--pinned-width-right":`${E.pinnedWidthRight}px`,"--header-height":`${r}px`,"--row-height":`${y}px`,"--scrollbar-size":`${E.scrollbarSize}px`,"--table-height":`${h==null?void 0:h.height}px`,"--table-width":`${h==null?void 0:h.width}px`,"--total-header-height":`${E==null?void 0:E.totalHeaderHeight}px`},Ce={left:E.pinnedWidthLeft-1,top:(E==null?void 0:E.totalHeaderHeight)-1},be=N==="column"?ct:vt,he=ss(W,t,{[`${W}-zebra`]:p,[`${W}-loading`]:ls(le.columns)});return U(ns,{menuActionHandler:D,menuBuilder:ut(o),children:tn("div",{...A,className:he,id:H,ref:P,style:ge,tabIndex:-1,children:[h?U("div",{className:`${W}-scrollbarContainer`,onScroll:R.onScrollbarContainerScroll,ref:R.scrollbarContainerRef,style:Ce,children:U("div",{className:`${W}-scrollContent`})}):null,h?tn("div",{className:`${W}-contentContainer`,onScroll:R.onContentContainerScroll,ref:R.contentContainerRef,...v,children:[U("div",{className:`${W}-scrollContent`}),U("div",{className:`${W}-tableContainer`,onScroll:R.onTableContainerScroll,ref:R.tableContainerRef,children:U(be,{...le,headerHeight:r,rowHeight:y})}),b]}):null,e&&h?U(os,{className:`${W}-settings`,"data-icon":"settings",onClick:d,variant:"secondary"}):null]})})};import is from"classnames";import{isJsonAttribute as as,metadataKeys as cs,registerComponent as us}from"@vuu-ui/vuu-utils";import{jsx as Oe,jsxs as gs}from"react/jsx-runtime";var se="vuuJsonCell",{IS_EXPANDED:ms,KEY:ds}=cs,ps=e=>{let t=e.lastIndexOf("|");return t===-1?"":e.slice(t+1)},fs=({column:e,row:t})=>{let{key:n}=e,o=t[n],r=!1;as(o)&&(o=o.slice(0,-1),r=!0);let l=ps(t[ds]),s=is({[`${se}-name`]:l===o,[`${se}-value`]:l!==o,[`${se}-group`]:r});if(r){let i=t[ms]?"minus-box":"plus-box";return gs("span",{className:s,children:[Oe("span",{className:`${se}-value`,children:o}),Oe("span",{className:`${se}-toggle`,"data-icon":i})]})}else return o?Oe("span",{className:s,children:o}):null};us("json",fs,"cell-renderer",{});export{Ka as Table,kt as useMeasuredContainer};
+// src/Table.tsx
+import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
+import { Button, useIdMemo } from "@salt-ds/core";
+
+// src/ColumnBasedTable.tsx
+import { metadataKeys as metadataKeys4 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback8 } from "react";
+import cx6 from "classnames";
+
+// src/TableRow.tsx
+import {
+  isGroupColumn,
+  isJsonColumn,
+  isJsonGroup,
+  metadataKeys as metadataKeys3,
+  notHidden
+} from "@vuu-ui/vuu-utils";
+import cx2 from "classnames";
+import { memo as memo2, useCallback as useCallback3 } from "react";
+
+// src/TableCell.tsx
+import { getColumnPinStyle, metadataKeys } from "@vuu-ui/vuu-utils";
+import { EditableLabel } from "@heswell/salt-lab";
+import cx from "classnames";
+import { memo, useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var { KEY } = metadataKeys;
+var TableCell = memo(
+  ({ className: classNameProp, column, onClick, row }) => {
+    const labelFieldRef = useRef(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = useState(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = 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 = 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 = cx(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const pinnedStyle = getColumnPinStyle(column);
+    return editable ? /* @__PURE__ */ jsx(
+      "td",
+      {
+        className,
+        "data-editable": true,
+        style: pinnedStyle,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ jsx(
+          EditableLabel,
+          {
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
+          },
+          "title"
+        )
+      }
+    ) : /* @__PURE__ */ jsx("td", { className, style: pinnedStyle, onClick: handleClick, children: CellRenderer ? /* @__PURE__ */ jsx(CellRenderer, { column, 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
+import { metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var { DEPTH, IS_LEAF } = metadataKeys2;
+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 column = columns[depth - 1];
+    return [row[column.key], depth - 1];
+  }
+};
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const handleClick = useCallback2(() => {
+    onClick == null ? void 0 : onClick(column);
+  }, [column, onClick]);
+  const style = {
+    left: column.pin == "left" ? column.pinnedOffset : void 0
+  };
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      style,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx2("span", { children: value })
+      ]
+    }
+  );
+};
+
+// src/TableRow.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var { IDX, IS_EXPANDED, SELECTED } = metadataKeys3;
+var classBase = "vuuTableRow";
+var TableRow = memo2(function Row({
+  columns,
+  height,
+  index,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = cx2(classBase, {
+    [`${classBase}-even`]: rowIndex % 2 === 0,
+    [`${classBase}-expanded`]: isExpanded,
+    [`${classBase}-preSelected`]: isSelected === 2
+  });
+  const offset = rowIndex - index;
+  const handleRowClick = useCallback3(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+    },
+    [onClick, row]
+  );
+  const handleGroupCellClick = useCallback3(
+    (column) => {
+      if (isGroupColumn(column) || isJsonGroup(column, row)) {
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
+    },
+    [onToggleGroup, row]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "tr",
+    {
+      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-rowindex": rowIndex,
+      className,
+      onClick: handleRowClick,
+      style: {
+        transform: `translate(0px, ${offset * height}px)`
+      },
+      children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ jsx3("td", { colSpan: virtualColSpan }) : null,
+        columns.filter(notHidden).map((column) => {
+          const isGroup = isGroupColumn(column);
+          const isJsonCell = isJsonColumn(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ jsx3(
+            Cell,
+            {
+              column,
+              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+              row
+            },
+            column.name
+          );
+        })
+      ]
+    }
+  );
+});
+
+// src/TableHeaderCell.tsx
+import cx5 from "classnames";
+import { useCallback as useCallback7, useRef as useRef4 } from "react";
+
+// src/ColumnResizer.tsx
+import { useCallback as useCallback4, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizer";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = useRef2(0);
+  const onMouseMove = useCallback4(
+    (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 = useCallback4(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = useCallback4(
+    (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__ */ jsx4("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
+
+// src/SortIndicator.tsx
+import cx3 from "classnames";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase2 = "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__ */ jsxs3("div", { className: cx3(classBase2, "multi-col", direction), children: [
+    /* @__PURE__ */ jsx5("span", { "data-icon": `sorted-${direction}` }),
+    /* @__PURE__ */ jsx5("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
+  ] }) : /* @__PURE__ */ jsx5("div", { className: cx3(classBase2, "single-col"), children: /* @__PURE__ */ jsx5("span", { "data-icon": `sorted-${direction}` }) });
+};
+
+// src/useTableColumnResize.tsx
+import { useCallback as useCallback5, useRef as useRef3 } from "react";
+var useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = useRef3(0);
+  const isResizing = useRef3(false);
+  const { name } = column;
+  const handleResizeStart = useCallback5(() => {
+    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 = useCallback5(
+    (_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 = useCallback5(() => {
+    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/TableHeaderCell.tsx
+import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
+
+// src/filter-indicator.tsx
+import { useContextMenu } from "@vuu-ui/vuu-popups";
+import cx4 from "classnames";
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FilterIndicator = ({ column, filter }) => {
+  const showContextMenu = useContextMenu();
+  const handleClick = useCallback6(
+    (evt) => {
+      evt.stopPropagation();
+      showContextMenu(evt, "filter", { column, filter });
+    },
+    [column, filter, showContextMenu]
+  );
+  if (!column.filter) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cx4("vuuFilterIndicator"),
+      "data-icon": "filter",
+      onClick: handleClick
+    }
+  );
+};
+
+// src/TableHeaderCell.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var classBase3 = "vuuTable-headerCell";
+var TableHeaderCell = ({
+  column,
+  className: classNameProp,
+  onClick,
+  onDragStart,
+  onResize,
+  ...props
+}) => {
+  const rootRef = useRef4(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const showContextMenu = useContextMenu2();
+  const dragTimerRef = useRef4(null);
+  const handleContextMenu = (e) => {
+    showContextMenu(e, "header", { column });
+  };
+  const handleClick = useCallback7(
+    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
+    [isResizing, onClick]
+  );
+  const handleMouseDown = useCallback7(
+    (evt) => {
+      dragTimerRef.current = window.setTimeout(() => {
+        onDragStart == null ? void 0 : onDragStart(evt);
+        dragTimerRef.current = null;
+      }, 250);
+    },
+    [onDragStart]
+  );
+  const handleMouseUp = useCallback7(() => {
+    if (dragTimerRef.current !== null) {
+      window.clearTimeout(dragTimerRef.current);
+      dragTimerRef.current = null;
+    }
+  }, []);
+  const className = cx5(classBase3, classNameProp, {
+    vuuPinFloating: column.pin === "floating",
+    vuuPinLeft: column.pin === "left",
+    vuuPinRight: column.pin === "right",
+    vuuEndPin: column.endPin,
+    [`${classBase3}-resizing`]: column.resizing,
+    [`${classBase3}-right`]: column.align === "right"
+  });
+  return /* @__PURE__ */ jsx7(
+    "th",
+    {
+      className,
+      ...props,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ref: rootRef,
+      children: /* @__PURE__ */ jsxs4("div", { className: `${classBase3}-inner`, children: [
+        /* @__PURE__ */ jsx7(FilterIndicator, { column }),
+        /* @__PURE__ */ jsx7("div", { className: `${classBase3}-label`, children: column.label }),
+        /* @__PURE__ */ jsx7(SortIndicator, { sorted: column.sorted }),
+        column.resizeable !== false ? /* @__PURE__ */ jsx7(ColumnResizer, { ...resizeProps }) : null
+      ] })
+    }
+  );
+};
+
+// src/ColumnBasedTable.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase4 = "vuuTable";
+var { RENDER_IDX } = metadataKeys4;
+var ColumnBasedTable = ({
+  columns,
+  data,
+  headerHeight,
+  onHeaderCellDragEnd,
+  rowHeight
+}) => {
+  const handleDragEnd = useCallback8(() => {
+    onHeaderCellDragEnd == null ? void 0 : onHeaderCellDragEnd();
+  }, [onHeaderCellDragEnd]);
+  console.log(`ColumnBasedTable render`);
+  return /* @__PURE__ */ jsx8(Fragment, { children: columns.map((column, i) => /* @__PURE__ */ jsx8(
+    "table",
+    {
+      className: cx6(`${classBase4}-table`, `${classBase4}-columnBased`, {
+        vuuPinLeft: column.pin === "left"
+      }),
+      "data-idx": i,
+      id: `col-${i}`,
+      style: {
+        width: column.width,
+        left: column.pinnedOffset,
+        "--vuuTableHeaderHeight": `${headerHeight}px`,
+        "--row-height": `${rowHeight}px`
+      },
+      children: /* @__PURE__ */ jsxs5("tbody", { children: [
+        /* @__PURE__ */ jsx8("tr", { children: /* @__PURE__ */ jsx8(
+          TableHeaderCell,
+          {
+            column,
+            "data-idx": i,
+            onDragEnd: handleDragEnd
+          },
+          i
+        ) }, "header"),
+        data.map((row, j) => /* @__PURE__ */ jsx8(
+          TableRow,
+          {
+            columns: [column],
+            height: rowHeight,
+            index: j,
+            row
+          },
+          row[RENDER_IDX]
+        )),
+        /* @__PURE__ */ jsx8("tr", { className: "vuuTable-filler" })
+      ] })
+    },
+    column.name
+  )) });
+};
+
+// src/context-menu/buildContextMenuDescriptors.ts
+import { isNumericColumn } from "@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(
+        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
+import { removeColumnFromFilter } from "@vuu-ui/vuu-filters";
+import {
+  addGroupColumn,
+  addSortColumn,
+  AggregationType,
+  setAggregations,
+  setSortColumn
+} from "@vuu-ui/vuu-utils";
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = removeColumnFromFilter(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
+var { Average, Count, High, Low, Sum } = AggregationType;
+var useContextMenu3 = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (type, options) => {
+    const gridOptions = options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (type) {
+        case "sort-asc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = 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 = setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-sum":
+          return dataSource.aggregations = 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
+import {
+  getColumnPinStyle as getColumnPinStyle2,
+  isGroupColumn as isGroupColumn2,
+  metadataKeys as metadataKeys5,
+  notHidden as notHidden2,
+  visibleColumnAtIndex
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback9, useMemo } from "react";
+
+// src/TableGroupHeaderCell.tsx
+import cx7 from "classnames";
+import { useRef as useRef5 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase5 = "vuuTable-groupHeaderCell";
+var ColHeader = (props) => {
+  const { column, className, onRemoveColumn } = props;
+  return /* @__PURE__ */ jsxs6("div", { className: cx7(`${classBase5}-col`, className), role: "columnheader", children: [
+    /* @__PURE__ */ jsx9("span", { className: `${classBase5}-label`, children: column.name }),
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        className: `${classBase5}-close`,
+        "data-icon": "close-circle",
+        onClick: () => onRemoveColumn == null ? void 0 : onRemoveColumn(column)
+      }
+    )
+  ] });
+};
+var TableGroupHeaderCell = ({
+  column: groupColumn,
+  className: classNameProp,
+  onRemoveColumn,
+  onResize,
+  ...props
+}) => {
+  const rootRef = useRef5(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const className = cx7(classBase5, classNameProp, {
+    vuuPinLeft: groupColumn.pin === "left",
+    [`${classBase5}-right`]: groupColumn.align === "right",
+    [`${classBase5}-resizing`]: groupColumn.resizing,
+    [`${classBase5}-pending`]: groupColumn.groupConfirmed === false
+  });
+  const { columns } = groupColumn;
+  return /* @__PURE__ */ jsx9("th", { className, ref: rootRef, ...props, children: /* @__PURE__ */ jsxs6("div", { className: `${classBase5}-inner`, children: [
+    columns.map((column) => /* @__PURE__ */ jsx9(
+      ColHeader,
+      {
+        column,
+        onRemoveColumn
+      },
+      column.key
+    )),
+    groupColumn.resizeable !== false ? /* @__PURE__ */ jsx9(ColumnResizer, { ...resizeProps }) : null
+  ] }) });
+};
+
+// src/RowBasedTable.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase6 = "vuuTable";
+var { RENDER_IDX: RENDER_IDX2 } = metadataKeys5;
+var RowBasedTable = ({
+  columns,
+  columnsWithinViewport,
+  data,
+  headings,
+  onColumnResize,
+  onHeaderCellDragStart,
+  onContextMenu,
+  onRemoveColumnFromGroupBy,
+  onRowClick,
+  onSort,
+  onToggleGroup,
+  virtualColSpan = 0,
+  rowCount,
+  rowHeight
+}) => {
+  const handleDragStart = useCallback9(
+    (evt) => {
+      onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
+    },
+    [onHeaderCellDragStart]
+  );
+  const visibleColumns = useMemo(() => {
+    return columns.filter(notHidden2);
+  }, [columns]);
+  const handleHeaderClick = useCallback9(
+    (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 = visibleColumnAtIndex(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSort(column, isAdditive);
+    },
+    [columns, onSort]
+  );
+  return /* @__PURE__ */ jsxs7("table", { "aria-rowcount": rowCount, className: `${classBase6}-table`, children: [
+    /* @__PURE__ */ jsx10("colgroup", { children: visibleColumns.map((column, i) => /* @__PURE__ */ jsx10("col", { width: `${column.width}px` }, i)) }),
+    /* @__PURE__ */ jsxs7("thead", { children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ jsx10("tr", { className: "vuuTable-heading", children: colHeaders.map(({ label, span }, j) => /* @__PURE__ */ jsx10("th", { colSpan: span, className: "vuuTable-headingCell", children: label }, j)) }, i)),
+      /* @__PURE__ */ jsx10("tr", { children: visibleColumns.map((column, i) => {
+        const style = getColumnPinStyle2(column);
+        return isGroupColumn2(column) ? /* @__PURE__ */ jsx10(
+          TableGroupHeaderCell,
+          {
+            column,
+            "data-idx": i,
+            onRemoveColumn: onRemoveColumnFromGroupBy,
+            onResize: onColumnResize,
+            style
+          },
+          i
+        ) : /* @__PURE__ */ jsx10(
+          TableHeaderCell,
+          {
+            column,
+            "data-idx": i,
+            onClick: handleHeaderClick,
+            onDragStart: handleDragStart,
+            onResize: onColumnResize,
+            style
+          },
+          i
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs7("tbody", { onContextMenu, children: [
+      data == null ? void 0 : data.map((row, i) => /* @__PURE__ */ jsx10(
+        TableRow,
+        {
+          columns: columnsWithinViewport,
+          height: rowHeight,
+          index: i,
+          onClick: onRowClick,
+          virtualColSpan,
+          onToggleGroup,
+          row
+        },
+        row[RENDER_IDX2]
+      )),
+      /* @__PURE__ */ jsx10("tr", { className: `${classBase6}-filler` })
+    ] })
+  ] });
+};
+
+// src/useDataTable.ts
+import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
+import {
+  applySort,
+  buildColumnMap,
+  isJsonGroup as isJsonGroup2,
+  metadataKeys as metadataKeys9,
+  moveItem as moveItem2
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback18,
+  useEffect as useEffect5,
+  useMemo as useMemo6,
+  useRef as useRef14,
+  useState as useState6
+} from "react";
+
+// src/useDataSource.ts
+import {
+  isVuuFeatureAction,
+  isVuuFeatureInvocation
+} from "@vuu-ui/vuu-data";
+import { getFullRange, metadataKeys as metadataKeys6, WindowRange } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback10, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState2 } from "react";
+var { SELECTED: SELECTED2 } = metadataKeys6;
+function useDataSource({
+  dataSource,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = { from: 0, to: 0 },
+  renderBufferSize = 0,
+  viewportRowCount
+}) {
+  const [, forceUpdate] = useState2(null);
+  const isMounted = useRef6(true);
+  const hasUpdated = useRef6(false);
+  const rangeRef = useRef6({ from: 0, to: 0 });
+  const rafHandle = useRef6(null);
+  const data = useRef6([]);
+  const dataWindow = useMemo2(
+    () => new MovingWindow(getFullRange(range)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = useCallback10(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      hasUpdated.current = true;
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = useCallback10(
+    (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 (isVuuFeatureAction(message)) {
+        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
+      } else if (isVuuFeatureInvocation(message)) {
+        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
+      } else {
+        console.log(`useDataSource unexpected message ${message.type}`);
+      }
+    },
+    [
+      dataWindow,
+      onFeatureEnabled,
+      onFeatureInvocation,
+      onSizeChange,
+      onSubscribed,
+      setData
+    ]
+  );
+  useEffect(
+    () => () => {
+      if (rafHandle.current) {
+        cancelAnimationFrame(rafHandle.current);
+        rafHandle.current = null;
+      }
+      isMounted.current = false;
+    },
+    []
+  );
+  const refreshIfUpdated = useCallback10(() => {
+    if (isMounted.current) {
+      if (hasUpdated.current) {
+        forceUpdate({});
+        hasUpdated.current = false;
+      }
+      rafHandle.current = requestAnimationFrame(refreshIfUpdated);
+    }
+  }, [forceUpdate]);
+  useEffect(() => {
+    rafHandle.current = requestAnimationFrame(refreshIfUpdated);
+  }, [refreshIfUpdated]);
+  const adjustRange = useCallback10(
+    (rowCount) => {
+      const { from } = dataSource.range;
+      const rowRange = { from, to: from + rowCount };
+      const fullRange = getFullRange(rowRange, renderBufferSize);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", rowRange);
+      dataWindow.setRange(fullRange);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  const setRange = useCallback10(
+    (range2) => {
+      const fullRange = getFullRange(range2, renderBufferSize);
+      dataSource.range = rangeRef.current = fullRange;
+      dataWindow.setRange(fullRange);
+      dataSource.emit("range", range2);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  const getSelectedRows = useCallback10(() => {
+    return dataWindow.getSelectedRows();
+  }, [dataWindow]);
+  useEffect(() => {
+    dataSource == null ? void 0 : dataSource.subscribe(
+      {
+        range: rangeRef.current
+      },
+      datasourceMessageHandler
+    );
+  }, [dataSource, datasourceMessageHandler, onConfigChange]);
+  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 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(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
+import { useDragDrop } from "@heswell/salt-lab";
+import {
+  useCallback as useCallback11,
+  useLayoutEffect,
+  useRef as useRef7,
+  useState as useState3
+} from "react";
+var useDraggableColumn = ({
+  onDrop,
+  tableContainerRef,
+  tableLayout: tableLayoutProp
+}) => {
+  const [tableLayout, setTableLayout] = useState3(tableLayoutProp);
+  const mousePosRef = useRef7();
+  const handleDropSettle = useCallback11(() => {
+    console.log(`handleDropSettle`);
+    mousePosRef.current = void 0;
+    setTableLayout("row");
+  }, []);
+  const { draggable, draggedItemIndex, onMouseDown } = useDragDrop({
+    allowDragDrop: true,
+    draggableClassName: "table-column",
+    orientation: "horizontal",
+    containerRef: tableContainerRef,
+    itemQuery: ".vuuTable-table",
+    onDrop,
+    onDropSettle: handleDropSettle
+  });
+  const handleHeaderCellDragStart = useCallback11((evt) => {
+    const { clientX, clientY } = evt;
+    console.log(
+      `useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable`
+    );
+    const sourceElement = evt.target;
+    const thElement = sourceElement.closest(".vuuTable-headerCell");
+    const {
+      dataset: { idx = "-1" }
+    } = thElement;
+    mousePosRef.current = {
+      clientX,
+      clientY,
+      idx
+    };
+    setTableLayout("column");
+  }, []);
+  useLayoutEffect(() => {
+    var _a;
+    if (tableLayout === "column" && mousePosRef.current && !draggable) {
+      const { clientX, clientY, idx } = mousePosRef.current;
+      const target = (_a = tableContainerRef.current) == null ? void 0 : _a.querySelector(
+        `.vuuTable-table[data-idx="${idx}"]`
+      );
+      if (target) {
+        const evt = {
+          persist: () => void 0,
+          nativeEvent: {
+            clientX,
+            clientY,
+            target
+          }
+        };
+        onMouseDown == null ? void 0 : onMouseDown(evt);
+      }
+    }
+  }, [draggable, onMouseDown, tableContainerRef, tableLayout]);
+  return {
+    draggable,
+    draggedItemIndex,
+    tableLayout,
+    onHeaderCellDragStart: tableLayout === "row" ? handleHeaderCellDragStart : void 0
+  };
+};
+
+// src/useKeyboardNavigation.ts
+import { withinRange } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback12,
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
+  useRef as useRef8
+} from "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) => `thead th:nth-child(${colIdx + 1})`;
+var dataCellQuery = (rowIdx, colIdx) => `tbody > tr[aria-rowindex='${rowIdx}'] > td: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 = useRef8([-1, -1]);
+  const focusableCell = useRef8();
+  const activeCellPos = useRef8([-1, 0]);
+  const getTableCell = useCallback12(
+    ([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("th,td");
+  const getTableCellPos = (tableCell) => {
+    var _a2, _b;
+    if (tableCell.tagName === "TH") {
+      const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
+      return [-1, colIdx];
+    } else {
+      const focusedRow = tableCell.closest("tr");
+      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 = useCallback12(
+    (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 (!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 = useCallback12(
+    (rowIdx, colIdx, fromKeyboard = false) => {
+      const pos = [rowIdx, colIdx];
+      activeCellPos.current = pos;
+      focusCell(pos);
+      if (fromKeyboard) {
+        focusedCellPos.current = pos;
+      }
+    },
+    [focusCell]
+  );
+  const virtualizeActiveCell = useCallback12(() => {
+    var _a2;
+    (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
+    focusableCell.current = void 0;
+  }, []);
+  const nextPageItemIdx = useCallback12(
+    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 = useCallback12(() => {
+    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 = useCallback12(
+    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 = useCallback12(
+    (e) => {
+      if (data.length > 0 && isNavigationKey(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        void navigateChildItems(e.key);
+      }
+    },
+    [data, navigateChildItems]
+  );
+  const handleClick = useCallback12(
+    // 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 = useMemo3(() => {
+    return {
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    };
+  }, [handleClick, handleFocus, handleKeyDown]);
+  useLayoutEffect2(() => {
+    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;
+  useEffect2(() => {
+    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
+import { useCallback as useCallback14, useRef as useRef10, useState as useState4 } from "react";
+
+// src/useResizeObserver.ts
+import { useCallback as useCallback13, useEffect as useEffect3, useRef as useRef9 } from "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 = useRef9(dimensions);
+  const measure = useCallback13((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;
+      },
+      {}
+    );
+  }, []);
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    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 = useRef10(null);
+  const [size, setSize] = useState4({
+    outer: {
+      height: height != null ? height : "100%",
+      width: width != null ? width : "100%"
+    }
+  });
+  const onResize = useCallback14(
+    ({ clientWidth, 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
+import { deselectItem, metadataKeys as metadataKeys7, selectItem } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback15, useRef as useRef11 } from "react";
+var { IDX: IDX2, SELECTED: SELECTED3 } = metadataKeys7;
+var NO_SELECTION = [];
+var useSelection = ({
+  selectionModel,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = useRef11(-1);
+  const selectedRef = useRef11(NO_SELECTION);
+  const handleSelectionChange = useCallback15(
+    (row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = isSelected ? deselectItem : 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
+import { moveItem } from "@heswell/salt-lab";
+import {
+  applyFilterToColumns,
+  applyGroupByToColumns,
+  applySortToColumns,
+  findColumn,
+  getCellRenderer,
+  getColumnName,
+  getTableHeadings,
+  getValueFormatter,
+  isFilteredColumn,
+  isGroupColumn as isGroupColumn3,
+  isPinned,
+  isTypeDescriptor,
+  logger,
+  metadataKeys as metadataKeys8,
+  sortPinnedColumns,
+  stripFilterFromColumns
+} from "@vuu-ui/vuu-utils";
+import { useReducer } from "react";
+var { info } = logger("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
+var KEY_OFFSET = metadataKeys8.count;
+var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
+var getCellRendererForColumn = (column) => {
+  var _a, _b;
+  if (isTypeDescriptor(column.type)) {
+    return getCellRenderer((_b = (_a = column.type) == null ? void 0 : _a.renderer) == null ? void 0 : _b.name);
+  }
+};
+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] = 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(isPinned) ? sortPinnedColumns(columns) : columns;
+  const state = {
+    columns: maybePinnedColumns,
+    headings: 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: getValueFormatter(column),
+    width
+  };
+  if (isGroupColumn3(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: 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 = 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 = getColumnName(colName);
+        const key = index + KEY_OFFSET;
+        const col = 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: applyGroupByToColumns(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: applySortToColumns(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: applyFilterToColumns(result.columns, filter)
+    };
+  } else if (result.columns.some(isFilteredColumn)) {
+    result = {
+      ...state,
+      columns: stripFilterFromColumns(result.columns)
+    };
+  }
+  return result;
+}
+function replaceColumn(state, column) {
+  return state.map((col) => col.name === column.name ? column : col);
+}
+
+// src/useTableScroll.ts
+import { useCallback as useCallback16, useRef as useRef12 } from "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, scrollLeft, scrollTop];
+};
+var getMaxScroll = (container) => {
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
+};
+var useTableScroll = ({
+  onHorizontalScroll,
+  onVerticalScroll,
+  viewport
+}) => {
+  const scrollPosRef = useRef12({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = useRef12(null);
+  const contentContainerRef = useRef12(null);
+  const tableContainerRef = useRef12(null);
+  const contentContainerScrolledRef = useRef12(false);
+  const {
+    maxScrollContainerScrollHorizontal: maxScrollLeft,
+    maxScrollContainerScrollVertical: maxScrollTop
+  } = viewport;
+  const scrollTable = useCallback16(
+    (scrollLeft, scrollTop) => {
+      const { current: tableContainer } = tableContainerRef;
+      if (tableContainer) {
+        tableContainer.scrollTo({
+          top: scrollTop,
+          left: scrollLeft,
+          behavior: "auto"
+        });
+      }
+    },
+    [tableContainerRef]
+  );
+  const handleTableContainerScroll = useCallback16(() => {
+    const { current: tableContainer } = tableContainerRef;
+    if (tableContainer) {
+      const { current: scrollPos } = scrollPosRef;
+      const { scrollLeft, scrollTop } = tableContainer;
+      if (scrollPos.scrollTop !== scrollTop) {
+        scrollPos.scrollTop = scrollTop;
+        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        scrollPos.scrollLeft = scrollLeft;
+        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [onHorizontalScroll, onVerticalScroll]);
+  const handleContentContainerScroll = useCallback16(() => {
+    const { current: rootContainer } = contentContainerRef;
+    const { current: scrollContainer } = scrollbarContainerRef;
+    if (rootContainer && scrollContainer) {
+      const [pctScrollLeft, pctScrollTop, scrollLeft, scrollTop] = getPctScroll(rootContainer);
+      contentContainerScrolledRef.current = true;
+      scrollContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      scrollContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      scrollTable(scrollLeft, scrollTop);
+    }
+  }, [
+    maxScrollLeft,
+    maxScrollTop,
+    contentContainerRef,
+    scrollbarContainerRef,
+    scrollTable
+  ]);
+  const handleScrollbarContainerScroll = useCallback16(() => {
+    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"
+      });
+      scrollTable(rootScrollLeft, rootScrollTop);
+    }
+  }, [contentContainerRef, scrollbarContainerRef, scrollTable]);
+  const requestScroll = useCallback16(
+    (scrollRequest) => {
+      const { current: scrollbarContainer } = scrollbarContainerRef;
+      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),
+            viewport.maxScrollContainerScrollVertical
+          );
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: scrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? viewport.maxScrollContainerScrollVertical : 0;
+          scrollbarContainer.scrollTo({
+            top: scrollTo,
+            left: scrollbarContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [viewport.maxScrollContainerScrollVertical]
+  );
+  return {
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef,
+    /** Scroll handler to be attached to ScrollbarContainer */
+    onScrollbarContainerScroll: handleScrollbarContainerScroll,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef,
+    /** Scroll handler to be attached to ContentContainer */
+    onContentContainerScroll: handleContentContainerScroll,
+    /** Ref to be assigned to TableContainer */
+    tableContainerRef,
+    /** Scroll handler to be attached to TableContainer */
+    onTableContainerScroll: handleTableContainerScroll,
+    /** Scroll the table  */
+    requestScroll
+  };
+};
+
+// src/useTableViewport.ts
+import { useMemo as useMemo4 } from "react";
+var UNMEASURED_VIEWPORT = {
+  fillerHeight: 0,
+  maxScrollContainerScrollHorizontal: 0,
+  maxScrollContainerScrollVertical: 0,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  scrollContentHeight: 0,
+  scrollbarSize: 0,
+  scrollContentWidth: 0,
+  totalHeaderHeight: 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 { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo4(
+    () => measurePinnedColumns(columns),
+    [columns]
+  );
+  const viewportMeasurements = useMemo4(() => {
+    var _a;
+    if (size) {
+      const headingsDepth = headings.length;
+      const scrollbarSize = 15;
+      const contentHeight = rowCount * rowHeight;
+      const scrollContentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const maxScrollContainerScrollVertical = contentHeight + headerHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - headerHeight - scrollbarSize);
+      const maxScrollContainerScrollHorizontal = scrollContentWidth - size.width + pinnedWidthLeft;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      return {
+        fillerHeight: (rowCount - count) * rowHeight,
+        maxScrollContainerScrollHorizontal,
+        maxScrollContainerScrollVertical,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        scrollContentHeight: headerHeight + contentHeight + scrollbarSize,
+        scrollbarSize,
+        scrollContentWidth,
+        totalHeaderHeight: headerHeight * (1 + headingsDepth)
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    headerHeight,
+    headings.length,
+    pinnedWidthLeft,
+    pinnedWidthRight,
+    rowCount,
+    rowHeight,
+    size,
+    unpinnedWidth
+  ]);
+  return viewportMeasurements;
+};
+
+// src/useVirtualViewport.ts
+import { getColumnsInViewport, itemsChanged } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef13, useState as useState5 } from "react";
+var useVirtualViewport = ({
+  columns,
+  rowHeight,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = useRef13(-1);
+  const {
+    rowCount: viewportRowCount,
+    scrollContentWidth: contentWidth,
+    maxScrollContainerScrollHorizontal
+  } = viewportMeasurements;
+  const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
+  const scrollLeftRef = useRef13(0);
+  const [visibleColumns, preSpan] = useMemo5(
+    () => getColumnsInViewport(
+      columns,
+      scrollLeftRef.current,
+      scrollLeftRef.current + availableWidth
+    ),
+    [availableWidth, columns]
+  );
+  const preSpanRef = useRef13(preSpan);
+  useEffect4(() => {
+    setColumnsWithinViewport(visibleColumns);
+  }, [visibleColumns]);
+  const [columnsWithinViewport, setColumnsWithinViewport] = useState5(visibleColumns);
+  const handleHorizontalScroll = useCallback17(
+    (scrollLeft) => {
+      scrollLeftRef.current = scrollLeft;
+      const [visibleColumns2, pre] = getColumnsInViewport(
+        columns,
+        scrollLeft,
+        scrollLeft + availableWidth
+      );
+      if (itemsChanged(columnsWithinViewport, visibleColumns2)) {
+        preSpanRef.current = pre;
+        setColumnsWithinViewport(visibleColumns2);
+      }
+    },
+    [availableWidth, columns, columnsWithinViewport]
+  );
+  const handleVerticalScroll = useCallback17(
+    (scrollTop) => {
+      const firstRow = Math.floor(scrollTop / rowHeight);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+    },
+    [rowHeight, setRange, viewportRowCount]
+  );
+  return {
+    columnsWithinViewport,
+    onHorizontalScroll: handleHorizontalScroll,
+    onVerticalScroll: handleVerticalScroll,
+    /** number of leading columns not rendered because of virtualization  */
+    virtualColSpan: preSpanRef.current
+  };
+};
+
+// src/useDataTable.ts
+var NO_ROWS = [];
+var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys9;
+var useDataTable = ({
+  config,
+  dataSource,
+  headerHeight,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight,
+  selectionModel,
+  tableLayout,
+  ...measuredProps
+}) => {
+  var _a, _b;
+  const [rowCount, setRowCount] = useState6(0);
+  const expectConfigChangeRef = useRef14(false);
+  const dataSourceRef = useRef14();
+  dataSourceRef.current = dataSource;
+  if (dataSource === void 0) {
+    throw Error("no data source provided to DataTable");
+  }
+  const containerMeasurements = useMeasuredContainer(measuredProps);
+  const onDataRowcountChange = useCallback18((size) => {
+    setRowCount(size);
+  }, []);
+  const { columns, dispatchColumnAction, headings } = useTableModel(
+    config,
+    dataSource.config
+  );
+  const handlePersistentColumnOperation = useCallback18(
+    (action) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction(action);
+    },
+    [dispatchColumnAction]
+  );
+  const handleContextMenuAction = useContextMenu3({
+    dataSource,
+    onPersistentColumnOperation: handlePersistentColumnOperation
+  });
+  const viewportMeasurements = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size: containerMeasurements.innerSize
+  });
+  const onSubscribed = useCallback18(
+    (subscription) => {
+      if (subscription.tableMeta) {
+        const { columns: columnNames, dataTypes: serverDataTypes } = subscription.tableMeta;
+        expectConfigChangeRef.current = true;
+        dispatchColumnAction({
+          type: "setTypes",
+          columnNames,
+          serverDataTypes
+        });
+      }
+    },
+    [dispatchColumnAction]
+  );
+  const handleSelectionChange = useCallback18(
+    (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 = useRef14();
+  dataRef.current = data;
+  const handleSort = useCallback18(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = applySort(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const handleColumnResize = useCallback18(
+    (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 = useCallback18(
+    (row, column) => {
+      const isJson = isJsonGroup2(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,
+    rowHeight,
+    setRange,
+    viewportMeasurements
+  });
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    onHorizontalScroll,
+    // onRangeChange: setRange,
+    onVerticalScroll,
+    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 = useCallback18(
+    (column) => {
+      if (dataSource && dataSource.groupBy.includes(column.name)) {
+        dataSource.groupBy = dataSource.groupBy.filter(
+          (columnName) => columnName !== column.name
+        );
+      }
+    },
+    [dataSource]
+  );
+  const handleDropColumn = useCallback18(
+    (fromIndex, toIndex) => {
+      const column = dataSource.columns[fromIndex];
+      const columns2 = moveItem2(dataSource.columns, column, toIndex);
+      if (columns2 !== dataSource.columns) {
+        dataSource.columns = columns2;
+        dispatchColumnAction({ type: "tableConfig", columns: columns2 });
+      }
+    },
+    [dataSource, dispatchColumnAction]
+  );
+  const draggableHook = useDraggableColumn({
+    onDrop: handleDropColumn,
+    tableContainerRef: scrollProps.tableContainerRef,
+    tableLayout
+  });
+  useEffect5(() => {
+    if (dataSourceRef.current) {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: config,
+        dataSourceConfig: dataSourceRef.current.config
+      });
+    }
+  }, [config, dispatchColumnAction]);
+  useEffect5(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  useMemo6(() => {
+    if (expectConfigChangeRef.current) {
+      onConfigChange == null ? void 0 : onConfigChange({
+        ...config,
+        columns
+      });
+      expectConfigChangeRef.current = false;
+    }
+  }, [columns, config, onConfigChange]);
+  const showContextMenu = usePopupContextMenu();
+  const onContextMenu = useCallback18(
+    (evt) => {
+      var _a2;
+      const { current: currentData } = dataRef;
+      const { current: currentDataSource } = dataSourceRef;
+      const target = evt.target;
+      const cellEl = target == null ? void 0 : target.closest("td");
+      const rowEl = target == null ? void 0 : target.closest("tr");
+      if (cellEl && rowEl && currentData && currentDataSource) {
+        const { columns: columns2, selectedRowsCount } = currentDataSource;
+        const columnMap = 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,
+    handleContextMenuAction,
+    headings,
+    onColumnResize: handleColumnResize,
+    onContextMenu,
+    onRemoveColumnFromGroupBy: handleRemoveColumnFromGroupBy,
+    onRowClick: handleRowClick,
+    onSort: handleSort,
+    onToggleGroup: handleToggleGroup,
+    virtualColSpan,
+    scrollProps,
+    rowCount,
+    viewportMeasurements,
+    ...draggableHook
+  };
+};
+
+// src/Table.tsx
+import cx8 from "classnames";
+import { isDataLoading } from "@vuu-ui/vuu-utils";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase7 = "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,
+  tableLayout: tableLayoutProp = "row",
+  width,
+  zebraStripes = false,
+  ...props
+}) => {
+  const id = useIdMemo(idProp);
+  const {
+    containerMeasurements: { containerRef, innerSize, outerSize },
+    containerProps,
+    dispatchColumnAction,
+    draggable,
+    draggedItemIndex,
+    handleContextMenuAction,
+    scrollProps,
+    tableLayout,
+    viewportMeasurements,
+    ...tableProps
+  } = useDataTable({
+    config,
+    dataSource,
+    renderBufferSize,
+    headerHeight,
+    height,
+    onConfigChange,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    onSelectionChange,
+    rowHeight,
+    selectionModel,
+    tableLayout: tableLayoutProp,
+    width
+  });
+  const style = {
+    ...outerSize,
+    "--content-height": `${viewportMeasurements.scrollContentHeight}px`,
+    "--content-width": `${viewportMeasurements.scrollContentWidth}px`,
+    "--filler-height": `${viewportMeasurements.fillerHeight}px`,
+    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+    "--header-height": `${headerHeight}px`,
+    "--row-height": `${rowHeight}px`,
+    "--scrollbar-size": `${viewportMeasurements.scrollbarSize}px`,
+    "--table-height": `${innerSize == null ? void 0 : innerSize.height}px`,
+    "--table-width": `${innerSize == null ? void 0 : innerSize.width}px`,
+    "--total-header-height": `${viewportMeasurements == null ? void 0 : viewportMeasurements.totalHeaderHeight}px`
+  };
+  const scrollbarContainerStyle = {
+    left: viewportMeasurements.pinnedWidthLeft - 1,
+    // The -1 is to align the top border, might cause innaccuracy
+    // It is compensated by a hardcoded adjustment in css
+    // top: measurements.top - 1 + headerHeight,
+    top: (viewportMeasurements == null ? void 0 : viewportMeasurements.totalHeaderHeight) - 1
+  };
+  const Table2 = tableLayout === "column" ? ColumnBasedTable : RowBasedTable;
+  const className = cx8(classBase7, classNameProp, {
+    [`${classBase7}-zebra`]: zebraStripes,
+    [`${classBase7}-loading`]: isDataLoading(tableProps.columns)
+  });
+  return /* @__PURE__ */ jsx11(
+    ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder: buildContextMenuDescriptors(dataSource),
+      children: /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          ...containerProps,
+          className,
+          id,
+          ref: containerRef,
+          style,
+          tabIndex: -1,
+          children: [
+            innerSize ? /* @__PURE__ */ jsx11(
+              "div",
+              {
+                className: `${classBase7}-scrollbarContainer`,
+                onScroll: scrollProps.onScrollbarContainerScroll,
+                ref: scrollProps.scrollbarContainerRef,
+                style: scrollbarContainerStyle,
+                children: /* @__PURE__ */ jsx11("div", { className: `${classBase7}-scrollContent` })
+              }
+            ) : null,
+            innerSize ? /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                className: `${classBase7}-contentContainer`,
+                onScroll: scrollProps.onContentContainerScroll,
+                ref: scrollProps.contentContainerRef,
+                ...props,
+                children: [
+                  /* @__PURE__ */ jsx11("div", { className: `${classBase7}-scrollContent` }),
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      className: `${classBase7}-tableContainer`,
+                      onScroll: scrollProps.onTableContainerScroll,
+                      ref: scrollProps.tableContainerRef,
+                      children: /* @__PURE__ */ jsx11(
+                        Table2,
+                        {
+                          ...tableProps,
+                          headerHeight,
+                          rowHeight
+                        }
+                      )
+                    }
+                  ),
+                  draggable
+                ]
+              }
+            ) : null,
+            showSettings && innerSize ? /* @__PURE__ */ jsx11(
+              Button,
+              {
+                className: `${classBase7}-settings`,
+                "data-icon": "settings",
+                onClick: onShowSettings,
+                variant: "secondary"
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/cell-renderers/json-cell/JsonCell.tsx
+import cx9 from "classnames";
+import {
+  isJsonAttribute,
+  metadataKeys as metadataKeys10,
+  registerComponent
+} from "@vuu-ui/vuu-utils";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var classBase8 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = metadataKeys10;
+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 (isJsonAttribute(value)) {
+    value = value.slice(0, -1);
+    isToggle = true;
+  }
+  const rowKey = localKey(row[KEY3]);
+  const className = cx9({
+    [`${classBase8}-name`]: rowKey === value,
+    [`${classBase8}-value`]: rowKey !== value,
+    [`${classBase8}-group`]: isToggle
+  });
+  if (isToggle) {
+    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
+    return /* @__PURE__ */ jsxs9("span", { className, children: [
+      /* @__PURE__ */ jsx12("span", { className: `${classBase8}-value`, children: value }),
+      /* @__PURE__ */ jsx12("span", { className: `${classBase8}-toggle`, "data-icon": toggleIcon })
+    ] });
+  } else if (value) {
+    return /* @__PURE__ */ jsx12("span", { className, children: value });
+  } else {
+    return null;
+  }
+};
+registerComponent("json", JsonCell, "cell-renderer", {});
+export {
+  Table,
+  useMeasuredContainer
+};
 //# sourceMappingURL=index.js.map