@dxos/react-ui-table 0.4.10-main.3e35a2f → 0.4.10-main.3f5e2d2

package/dist/lib/browser/index.mjs

@@ -92,7 +92,7 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
 import { X as X2, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp } from "@phosphor-icons/react";
-import React3, { useRef as useRef2, useState as useState5, useCallback as useCallback2 } from "react";
+import React3, { useRef as useRef2, useState as useState6, useCallback as useCallback5 } from "react";
 import { Button as Button2, DensityProvider, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
 import { getSize as getSize3, mx as mx3 } from "@dxos/react-ui-theme";
 
@@ -107,19 +107,21 @@ var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement(
   className: mx2("p-2", className)
 }, children);
 var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose }) => {
-  const [prop, setProp] = useState2(column.id);
-  const [refTable, setRefTable] = useState2(column.refTable);
-  const [refProp, setRefProp] = useState2(column.refProp);
-  const [type, setType] = useState2(String(column.type));
-  const [label, setLabel] = useState2(column.label);
-  const [digits, setDigits] = useState2(String(column.digits ?? "0"));
+  const [formState, setFormState] = useState2({
+    prop: column.id,
+    refTable: column.refTable,
+    refProp: column.refProp,
+    type: String(column.type),
+    label: column.label,
+    digits: String(column.digits ?? "0")
+  });
   const propRef = useRef(null);
   const { t } = useTranslation2(translationKey);
   const handleCancel = () => {
-    setProp(column.id);
     onClose?.();
   };
   const handleSave = () => {
+    const { prop, refTable, refProp, type, label, digits } = formState;
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
       propRef.current?.focus();
       return;
@@ -131,7 +133,7 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
         return;
       }
     }
-    onUpdate?.(prop, {
+    onUpdate?.(column.id, {
       id: prop,
       prop,
       label,
@@ -148,22 +150,30 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     classNames: "mbe-1"
   }, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     placeholder: "Column label",
-    value: label ?? "",
-    onChange: (event) => setLabel(event.target.value),
+    value: formState.label ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      label: event.target.value
+    })),
     autoFocus: true
   })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
-    // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-    value: prop ?? "",
-    onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
+    value: formState.prop ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      prop: event.target.value.replace(/[^\w_]/g, "")
+    }))
   })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: type,
-    onValueChange: setType
+    value: formState.type,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      type: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
@@ -172,37 +182,46 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     "boolean",
     "string",
     "ref"
-  ].map((type2) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: type2,
-    value: type2
-  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  ].map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: type,
+    value: type
+  }, t(`${type} column type label`))))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    value: digits ?? "",
-    onChange: (event) => setDigits(event.target.value)
-  })))), type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+    value: formState.digits ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      digits: event.target.value
+    }))
+  }))), formState.type === "ref" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: refTable,
-    onValueChange: setRefTable
+    value: formState.refTable,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      refTable: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, name ?? id))))))), refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: refProp,
-    onValueChange: setRefProp
+    value: formState.refProp,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      refProp: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Property",
     classNames: "is-full"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, label2 ?? id))))))))), /* @__PURE__ */ React2.createElement(Separator, {
+  }, label ?? id)))))))), /* @__PURE__ */ React2.createElement(Separator, {
     classNames: "mli-2"
   }), /* @__PURE__ */ React2.createElement(Section, {
     className: "space-b-1.5"
@@ -233,11 +252,44 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
   }))));
 };
 
