@vuu-ui/vuu-table 0.8.32 → 0.8.34

package/cjs/Row.css

@@ -0,0 +1,115 @@
+.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

@@ -0,0 +1,115 @@
+'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

@@ -0,0 +1 @@
+{"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":"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"}

package/cjs/Table.css

@@ -0,0 +1,151 @@
+
+.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;
+} 
+
+

package/cjs/Table.js

@@ -0,0 +1,276 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var react = require('react');
+var Row = require('./Row.js');
+var TableHeader = require('./table-header/TableHeader.js');
+var useTable = require('./useTable.js');
+var useRowHeight = require('./useRowHeight.js');
+
+const classBase = "vuuTable";
+const { IDX, RENDER_IDX } = vuuUtils.metadataKeys;
+const TableCore = ({
+  Row: Row$1 = Row.Row,
+  allowDragDrop,
+  availableColumns,
+  config,
+  containerRef,
+  dataSource,
+  disableFocus = false,
+  highlightedIndex: highlightedIndexProp,
+  id: idProp,
+  navigationStyle = "cell",
+  onAvailableColumnsChange,
+  onConfigChange,
+  onDragStart,
+  onDrop,
+  onFeatureInvocation,
+  onHighlight,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize = 5,
+  rowHeight,
+  scrollingApiRef,
+  selectionModel = "extended",
+  showColumnHeaders = true,
+  showColumnHeaderMenus = true,
+  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
+  size
+}) => {
+  const id = vuuUtils.useId(idProp);
+  const {
+    columnMap,
+    columns,
+    data,
+    draggableRow,
+    getRowOffset,
+    handleContextMenuAction,
+    headings,
+    highlightedIndex,
+    menuBuilder,
+    onDataEdited,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onResizeColumn,
+    onRowClick,
+    onSortColumn,
+    onToggleGroup,
+    rowClassNameGenerator,
+    scrollProps,
+    tableAttributes,
+    tableConfig,
+    viewportMeasurements,
+    ...tableProps
+  } = useTable.useTable({
+    allowDragDrop,
+    availableColumns,
+    config,
+    containerRef,
+    dataSource,
+    disableFocus,
+    headerHeight,
+    highlightedIndex: highlightedIndexProp,
+    id,
+    navigationStyle,
+    onAvailableColumnsChange,
+    onConfigChange,
+    onDragStart,
+    onDrop,
+    onFeatureInvocation,
+    onHighlight,
+    onRowClick: onRowClickProp,
+    onSelect,
+    onSelectionChange,
+    renderBufferSize: Math.max(5, renderBufferSize),
+    rowHeight,
+    scrollingApiRef,
+    selectionModel,
+    size
+  });
+  const contentContainerClassName = cx(`${classBase}-contentContainer`, {
+    [`${classBase}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase}-zebra`]: tableAttributes.zebraStripes
+  });
+  const cssVariables = {
+    "--content-height": `${viewportMeasurements.contentHeight}px`,
+    "--content-width": `${viewportMeasurements.contentWidth}px`,
+    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+    "--header-height": `${headerHeight}px`,
+    "--row-height-prop": `${rowHeight}px`,
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuPopups.ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${classBase}-scrollbarContainer`,
+            ref: scrollProps.scrollbarContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-scrollbarContent` })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: contentContainerClassName,
+            ref: scrollProps.contentContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ...tableProps,
+                className: `${classBase}-table`,
+                role: "table",
+                tabIndex: disableFocus ? void 0 : -1,
+                children: [
+                  showColumnHeaders ? /* @__PURE__ */ jsxRuntime.jsx(
+                    TableHeader.TableHeader,
+                    {
+                      columns: scrollProps.columnsWithinViewport,
+                      headings,
+                      onMoveColumn,
+                      onMoveGroupColumn,
+                      onRemoveGroupColumn,
+                      onResizeColumn,
+                      onSortColumn,
+                      showColumnHeaderMenus,
+                      tableConfig,
+                      tableId: id,
+                      virtualColSpan: scrollProps.virtualColSpan
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-body`, children: data.map((data2) => /* @__PURE__ */ jsxRuntime.jsx(
+                    Row$1,
+                    {
+                      "aria-rowindex": data2[0] + 1,
+                      classNameGenerator: rowClassNameGenerator,
+                      columnMap,
+                      columns: scrollProps.columnsWithinViewport,
+                      highlighted: highlightedIndex === data2[IDX],
+                      onClick: onRowClick,
+                      onDataEdited,
+                      row: data2,
+                      offset: getRowOffset(data2),
+                      onToggleGroup,
+                      virtualColSpan: scrollProps.virtualColSpan,
+                      zebraStripes: tableAttributes.zebraStripes
+                    },
+                    data2[RENDER_IDX]
+                  )) })
+                ]
+              }
+            )
+          }
+        ),
+        draggableRow
+      ]
+    }
+  );
+};
+const Table = react.forwardRef(function TableNext({
+  Row: Row$1,
+  allowDragDrop,
+  availableColumns,
+  className: classNameProp,
+  config,
+  dataSource,
+  disableFocus,
+  highlightedIndex,
+  id,
+  navigationStyle,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onDragStart,
+  onDrop,
+  onFeatureInvocation,
+  onHighlight,
+  onRowClick,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize,
+  rowHeight: rowHeightProp,
+  scrollingApiRef,
+  selectionModel,
+  showColumnHeaders,
+  showColumnHeaderMenus,
+  headerHeight,
+  style: styleProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const containerRef = react.useRef(null);
+  const [size, setSize] = react.useState();
+  const { rowHeight, rowRef } = useRowHeight.useRowHeight({ rowHeight: rowHeightProp });
+  if (config === void 0) {
+    throw Error(
+      "vuu Table requires config prop. Minimum config is list of Column Descriptors"
+    );
+  }
+  if (dataSource === void 0) {
+    throw Error("vuu Table requires dataSource prop");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuUiControls.MeasuredContainer,
+    {
+      ...htmlAttributes,
+      className: cx(classBase, classNameProp),
+      id,
+      onResize: setSize,
+      ref: core.useForkRef(containerRef, forwardedRef),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Row.RowProxy, { ref: rowRef, height: rowHeightProp }),
+        size && rowHeight ? /* @__PURE__ */ jsxRuntime.jsx(
+          TableCore,
+          {
+            Row: Row$1,
+            allowDragDrop,
+            availableColumns,
+            config,
+            containerRef,
+            dataSource,
+            disableFocus,
+            headerHeight,
+            highlightedIndex,
+            id,
+            navigationStyle,
+            onAvailableColumnsChange,
+            onConfigChange,
+            onDragStart,
+            onDrop,
+            onFeatureInvocation,
+            onHighlight,
+            onRowClick,
+            onSelect,
+            onSelectionChange,
+            renderBufferSize,
+            rowHeight,
+            scrollingApiRef,
+            selectionModel,
+            showColumnHeaders,
+            showColumnHeaderMenus,
+            size
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+exports.Table = Table;
+//# sourceMappingURL=Table.js.map