@vuu-ui/vuu-table 0.8.34 → 0.8.35

package/package.json

@@ -1,18 +1,18 @@
 {
-  "version": "0.8.34",
+  "version": "0.8.35",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.34",
-    "@vuu-ui/vuu-table-types": "0.8.34",
-    "@vuu-ui/vuu-protocol-types": "0.8.34"
+    "@vuu-ui/vuu-data-types": "0.8.35",
+    "@vuu-ui/vuu-table-types": "0.8.35",
+    "@vuu-ui/vuu-protocol-types": "0.8.35"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
-    "@vuu-ui/vuu-layout": "0.8.34",
-    "@vuu-ui/vuu-popups": "0.8.34",
-    "@vuu-ui/vuu-ui-controls": "0.8.34",
-    "@vuu-ui/vuu-utils": "0.8.34"
+    "@vuu-ui/vuu-layout": "0.8.35",
+    "@vuu-ui/vuu-popups": "0.8.35",
+    "@vuu-ui/vuu-ui-controls": "0.8.35",
+    "@vuu-ui/vuu-utils": "0.8.35"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -20,8 +20,6 @@
     "react-dom": ">=17.0.2"
   },
   "files": [
-    "esm",
-    "cjs",
     "README.md",
     "/types"
   ],

package/cjs/Row.css

@@ -1,115 +0,0 @@
-.vuuTableRow {
-    background: var(--row-background,var(--table-background));
-    color: var(--salt-content-secondary-foreground);
-    border-bottom: 1px solid var(--row-borderColor, var(--table-background));
-    box-sizing: border-box;
-    height: var(--row-height);
-    line-height: calc(var(--row-height) - 1px);
-    position: absolute;
-    top:0;
-    white-space: nowrap;
-}
-    
-.vuuTableRow-proxy {
-  visibility: hidden;
-}
-
-.vuuTableRow-even {
-  --row-background: var(--row-background-even);
-}
-
-.vuuTableRow-highlighted {
-  background: var(--salt-selectable-background-hover);
-}
-
-
-.vuuTableRow-selected,
-.vuuTableRow-selectedEnd {
-  /* --row-borderColor: var(--salt-separable-secondary-borderColor); */
-  background-color: var(--salt-selectable-background-selected);
-}
-
-.vuuTableRow-selectedEnd {
-  z-index: 1;
-}
-
-.vuuTableRow-selectedStart {
-  --vuu-selection-decorator-left-radius: 5px 0 0 0;
-  --vuu-selection-decorator-right-radius: 0 5px 0 0;
-
-  border-radius: 5px 5px 0 0;
-}
-    
-      .vuuTableRow-selectedEnd {
-        --vuu-selection-decorator-left-radius: 0 0 0 5px;
-        --vuu-selection-decorator-right-radius: 0 0 5px 0;
-        border-radius: 0 0 5px 5px;
-      }
-    
-      .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
-        --vuu-selection-decorator-left-radius: 5px 0 0 5px;
-        --vuu-selection-decorator-right-radius: 0 5px 5px 0;
-        border-radius: 5px 5px 5px 5px;
-    
-      }
-    
-    .vuuTableRow-selectedStart:after {
-        content: '';
-        position: absolute;
-        top: -1px;
-        left: 4px;
-        height: 1px;
-        background: var(--vuuTableRow-selectionBlock-borderColor);
-        width: calc(var(--content-width) - 8px);
-        z-index: 1;
-      }
-    
-    .vuuTableRow-selectedEnd {
-        border-bottom-color: var(--vuuTableRow-selectionBlock-borderColor, var(--row-borderColor));
-      }
-    
-      .vuuTableRow-selectionDecorator {
-        background: var(--table-background);
-        display: inline-block;
-        position: relative;
-        height: var(--row-height);
-        width: 4px;
-        z-index: 2;
-      }
-    
-      .vuuTableRow-selectionDecorator.vuuStickyLeft {
-        left:0;
-        position: sticky;
-      }
-    
-      .vuuTableRow-selectionDecorator.vuuStickyRight {
-        right:0;
-        position: sticky;
-      }              
-    
-      .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
-      .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
-        content: '';
-        inset: -1px 0 0 0;
-        position: absolute;
-        background: var(--table-background);
-      }
-    
-      .vuuTableRow-selectionDecorator.vuuStickyLeft:before {
-        border-radius: var(--vuu-selection-decorator-left-radius, 0);
-      }
-    
-      .vuuTableRow-selectionDecorator.vuuStickyRight:before {
-        border-radius: var(--vuu-selection-decorator-right-radius, 0);
-      }
-
-      .vuuTableRow-expanded {
-        --toggle-icon-transform: rotate(90deg);
-      }
-    
-.vuuDraggable .vuuTableRow {
-  --cell-borderColor: transparent;
-  --vuu-selection-decorator-bg: transparent;
-  transform: none!important;
-  z-index: 1;
-}