+// packages/ui/react-ui-table/src/hooks/useColumnSizing.ts
+import { useCallback as useCallback2, useEffect, useState as useState3 } from "react";
+import { useOnTransition } from "@dxos/react-ui";
+var useColumnResizing = ({ columns, onColumnResize }) => {
+  const [columnsInitialised, setColumnsInitialised] = useState3(false);
+  const [columnSizing, setColumnSizing] = useState3({});
+  useEffect(() => {
+    if (columnsInitialised) {
+      return;
+    }
+    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
+      state[column.prop] = column.size;
+      return state;
+    }, {}));
+    setColumnsInitialised(true);
+  }, [
+    columns,
+    setColumnSizing
+  ]);
+  const [columnSizingInfo, setColumnSizingInfo] = useState3({});
+  const notifyColumnResize = useCallback2(() => onColumnResize?.(columnSizing), [
+    onColumnResize,
+    columnSizing
+  ]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
+  return {
+    columnSizing,
+    columnSizingInfo,
+    setColumnSizing,
+    setColumnSizingInfo
+  };
+};
+
 // packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 var useColumnSorting = (column) => {
-  const [sortDirection, setSortDirection] = useState3(column.getIsSorted());
-  const [firstSort, setFirstSort] = useState3();
+  const [sortDirection, setSortDirection] = useState4(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState4();
   const canSort = column.getCanSort();
   const updateColumnSort = (direction) => {
     setSortDirection(direction);
@@ -280,57 +332,109 @@ var useColumnSorting = (column) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
-import { useEffect, useState as useState4 } from "react";
-var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState4();
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
+var usePinLastRow = (pinLastRow, table, data) => {
+  const { scrollContextRef } = useTableRootContext();
+  const [pinnedRowKey, setPinnedRowKey] = useState5();
+  const scrollToBottom = useCallback3(() => {
+    const element = scrollContextRef.current;
+    const scrollHeight = element?.scrollHeight;
+    if (element && scrollHeight) {
+      requestAnimationFrame(() => element.scrollTo({
+        top: scrollHeight
+      }));
     }
+  }, []);
+  const pinRow = useCallback3((rowToPin) => {
+    table.resetRowPinning();
+    rowToPin.pin("bottom");
+    setPinnedRowKey(rowToPin.id);
+  }, [
+    table
+  ]);
+  const clearRowPinning = useCallback3(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(void 0);
+  }, [
+    table
+  ]);
+  const pinLastRowCallback = useCallback3(() => {
     const rows = table.getRowModel().rows;
-    const rowToPin = rows[rows.length - 1];
-    const rowId = rowToPin.id;
-    if (rowId === pinnedRowKey) {
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
       return;
     }
-    table.resetRowPinning();
-    rowToPin.pin("bottom");
-    const scrollElement = getScrollElement?.();
-    const isFirstRender = pinnedRowKey === void 0;
-    if (scrollElement && !isFirstRender) {
-      requestAnimationFrame(() => {
-        scrollElement.scrollTo({
-          top: scrollElement.scrollHeight
-        });
-      });
+    pinRow(lastRow);
+    if (pinnedRowKey !== void 0) {
+      scrollToBottom();
     }
-    setPinnedRowKey(rowId);
   }, [
-    pinLastRow,
     table,
-    getScrollElement,
-    pinnedRowKey,
-    setPinnedRowKey,
-    data
+    scrollToBottom,
+    pinnedRowKey
+  ]);
+  useEffect2(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [
+    data,
+    pinLastRow,
+    pinLastRowCallback
   ]);
 };
 
+// packages/ui/react-ui-table/src/hooks/useRowSelection.ts
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback as useCallback4 } from "react";
+var useRowSelection = (props) => {
+  const [rowSelection = {}, setRowSelection] = useControllableState({
+    prop: props.rowSelection,
+    onChange: props.onRowSelectionChange,
+    defaultProp: props.defaultRowSelection
+  });
+  const handleRowSelectionChange = useCallback4((updaterOrValue) => {
+    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
+    if (props.rowsSelectable === "multi") {
+      setRowSelection(nextRowSelection);
+    } else if (props.rowsSelectable) {
+      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+      setRowSelection(nextRowSelectionKey ? {
+        [nextRowSelectionKey]: true
+      } : {});
+    } else {
+      setRowSelection({});
+    }
+  }, [
+    props.rowsSelectable,
+    setRowSelection,
+    rowSelection
+  ]);
+  return {
+    rowSelection,
+    handleRowSelectionChange
+  };
+};
+
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
 var ColumnMenu = ({ column, ...props }) => {
   const title = column.label?.length ? column.label : column.id;
   const header = props.context.header;
   const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
   const columnSettingsAnchorRef = useRef2(null);
-  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState5(false);
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState6(false);
   const shouldPreventFocusOnClose = useRef2(false);
-  const onOpenColumnSettings = useCallback2(() => {
+  const onOpenColumnSettings = useCallback5(() => {
     shouldPreventFocusOnClose.current = true;
     setIsColumnSettingsOpen(true);
   }, [
     shouldPreventFocusOnClose,
     setIsColumnSettingsOpen
   ]);
-  const onDropdownCloseAutoFocus = useCallback2((event) => {
+  const onDropdownCloseAutoFocus = useCallback5((event) => {
     if (shouldPreventFocusOnClose.current) {
       event.preventDefault();
       shouldPreventFocusOnClose.current = false;
@@ -363,7 +467,7 @@ var ColumnMenu = ({ column, ...props }) => {
     variant: "ghost"
   }, /* @__PURE__ */ React3.createElement(CaretDown2, {
     className: getSize3(4)
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
     onCloseAutoFocus: onDropdownCloseAutoFocus,
     sideOffset: 4,
     collisionPadding: 8
@@ -399,7 +503,7 @@ var ColumnMenu = ({ column, ...props }) => {
     className: "opacity-50"
   }, /* @__PURE__ */ React3.createElement(GearSix, {
     className: mx3(getSize3(4), "rotate-90")
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
@@ -441,17 +545,16 @@ var SortIndicator = ({ direction, onClick }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Slot } from "@radix-ui/react-slot";
 import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React9, { Fragment, useCallback as useCallback3, useEffect as useEffect2, useState as useState6 } from "react";
-import { log } from "@dxos/log";
-import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
+import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
-import React6 from "react";
+import React6, { useContext as useContext2 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import React4, { useContext, createContext } from "react";
@@ -466,6 +569,35 @@ var useTableContext = () => {
   return context;
 };
 
+// packages/ui/react-ui-table/src/components/Table/TableRootContext.ts
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { createContext as createContext2, useRef as useRef3, useState as useState7 } from "react";
+var useTableRootContext = () => {
+  const scrollContextRef = useRef3(null);
+  const [tableCount, setTableCount] = useState7(0);
+  const virtualizer = useVirtualizer({
+    getScrollElement: () => scrollContextRef?.current ?? null,
+    count: tableCount,
+    overscan: 8,
+    estimateSize: () => 40
+  });
+  const dispatch = (action) => {
+    switch (action.type) {
+      case "updateTableCount":
+        setTableCount(action.count);
+        break;
+      default:
+        break;
+    }
+  };
+  return {
+    scrollContextRef,
+    virtualizer,
+    dispatch
+  };
+};
+var TableRootContext = createContext2({});
+
 // packages/ui/react-ui-table/src/theme.ts
 import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx4 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
@@ -530,6 +662,7 @@ var TableBody = ({ rows }) => {
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
+  const { virtualizer } = useContext2(TableRootContext);
   return /* @__PURE__ */ React6.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
@@ -541,6 +674,8 @@ var TableBody = ({ rows }) => {
     return /* @__PURE__ */ React6.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: classNames,
+      "data-index": row.index,
+      ref: virtualizer.measureElement,
       ...isCurrent && {
         "aria-current": "location"
       },
@@ -638,57 +773,49 @@ var TableHead = (_props) => {
 TableHead.displayName = TABLE_HEAD_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
-var Table = (props) => {
-  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement, pinLastRow } = props;
+var TableRoot = ({ children }) => {
+  const contextValue = useTableRootContext();
+  return /* @__PURE__ */ React9.createElement(TableRootContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var TableViewport = ({ children, classNames, asChild, ...props }) => {
+  const { scrollContextRef } = useContext3(TableRootContext);
+  const classes = mx5(classNames);
+  return asChild ? /* @__PURE__ */ React9.createElement(Slot, {
+    ref: scrollContextRef,
+    ...props
+  }, children) : /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: classes,
+    ref: scrollContextRef,
+    ...props
+  }, children);
+};
+var TablePrimitive = (props) => {
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, pinLastRow } = props;
   const columns = useDefaultValue(props.columns, []);
-  const data = useDefaultValue(props.data, []);
-  const TableProvider2 = TableProvider;
-  const [columnsInitialised, setColumnsInitialised] = useState6(false);
-  const [columnSizing, setColumnSizing] = useState6({});
-  useEffect2(() => {
-    if (columnsInitialised) {
-      return;
-    }
-    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
-      state[column.prop] = column.size;
-      return state;
-    }, {}));
-    setColumnsInitialised(true);
-  }, [
-    columns,
-    setColumnSizing
+  const incomingData = useDefaultValue(props.data, []);
+  const [data, setData] = useState8([
+    ...incomingData
   ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState6({});
-  const notifyColumnResize = useCallback3(() => onColumnResize?.(columnSizing), [
-    onColumnResize,
-    columnSizing
+  const forceUpdate = useCallback6(() => setData([
+    ...incomingData
+  ]), [
+    incomingData
   ]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection
-  });
-  const handleRowSelectionChange = useCallback3((updaterOrValue) => {
-    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
-    if (rowsSelectable === "multi") {
-      setRowSelection(nextRowSelection);
-    } else if (rowsSelectable) {
-      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-      setRowSelection(nextRowSelectionKey ? {
-        [nextRowSelectionKey]: true
-      } : {});
-    } else {
-      setRowSelection({});
-    }
-  }, [
-    rowsSelectable,
-    setRowSelection,
-    rowSelection
+  useEffect3(() => forceUpdate(), [
+    JSON.stringify(incomingData),
+    forceUpdate
   ]);
-  const [grouping, handleGroupingChange] = useState6(props.grouping ?? []);
-  useEffect2(() => handleGroupingChange(props.grouping ?? []), [
+  const TableProvider2 = TableProvider;
+  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
+    columns,
+    onColumnResize
+  });
+  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
+  const [grouping, handleGroupingChange] = useState8(props.grouping ?? []);
+  useEffect3(() => handleGroupingChange(props.grouping ?? []), [
     handleGroupingChange,
     props.grouping
   ]);
@@ -730,23 +857,15 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect2(() => {
+  useEffect3(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
     rowSelection,
     table
   ]);
-  usePinLastRow(pinLastRow, table, data, getScrollElement);
+  usePinLastRow(pinLastRow, table, data);
   const expand = false;
-  if (!getScrollElement) {
-    log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
-      F: __dxlog_file,
-      L: 159,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
   return /* @__PURE__ */ React9.createElement(TableProvider2, {
     ...props,
     table,
@@ -755,26 +874,19 @@ var Table = (props) => {
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React9.createElement(TableImpl, {
     debug: false,
-    getScrollElement,
     ...props
   }));
 };
 var TableImpl = (props) => {
-  const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
+  const { debug, classNames, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext();
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-  const rows = [
-    ...centerRows,
-    ...bottomRows
-  ];
   if (debug) {
     return /* @__PURE__ */ React9.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
     }, /* @__PURE__ */ React9.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
-  const virtualisable = getScrollElement !== void 0;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+  const TableComponent = isResizingColumn ? MemoizedVirtualisedTableContent : VirtualizedTableContent;
   return /* @__PURE__ */ React9.createElement("table", {
     role,
     className: tableRoot(props, classNames),
@@ -783,24 +895,26 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? virtualisable ? isResizingColumn ? /* @__PURE__ */ React9.createElement(MemoizedVirtualisedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(VirtualizedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(TableBody, {
-    rows
-  }) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
+  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React9.createElement(TableComponent, null) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
 };
-var VirtualizedTableContent = ({ getScrollElement }) => {
+var VirtualizedTableContent = () => {
   const { table } = useTableContext();
+  const { virtualizer, dispatch } = useContext3(TableRootContext);
   const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: centerRows.length,
-    overscan: 8,
-    estimateSize: () => 40
-  });
+  let pinnedRows = [];
+  useEffect3(() => {
+    dispatch({
+      type: "updateTableCount",
+      count: centerRows.length
+    });
+  }, [
+    centerRows.length
+  ]);
+  try {
+    pinnedRows = table.getBottomRows();
+  } catch (_) {
+  }
+  const { getTotalSize, getVirtualItems } = virtualizer;
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
@@ -808,8 +922,8 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const rowsToRender = [
     ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
     ...pinnedRows
-  ];
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
+  ].filter((r) => !!r);
+  return /* @__PURE__ */ React9.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
     role: "none"
   }, /* @__PURE__ */ React9.createElement("tr", {
     role: "none"
@@ -846,6 +960,11 @@ var GroupedTableContent = () => {
     }));
   }));
 };
+var Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport
+};
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
@@ -853,11 +972,11 @@ import { Check as Check2, ClipboardText, X as X3 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React10, { useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
-import { log as log2 } from "@dxos/log";
+import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
+import { log } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx5 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
+import { getSize as getSize4, mx as mx6 } from "@dxos/react-ui-theme";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
@@ -871,16 +990,19 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState7(() => {
-    if (initialValue?.content) {
-      return initialValue?.content;
-    }
-    return initialValue;
-  });
+  const getInitialValue = useCallback7(() => {
+    return initialValue?.content ?? initialValue;
+  }, [
+    initialValue
+  ]);
+  const [value, setValue] = useState9(getInitialValue);
+  useEffect4(() => setValue(getInitialValue()), [
+    getInitialValue
+  ]);
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
     if (value !== initialValue) {
@@ -917,10 +1039,10 @@ var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleStri
 var NumberBuilderCell = (cellContext) => {
   const { onUpdate, digits } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  const [text, setText] = useState7(displayNumber(value, digits));
+  const [text, setText] = useState9(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef3(null);
-  useEffect3(() => {
+  const ref = useRef4(null);
+  useEffect4(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
     digits,
@@ -1007,7 +1129,7 @@ var ColumnBuilder = class {
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", classNames)
+          className: mx6("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -1038,7 +1160,7 @@ var ColumnBuilder = class {
           value = value.content;
         }
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", textPadding, classNames)
+          className: mx6("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -1092,14 +1214,14 @@ var ColumnBuilder = class {
             addSuffix: true
           }) : value.toISOString() : void 0;
           return /* @__PURE__ */ React10.createElement("div", {
-            className: mx5(textPadding, classNames)
+            className: mx6(textPadding, classNames)
           }, str);
         } catch (err) {
-          log2.info("formatError", {
+          log.info("formatError", {
             value
           }, {
-            F: __dxlog_file2,
-            L: 374,
+            F: __dxlog_file,
+            L: 376,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1231,11 +1353,11 @@ var ColumnBuilder = class {
         const value = cell.getValue();
         if (value) {
           return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+            className: mx6("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
           return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+            className: mx6("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1277,7 +1399,7 @@ var ColumnBuilder = class {
 };
 
 // packages/ui/react-ui-table/src/schema/schema.ts
-import { AST } from "@effect/schema";
+import * as AST from "@effect/schema/AST";
 var classifySchemaProperties = (schema) => {
   const recurse = (node, path, acc) => {
     const properties = AST.getPropertySignatures(node);
@@ -1404,6 +1526,8 @@ export {
   MemoizedVirtualisedTableContent,
   SortIndicator,
   Table,
+  TablePrimitive,
+  TableRootContext,
   createColumnBuilder,
   currentRow,
   flushPadding,
@@ -1426,7 +1550,10 @@ export {
   theadTh,
   theadTr,
   translations_default as translations,
+  useColumnResizing,
   useColumnSorting,
-  usePinLastRow
+  usePinLastRow,
+  useRowSelection,
+  useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map