package/cjs/Row.js

@@ -1,115 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var cx = require('clsx');
-var react = require('react');
-var TableCell = require('./table-cell/TableCell.js');
-var TableGroupCell = require('./table-cell/TableGroupCell.js');
-
-const { IDX, IS_EXPANDED, SELECTED } = vuuUtils.metadataKeys;
-const classBase = "vuuTableRow";
-const RowProxy = react.forwardRef(
-  function RowProxy2({ height }, forwardedRef) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": true,
-        className: cx(classBase, `${classBase}-proxy`),
-        ref: forwardedRef,
-        style: { height }
-      }
-    );
-  }
-);
-const Row = react.memo(
-  ({
-    className: classNameProp,
-    classNameGenerator,
-    columnMap,
-    columns,
-    highlighted,
-    row,
-    offset,
-    onClick,
-    onDataEdited,
-    onToggleGroup,
-    virtualColSpan = 0,
-    zebraStripes = false,
-    ...htmlAttributes
-  }) => {
-    const {
-      [IDX]: rowIndex,
-      [IS_EXPANDED]: isExpanded,
-      [SELECTED]: selectionStatus
-    } = row;
-    const handleRowClick = react.useCallback(
-      (evt) => {
-        const rangeSelect = evt.shiftKey;
-        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-        onClick?.(evt, row, rangeSelect, keepExistingSelection);
-      },
-      [onClick, row]
-    );
-    const { True, First, Last } = vuuUtils.RowSelected;
-    const className = cx(
-      classBase,
-      classNameProp,
-      classNameGenerator?.(row, columnMap),
-      {
-        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,
-        [`${classBase}-expanded`]: isExpanded,
-        [`${classBase}-highlighted`]: highlighted,
-        [`${classBase}-selected`]: selectionStatus & True,
-        [`${classBase}-selectedStart`]: selectionStatus & First,
-        [`${classBase}-selectedEnd`]: selectionStatus & Last
-      }
-    );
-    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
-    const handleGroupCellClick = react.useCallback(
-      (evt, column) => {
-        if (vuuUtils.isGroupColumn(column) || vuuUtils.isJsonGroup(column, row, columnMap)) {
-          evt.stopPropagation();
-          onToggleGroup?.(row, column);
-        }
-      },
-      [columnMap, onToggleGroup, row]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ...htmlAttributes,
-        role: "row",
-        className,
-        onClick: handleRowClick,
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-selectionDecorator vuuStickyLeft` }),
-          virtualColSpan > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
-          columns.filter(vuuUtils.isNotHidden).map((column) => {
-            const isGroup = vuuUtils.isGroupColumn(column);
-            const isJsonCell = vuuUtils.isJsonColumn(column);
-            const Cell = isGroup ? TableGroupCell.TableGroupCell : TableCell.TableCell;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Cell,
-              {
-                column,
-                columnMap,
-                onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-                onDataEdited,
-                row
-              },
-              column.name
-            );
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-selectionDecorator vuuStickyRight` })
-        ]
-      }
-    );
-  }
-);
-Row.displayName = "Row";
-
-exports.Row = Row;
-exports.RowProxy = RowProxy;
-//# sourceMappingURL=Row.js.map

package/cjs/Row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n  DataCellEditHandler,\n  RuntimeColumnDescriptor,\n  TableRowClickHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  ColumnMap,\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  metadataKeys,\n  isNotHidden,\n  RowSelected,\n  RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  forwardRef,\n  memo,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport \"./Row.css\";\n\nexport interface RowProps {\n  className?: string;\n  classNameGenerator?: RowClassNameGenerator;\n  columnMap: ColumnMap;\n  columns: RuntimeColumnDescriptor[];\n  highlighted?: boolean;\n  row: DataSourceRow;\n  offset: number;\n  onClick?: TableRowClickHandlerInternal;\n  onDataEdited?: DataCellEditHandler;\n  onToggleGroup?: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;\n  style?: CSSProperties;\n  virtualColSpan?: number;\n  zebraStripes?: boolean;\n}\n\nconst { IDX, IS_EXPANDED, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n  function RowProxy({ height }, forwardedRef) {\n    return (\n      <div\n        aria-hidden\n        className={cx(classBase, `${classBase}-proxy`)}\n        ref={forwardedRef}\n        style={{ height }}\n      />\n    );\n  }\n);\n\n// export const Row = memo(\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columnMap,\n    columns,\n    highlighted,\n    row,\n    offset,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const {\n      [IDX]: rowIndex,\n      [IS_EXPANDED]: isExpanded,\n      [SELECTED]: selectionStatus,\n    } = row;\n\n    const handleRowClick = useCallback(\n      (evt: MouseEvent<HTMLDivElement>) => {\n        const rangeSelect = evt.shiftKey;\n        const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n        onClick?.(evt, row, rangeSelect, keepExistingSelection);\n      },\n      [onClick, row]\n    );\n\n    const { True, First, Last } = RowSelected;\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(row, columnMap),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-expanded`]: isExpanded,\n        [`${classBase}-highlighted`]: highlighted,\n        [`${classBase}-selected`]: selectionStatus & True,\n        [`${classBase}-selectedStart`]: selectionStatus & First,\n        [`${classBase}-selectedEnd`]: selectionStatus & Last,\n      }\n    );\n\n    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n\n    const handleGroupCellClick = useCallback(\n      (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n          evt.stopPropagation();\n          onToggleGroup?.(row, column);\n        }\n      },\n      [columnMap, onToggleGroup, row]\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n        {virtualColSpan > 0 ? (\n          <div className=\"vuuTableCell\" style={{ width: virtualColSpan }} />\n        ) : null}\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              columnMap={columnMap}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              row={row}\n            />\n          );\n        })}\n        <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n      </div>\n    );\n  }\n);\nRow.displayName = \"Row\";\n"],"names":["metadataKeys","forwardRef","RowProxy","jsx","memo","useCallback","RowSelected","isGroupColumn","isJsonGroup","jsxs","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":";;;;;;;;;AA4CA,MAAM,EAAE,GAAA,EAAK,WAAa,EAAA,QAAA,EAAa,GAAAA,qBAAA,CAAA;AACvC,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CAAS,EAAE,MAAA,IAAU,YAAc,EAAA;AAC1C,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAW,EAAA,IAAA;AAAA,QACX,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QAC7C,GAAK,EAAA,YAAA;AAAA,QACL,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA;AAAA,GAEJ;AACF,EAAA;AAGO,MAAM,GAAM,GAAAC,UAAA;AAAA,EACjB,CAAC;AAAA,IACC,SAAW,EAAA,aAAA;AAAA,IACX,kBAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAiB,GAAA,CAAA;AAAA,IACjB,YAAe,GAAA,KAAA;AAAA,IACf,GAAG,cAAA;AAAA,GACW,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,CAAC,GAAG,GAAG,QAAA;AAAA,MACP,CAAC,WAAW,GAAG,UAAA;AAAA,MACf,CAAC,QAAQ,GAAG,eAAA;AAAA,KACV,GAAA,GAAA,CAAA;AAEJ,IAAA,MAAM,cAAiB,GAAAC,iBAAA;AAAA,MACrB,CAAC,GAAoC,KAAA;AACnC,QAAA,MAAM,cAAc,GAAI,CAAA,QAAA,CAAA;AACxB,QAAM,MAAA,qBAAA,GAAwB,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,OAAA,CAAA;AACjD,QAAU,OAAA,GAAA,GAAA,EAAK,GAAK,EAAA,WAAA,EAAa,qBAAqB,CAAA,CAAA;AAAA,OACxD;AAAA,MACA,CAAC,SAAS,GAAG,CAAA;AAAA,KACf,CAAA;AAEA,IAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,IAAA,EAAS,GAAAC,oBAAA,CAAA;AAE9B,IAAA,MAAM,SAAY,GAAA,EAAA;AAAA,MAChB,SAAA;AAAA,MACA,aAAA;AAAA,MACA,kBAAA,GAAqB,KAAK,SAAS,CAAA;AAAA,MACnC;AAAA,QACE,CAAC,CAAG,EAAA,SAAS,OAAO,GAAG,YAAA,IAAgB,WAAW,CAAM,KAAA,CAAA;AAAA,QACxD,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,UAAA;AAAA,QAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,YAAA,CAAc,GAAG,WAAA;AAAA,QAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAkB,GAAA,IAAA;AAAA,QAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,cAAA,CAAgB,GAAG,eAAkB,GAAA,KAAA;AAAA,QAClD,CAAC,CAAA,EAAG,SAAS,CAAA,YAAA,CAAc,GAAG,eAAkB,GAAA,IAAA;AAAA,OAClD;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,KAAQ,GAAA,EAAE,SAAW,EAAA,CAAA,iBAAA,EAAoB,MAAM,CAAW,QAAA,CAAA,EAAA,CAAA;AAEhE,IAAA,MAAM,oBAAuB,GAAAD,iBAAA;AAAA,MAC3B,CAAC,KAAiB,MAAoC,KAAA;AACpD,QAAA,IAAIE,uBAAc,MAAM,CAAA,IAAKC,qBAAY,MAAQ,EAAA,GAAA,EAAK,SAAS,CAAG,EAAA;AAChE,UAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,UAAA,aAAA,GAAgB,KAAK,MAAM,CAAA,CAAA;AAAA,SAC7B;AAAA,OACF;AAAA,MACA,CAAC,SAAW,EAAA,aAAA,EAAe,GAAG,CAAA;AAAA,KAChC,CAAA;AAEA,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,IAAK,EAAA,KAAA;AAAA,QACL,SAAA;AAAA,QACA,OAAS,EAAA,cAAA;AAAA,QACT,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAqC,iCAAA,CAAA,EAAA,CAAA;AAAA,UACjE,cAAA,GAAiB,CAChB,mBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,cAAe,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,cAAe,EAAA,EAAG,CAC9D,GAAA,IAAA;AAAA,UACH,QAAQ,MAAO,CAAAO,oBAAW,CAAE,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AAC3C,YAAM,MAAA,OAAA,GAAUH,uBAAc,MAAM,CAAA,CAAA;AACpC,YAAM,MAAA,UAAA,GAAaI,sBAAa,MAAM,CAAA,CAAA;AACtC,YAAM,MAAA,IAAA,GAAO,UAAUC,6BAAiB,GAAAC,mBAAA,CAAA;AAExC,YACE,uBAAAV,cAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,MAAA;AAAA,gBACA,SAAA;AAAA,gBAEA,OAAA,EAAS,OAAW,IAAA,UAAA,GAAa,oBAAuB,GAAA,KAAA,CAAA;AAAA,gBACxD,YAAA;AAAA,gBACA,GAAA;AAAA,eAAA;AAAA,cAHK,MAAO,CAAA,IAAA;AAAA,aAId,CAAA;AAAA,WAEH,CAAA;AAAA,0BACAA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAsC,kCAAA,CAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACrE,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,GAAA,CAAI,WAAc,GAAA,KAAA;;;;;"}

package/cjs/Table.css

@@ -1,151 +0,0 @@
-
-.vuuTable {
-  --vuu-table-cell-outlineWidth: 1px;
-  --table-height: var(--measured-px-height);
-  --table-width: var(--measured-px-width);
-  --vuu-table-next-selection-bookend-width: 4px;
-  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);
-  --columnResizer-color: transparent;
-  --row-height: var(--row-height-prop, var(--vuu-table-row-height, var(--salt-size-base)));
-
-  --cell-borderColor: transparent;
-  --row-borderColor: var(--row-background);
-  --table-background: var(--salt-container-primary-background);
-
-  background: var(--table-background);
-  font-family: var(--vuuTable-fontFamily,var(--salt-typography-fontFamily, sans-serif));
-  font-size: var(--vuuTable-fontSize,var(--salt-text-fontSize, 12px));
-  position: relative;
-  user-select: none;
-}
-
-.vuuTable-zebra {
-  --row-background-even: var(--table-background);
-}
-
-.vuuTable-colLines {
-    --cell-borderColor: var(
-      
-    );
-}
-
-.vuuTable-rowLines {
-    --row-borderColor: var(--salt-separable-tertiary-borderColor);
-}
-
-.vuuTable-scrollbarContainer {
-  border-bottom: none !important;
-  border-top: none !important;
-  border-left: solid 1px var(--salt-container-primary-borderColor);
-  /*  a top border */
-  /** creates a border to top od scrollbar */
-  /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */
-  height: var(--viewport-body-height);
-  left: 0px;
-  overflow: auto;
-  position: absolute;
-  top: var(--total-header-height);
-  width: var(--table-width);
-
-
-}
-
-.vuuTable-scrollbarContainer::-webkit-scrollbar {
-  border: none;
-  width: 10px;
-}
-
-.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {
-  height: 10px;
-}
-
-
-.vuuTable-scrollbarContainer::-webkit-scrollbar-track {
-  background-color: white;
-}
-.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  border-radius: 10px;
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--vuu-color-gray-30);
-}
-
-.vuuTable-scrollbarContent {
-  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));
-  position: absolute;
-  width: var(--content-width);
-}
-
-.vuuTable-contentContainer {
-  background: var(--table-background);
-  height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
-  position: relative;
-  overflow: auto;
-  overscroll-behavior: none;
-  width: calc(var(--table-width) - var(--vertical-scrollbar-width));
-}
-
-.vuuTable-contentContainer::-webkit-scrollbar {
-  display: none;
-}
-
- 
-.vuuTable-table {
-  position: absolute;
-  top: 0;
-  left: 0;
-  table-layout: fixed;
-  width: var(--content-width);
-  margin: 0;
-  border: none;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.vuuTable-body {
-  height: var(--content-height);
-  position: relative;
-}
-
-.vuuPinLeft, .vuuPinRight {
-  background-color: inherit;
-  position: sticky;
-  z-index: 1;
-}
-
-.vuuTable-col-headings {
-  background-color: var(--vuuTableColHeadings-background, var(--table-background));
-  padding: 0 var(--vuu-table-next-selection-bookend-width, 0);
-
-    position: sticky;
-    top: 0;
-    /* ensure header row sits atop everything else when scrolling down */
-    z-index: 1;
-}
-
-.vuuTable-col-headings:hover {
-  --columnResizer-height: var(--header-height);
-  --columnResizer-color: var(--salt-separable-tertiary-borderColor);
-}
-
-  .vuuTable-col-headers {
-    background-color: var(--vuuTableColHeadings-background, var(--vuuTableColHeadings-background));
-    color: var(--salt-content-secondary-foreground);
-    white-space: nowrap;
-  }
-
-
-  .sizer-cell {
-    border: none !important;
-    height: 0px;
-  }
-  
-  .vuuDraggable-vuuTable {
-    --header-height: 25px;
-    --vuuTableHeaderCell-background: var(--salt-container-secondary-background);
-  }
-.vuuDraggable-vuuTable {
-  --row-height: 25px;
-} 
-
-