@dxos/react-ui-table 0.4.9 → 0.4.10-main.05b9ab6

package/dist/lib/browser/index.mjs

@@ -1,40 +1,3 @@
-// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
-import { Check, Trash, X, GearSix } from "@phosphor-icons/react";
-import React2, { useRef, useState } from "react";
-import { Button as Button2, DensityProvider, Input, Popover, Select, Separator, useTranslation } from "@dxos/react-ui";
-import { getSize as getSize2, mx } from "@dxos/react-ui-theme";
-import { safeParseInt } from "@dxos/util";
-
-// packages/ui/react-ui-table/src/components/SortButton.tsx
-import { CaretUpDown, SortAscending, SortDescending } from "@phosphor-icons/react";
-import React from "react";
-import { Button } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
-var SortButton = ({ sortDirection, onClick }) => {
-  let icon;
-  const size = getSize(4);
-  switch (sortDirection) {
-    case "asc":
-      icon = /* @__PURE__ */ React.createElement(SortAscending, {
-        className: size
-      });
-      break;
-    case "desc":
-      icon = /* @__PURE__ */ React.createElement(SortDescending, {
-        className: size
-      });
-      break;
-    default:
-      icon = /* @__PURE__ */ React.createElement(CaretUpDown, {
-        className: size
-      });
-  }
-  return /* @__PURE__ */ React.createElement(Button, {
-    variant: "ghost",
-    onClick
-  }, icon);
-};
-
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
 var translations_default = [
@@ -58,47 +21,107 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
-var ColumnMenu = ({ column, ...props }) => {
-  const title = column.label?.length ? column.label : column.id;
-  const header = props.context.header;
-  const canSort = header.column.getCanSort();
-  const sortDirection = header.column.getIsSorted();
-  const toggleSort = header.column.getToggleSortingHandler();
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex-1 min-is-0 truncate",
-    title
-  }, title), /* @__PURE__ */ React2.createElement("div", {
-    className: "flex gap-0"
-  }, canSort && toggleSort && /* @__PURE__ */ React2.createElement(SortButton, {
-    sortDirection,
-    onClick: toggleSort
-  }), /* @__PURE__ */ React2.createElement(ColumnPanel, {
-    ...props,
-    column
-  })));
+// packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
+import { CaretDown } from "@phosphor-icons/react";
+import React, { useCallback, useState } from "react";
+import { Popover, useTranslation } from "@dxos/react-ui";
+import { PopoverCombobox } from "@dxos/react-ui-searchlist";
+import { descriptionText, getSize, mx, staticPlaceholderText } from "@dxos/react-ui-theme";
+var initialItems = (model, value) => value ? {
+  [model.getId(value)]: {
+    label: model.getText(value),
+    data: value
+  }
+} : {};
+var CellCombobox = ({ model, value, onValueChange }) => {
+  const { t } = useTranslation(translationKey);
+  const [items, setItems] = useState(initialItems(model, value));
+  const [loading, setLoading] = useState(false);
+  const [searchInputValue, setSearchInputValue] = useState("");
+  const handleSearchInputValueChange = async (text) => {
+    setSearchInputValue(text ?? "");
+    setLoading(true);
+    const items2 = await model.query(text);
+    setItems(items2.reduce((acc, item) => {
+      acc[model.getId(item)] = {
+        label: model.getText(item),
+        data: item
+      };
+      return acc;
+    }, initialItems(model, value)));
+    setLoading(false);
+  };
+  const handleValueChange = useCallback((id) => {
+    onValueChange(items[id]?.data);
+  }, [
+    items,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React.createElement(PopoverCombobox.Root, {
+    placeholder: t("no selection label")
+  }, /* @__PURE__ */ React.createElement(PopoverCombobox.Trigger, {
+    variant: "ghost",
+    classNames: "is-full rounded-none ring-inset"
+  }, value ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+    className: mx("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+  }, model.getText(value)), /* @__PURE__ */ React.createElement(CaretDown, {
+    weight: "bold",
+    className: getSize(3)
+  })) : null), /* @__PURE__ */ React.createElement(PopoverCombobox.Content, {
+    shouldFilter: false,
+    classNames: "is-[--radix-popover-trigger-width]"
+  }, /* @__PURE__ */ React.createElement(PopoverCombobox.Input, {
+    value: searchInputValue,
+    onValueChange: handleSearchInputValueChange
+  }), /* @__PURE__ */ React.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React.createElement("p", {
+    className: mx("text-center", descriptionText)
+  }, "Start typing to search") : loading ? /* @__PURE__ */ React.createElement("p", {
+    className: mx("text-center", descriptionText)
+  }, "Searching\u2026") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PopoverCombobox.Empty, {
+    classNames: [
+      "text-center",
+      descriptionText
+    ]
+  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React.createElement(PopoverCombobox.Item, {
+    key: id,
+    value: id,
+    onSelect: handleValueChange,
+    classNames: "truncate"
+  }, label)))), /* @__PURE__ */ React.createElement(Popover.Arrow, null)));
 };
+
+// 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 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";
+
+// packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx
+import { Check, Trash, X } from "@phosphor-icons/react";
+import React2, { useRef, useState as useState2 } from "react";
+import { Button, Input, Select, Separator, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
+import { safeParseInt } from "@dxos/util";
 var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
-  className: mx("p-2", className)
+  className: mx2("p-2", className)
 }, children);
-var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete }) => {
-  const [open, setOpen] = useState(false);
-  const [prop, setProp] = useState(column.id);
-  const [refTable, setRefTable] = useState(column.refTable);
-  const [refProp, setRefProp] = useState(column.refProp);
-  const [type, setType] = useState(String(column.type));
-  const [label, setLabel] = useState(column.label);
-  const [digits, setDigits] = useState(String(column.digits ?? "0"));
+var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose }) => {
+  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 } = useTranslation(translationKey);
+  const { t } = useTranslation2(translationKey);
   const handleCancel = () => {
-    setProp(column.id);
-    setOpen(false);
+    onClose?.();
   };
   const handleSave = () => {
+    const { prop, refTable, refProp, type, label, digits } = formState;
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
       propRef.current?.focus();
       return;
@@ -110,7 +133,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
         return;
       }
     }
-    onUpdate?.(prop, {
+    onUpdate?.(column.id, {
       id: prop,
       prop,
       label,
@@ -119,43 +142,38 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
       refProp,
       digits: safeParseInt(digits)
     });
-    setOpen(false);
+    onClose?.();
   };
-  return /* @__PURE__ */ React2.createElement(Popover.Root, {
-    open,
-    onOpenChange: (nextOpen) => setOpen(nextOpen)
-  }, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost"
-  }, /* @__PURE__ */ React2.createElement(GearSix, {
-    className: mx(getSize2(4), "rotate-90")
-  }))), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, null, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-    classNames: "w-60"
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-col gap-1"
   }, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     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"
@@ -164,41 +182,50 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     "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"
-  }, /* @__PURE__ */ React2.createElement(Button2, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
@@ -206,7 +233,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     className: "grow"
   }), /* @__PURE__ */ React2.createElement(Check, {
     className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button2, {
+  })), /* @__PURE__ */ React2.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: handleCancel
   }, /* @__PURE__ */ React2.createElement("span", null, t("cancel label", {
@@ -215,34 +242,325 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     className: "grow"
   }), /* @__PURE__ */ React2.createElement(X, {
     className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button2, {
+  })), /* @__PURE__ */ React2.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: () => onDelete?.(column.id)
   }, /* @__PURE__ */ React2.createElement("span", null, t("delete label")), /* @__PURE__ */ React2.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React2.createElement(Trash, {
     className: getSize2(5)
-  })))))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
+  }))));
 };
 
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
+// 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 useState4 } from "react";
+var useColumnSorting = (column) => {
+  const [sortDirection, setSortDirection] = useState4(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState4();
+  const canSort = column.getCanSort();
+  const updateColumnSort = (direction) => {
+    setSortDirection(direction);
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case "asc":
+        column.toggleSorting(false);
+        break;
+      case "desc":
+        column.toggleSorting(true);
+        break;
+    }
+  };
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === "asc" ? "desc" : "asc");
+    } else {
+      updateColumnSort(false);
+    }
+  };
+  const onSelectSort = (direction) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+  return {
+    canSort,
+    sortDirection,
+    onSelectSort,
+    onToggleSort,
+    onClearSort
+  };
+};
+
+// packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
+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;
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
+      return;
+    }
+    pinRow(lastRow);
+    if (pinnedRowKey !== void 0) {
+      scrollToBottom();
+    }
+  }, [
+    table,
+    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] = useState6(false);
+  const shouldPreventFocusOnClose = useRef2(false);
+  const onOpenColumnSettings = useCallback5(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [
+    shouldPreventFocusOnClose,
+    setIsColumnSettingsOpen
+  ]);
+  const onDropdownCloseAutoFocus = useCallback5((event) => {
+    if (shouldPreventFocusOnClose.current) {
+      event.preventDefault();
+      shouldPreventFocusOnClose.current = false;
+    }
+  }, [
+    shouldPreventFocusOnClose
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center justify-center justify-between"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center gap-1 truncate",
+    title
+  }, /* @__PURE__ */ React3.createElement(SortIndicator, {
+    direction: sortDirection,
+    onClick: onToggleSort
+  }), /* @__PURE__ */ React3.createElement("div", {
+    className: "truncate"
+  }, title)), /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ React3.createElement(Popover2.Root, {
+    open: isColumnSettingsOpen,
+    onOpenChange: setIsColumnSettingsOpen,
+    modal: false
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+    ref: columnSettingsAnchorRef,
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Popover2.Anchor, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost"
+  }, /* @__PURE__ */ React3.createElement(CaretDown2, {
+    className: getSize3(4)
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+    onCloseAutoFocus: onDropdownCloseAutoFocus,
+    sideOffset: 4,
+    collisionPadding: 8
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: () => onSelectSort("asc")
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "grow"
+  }, "Sort ascending"), /* @__PURE__ */ React3.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React3.createElement(ArrowUp, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: () => onSelectSort("desc")
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "grow"
+  }, "Sort descending"), /* @__PURE__ */ React3.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React3.createElement(ArrowDown, {
+    className: getSize3(4)
+  }))), sortDirection !== false && /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: onClearSort
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "grow"
+  }, "Clear sort"), /* @__PURE__ */ React3.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React3.createElement(X2, {
+    className: getSize3(4)
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: onOpenColumnSettings
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "grow"
+  }, "Column settings"), /* @__PURE__ */ React3.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React3.createElement(GearSix, {
+    className: mx3(getSize3(4), "rotate-90")
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
+    ...props,
+    column,
+    onClose: () => setIsColumnSettingsOpen(false)
+  }))));
+};
+var ColumnSettingsPanel = ({ tableDefs, tableDef, column, onUpdate, onDelete, onClose }) => /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, null, /* @__PURE__ */ React3.createElement(Popover2.Viewport, {
+  classNames: "w-60"
+}, /* @__PURE__ */ React3.createElement(DensityProvider, {
+  density: "fine"
+}, /* @__PURE__ */ React3.createElement(ColumnSettingsForm, {
+  column,
+  tableDefs,
+  tableDef,
+  onUpdate,
+  onDelete,
+  onClose
+}))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)));
+var SortIndicator = ({ direction, onClick }) => {
+  if (direction === false) {
+    return null;
+  }
+  let icon;
+  switch (direction) {
+    case "asc":
+      icon = /* @__PURE__ */ React3.createElement(ArrowUp, {
+        className: getSize3(3)
+      });
+      break;
+    case "desc":
+      icon = /* @__PURE__ */ React3.createElement(ArrowDown, {
+        className: getSize3(3)
+      });
+      break;
+  }
+  return /* @__PURE__ */ React3.createElement("div", {
+    onClick,
+    className: "flex items-center cursor-pointer"
+  }, icon);
+};
+
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+import { Slot } from "@radix-ui/react-slot";
 import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React8, { Fragment, useCallback, useEffect, useState as useState2 } 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 React5 from "react";
+import React6, { useContext as useContext2 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
-import React3, { useContext, createContext } from "react";
+import React4, { useContext, createContext } from "react";
 var TableContext = /* @__PURE__ */ createContext({});
 var TableProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React4.createElement(TableContext.Provider, {
     value
   }, children);
 };
@@ -251,33 +569,62 @@ 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 mx2 } from "@dxos/react-ui-theme";
+import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx4 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 var flushPadding = "pli-0 plb-0";
 var textPadding = "pli-2 plb-0.5";
 var headPadding = "pli-2 plb-1";
 var gridCellFocusRing = "focus-within:z-[11] focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400";
-var tableRoot = ({ fullWidth }, ...etc) => mx2("table-fixed", fullWidth && "is-full", ...etc);
-var groupTh = (_props, ...etc) => mx2("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...etc);
-var theadTr = (_props, ...etc) => mx2("group", ...etc);
-var theadTh = ({ border }, ...etc) => mx2("relative", "text-start font-medium select-none truncate", headPadding, border && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
+var tableRoot = ({ fullWidth }, ...etc) => mx4("table-fixed", fullWidth && "is-full", ...etc);
+var groupTh = (_props, ...etc) => mx4("text-start font-medium", flushPadding, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx4(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...etc);
+var theadTr = (_props, ...etc) => mx4("group", ...etc);
+var theadTh = ({ border }, ...etc) => mx4("relative", "text-start font-medium select-none truncate", headPadding, border && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
 var theadResizeRoot = ({ isResizing }) => {
-  return mx2("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
+  return mx4("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
 };
-var tbodyRoot = (_props, ...etc) => mx2(...etc);
-var tbodyTr = ({ canBeCurrent }, ...etc) => mx2("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", ...etc);
-var tdRoot = ({ border, isGrid }, ...etc) => mx2("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
-var tdContent = (_props, ...etc) => mx2(...etc);
-var tfootRoot = (_props, ...etc) => mx2("sticky block-end-0 z-10", modalSurface, ...etc);
-var tfootTr = (_props, ...etc) => mx2(...etc);
-var tfootTh = ({ border }, ...etc) => mx2(textPadding, modalSurface, border && groupBorder, ...etc);
+var tbodyRoot = (_props, ...etc) => mx4(...etc);
+var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => mx4("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", isPinned && "sticky z-1 bottom-[-1px] base-surface", ...etc);
+var tdRoot = ({ border, isGrid }, ...etc) => mx4("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+var tdContent = (_props, ...etc) => mx4(...etc);
+var tfootRoot = (_props, ...etc) => mx4("sticky block-end-0 z-10", modalSurface, ...etc);
+var tfootTr = (_props, ...etc) => mx4(...etc);
+var tfootTh = ({ border }, ...etc) => mx4(textPadding, modalSurface, border && groupBorder, ...etc);
 
 // packages/ui/react-ui-table/src/components/Cell/Cell.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React4 from "react";
+import React5 from "react";
 var CELL_NAME = "Cell";
 var FocusableCell = ({ cell, children }) => {
   const tableContext = useTableContext();
@@ -285,7 +632,7 @@ var FocusableCell = ({ cell, children }) => {
     tabBehavior: "limited"
   });
   const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
-  return /* @__PURE__ */ React4.createElement("td", {
+  return /* @__PURE__ */ React5.createElement("td", {
     tabIndex: 0,
     ...domAttributes,
     className
@@ -293,14 +640,14 @@ var FocusableCell = ({ cell, children }) => {
 };
 var StaticCell = ({ cell, children }) => {
   const tableContext = useTableContext();
-  return /* @__PURE__ */ React4.createElement("td", {
+  return /* @__PURE__ */ React5.createElement("td", {
     className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
   }, children);
 };
 var Cell = ({ cell, children }) => {
   const { isGrid } = useTableContext();
   const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ React4.createElement(Root, {
+  return /* @__PURE__ */ React5.createElement(Root, {
     cell
   }, children);
 };
@@ -315,14 +662,20 @@ var TableBody = ({ rows }) => {
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
-  return /* @__PURE__ */ React5.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
+  const { virtualizer } = useContext2(TableRootContext);
+  return /* @__PURE__ */ React6.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
-    return /* @__PURE__ */ React5.createElement("tr", {
+    const isPinned = row.getIsPinned();
+    const classNames = tbodyTr({
+      canBeCurrent,
+      isPinned: isPinned !== false
+    });
+    return /* @__PURE__ */ React6.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
-      className: tbodyTr({
-        canBeCurrent
-      }),
+      className: classNames,
+      "data-index": row.index,
+      ref: virtualizer.measureElement,
       ...isCurrent && {
         "aria-current": "location"
       },
@@ -340,57 +693,57 @@ var TableBody = ({ rows }) => {
           }
         }
       }
-    }, debug && /* @__PURE__ */ React5.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ React5.createElement(Cell, {
+    }, debug && /* @__PURE__ */ React6.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
+      return /* @__PURE__ */ React6.createElement(Cell, {
         key: cell.id,
         cell
       }, flexRender(cell.column.columnDef.cell, {
         className: "pli-2",
         ...cell.getContext()
       }));
-    }), expand && /* @__PURE__ */ React5.createElement("td", null));
+    }), expand && /* @__PURE__ */ React6.createElement("td", null));
   }));
 };
 TableBody.displayName = TABLE_BODY_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/TableFooter.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import React6 from "react";
+import React7 from "react";
 var TABLE_FOOT_NAME = "TableFooter";
 var TableFooter = (props) => {
   const tableContext = useTableContext();
   const { table, expand, debug } = tableContext;
   const footers = table.getFooterGroups();
-  return /* @__PURE__ */ React6.createElement("tfoot", {
+  return /* @__PURE__ */ React7.createElement("tfoot", {
     className: tfootRoot(props)
-  }, footers.map((footerGroup) => /* @__PURE__ */ React6.createElement("tr", {
+  }, footers.map((footerGroup) => /* @__PURE__ */ React7.createElement("tr", {
     key: footerGroup.id,
     className: tfootTr(tableContext)
-  }, debug && /* @__PURE__ */ React6.createElement("th", null), footerGroup.headers.map((footer) => {
-    return /* @__PURE__ */ React6.createElement("th", {
+  }, debug && /* @__PURE__ */ React7.createElement("th", null), footerGroup.headers.map((footer) => {
+    return /* @__PURE__ */ React7.createElement("th", {
       key: footer.id,
       className: tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)
     }, footer.isPlaceholder ? null : flexRender2(footer.column.columnDef.footer, footer.getContext()));
-  }), expand && /* @__PURE__ */ React6.createElement("th", null))));
+  }), expand && /* @__PURE__ */ React7.createElement("th", null))));
 };
 TableFooter.displayName = TABLE_FOOT_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/TableHead.tsx
 import { flexRender as flexRender3 } from "@tanstack/react-table";
-import React7 from "react";
+import React8 from "react";
 var TABLE_HEAD_NAME = "TableHeader";
 var TableHead = (_props) => {
   const tableContext = useTableContext();
   const headerGroups = tableContext.table.getHeaderGroups();
-  return /* @__PURE__ */ React7.createElement("thead", {
+  return /* @__PURE__ */ React8.createElement("thead", {
     className: theadRoot(tableContext)
   }, headerGroups.map((headerGroup) => {
     return (
       // Group element to hover resize handles.
-      /* @__PURE__ */ React7.createElement("tr", {
+      /* @__PURE__ */ React8.createElement("tr", {
         key: headerGroup.id,
         className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ React7.createElement("th", {
+      }, tableContext.debug && /* @__PURE__ */ React8.createElement("th", {
         className: "font-mono",
         style: {
           width: 32
@@ -399,13 +752,13 @@ var TableHead = (_props) => {
         const isResizing = header.column.getIsResizing();
         const onResize = header.getResizeHandler();
         const resizable = header.column.columnDef.meta?.resizable;
-        return /* @__PURE__ */ React7.createElement("th", {
+        return /* @__PURE__ */ React8.createElement("th", {
           key: header.id,
           style: {
             width: header.getSize()
           },
           className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)
-        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React7.createElement("div", {
+        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React8.createElement("div", {
           className: theadResizeRoot({
             isResizing
           }),
@@ -413,64 +766,56 @@ var TableHead = (_props) => {
           onMouseDown: onResize,
           onTouchStart: onResize
         }));
-      }), tableContext.expand && /* @__PURE__ */ React7.createElement("th", null))
+      }), tableContext.expand && /* @__PURE__ */ React8.createElement("th", null))
     );
   }));
 };
 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] = useState2(false);
-  const [columnSizing, setColumnSizing] = useState2({});
-  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 incomingData = useDefaultValue(props.data, []);
+  const [data, setData] = useState8([
+    ...incomingData
   ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState2({});
-  const notifyColumnResize = useCallback(() => 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 = useCallback((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] = useState2(props.grouping ?? []);
-  useEffect(() => 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
   ]);
@@ -512,63 +857,37 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect(() => {
+  useEffect3(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
     rowSelection,
     table
   ]);
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-    table.resetRowPinning();
-    const rows = table.getRowModel().rows;
-    rows[rows.length - 1].pin("bottom");
-  }, [
-    pinLastRow,
-    table,
-    data
-  ]);
+  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: 168,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-  return /* @__PURE__ */ React8.createElement(TableProvider2, {
+  return /* @__PURE__ */ React9.createElement(TableProvider2, {
     ...props,
     table,
     header,
     expand,
     isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React8.createElement(TableImpl, {
+  }, /* @__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__ */ React8.createElement("pre", {
+    return /* @__PURE__ */ React9.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ React8.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
+    }, /* @__PURE__ */ React9.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
-  const virtualisable = getScrollElement !== void 0;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-  return /* @__PURE__ */ React8.createElement("table", {
+  const TableComponent = isResizingColumn ? MemoizedVirtualisedTableContent : VirtualizedTableContent;
+  return /* @__PURE__ */ React9.createElement("table", {
     role,
     className: tableRoot(props, classNames),
     ...!fullWidth && {
@@ -576,150 +895,88 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React8.createElement(TableHead, null), grouping?.length !== 0 ? virtualisable ? isResizingColumn ? /* @__PURE__ */ React8.createElement(MemoizedVirtualisedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React8.createElement(VirtualizedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React8.createElement(TableBody, {
-    rows
-  }) : /* @__PURE__ */ React8.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React8.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 rows = [
-    ...centerRows,
-    ...pinnedRows
-  ];
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: rows.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;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React8.createElement("tbody", {
+  const rowsToRender = [
+    ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
+    ...pinnedRows
+  ].filter((r) => !!r);
+  return /* @__PURE__ */ React9.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
+  }, /* @__PURE__ */ React9.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
+  }, /* @__PURE__ */ React9.createElement("td", {
     style: {
       height: `${paddingTop}px`
     },
     role: "none"
-  }))), /* @__PURE__ */ React8.createElement(TableBody, {
-    rows: virtualRows.map((virtualRow) => rows[virtualRow.index])
-  }), paddingBottom > 0 && /* @__PURE__ */ React8.createElement("tbody", {
+  }))), /* @__PURE__ */ React9.createElement(TableBody, {
+    rows: rowsToRender
+  }), paddingBottom > 0 && /* @__PURE__ */ React9.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
+  }, /* @__PURE__ */ React9.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
+  }, /* @__PURE__ */ React9.createElement("td", {
     style: {
       height: `${paddingBottom}px`
     },
     role: "none"
   }))));
 };
-var MemoizedVirtualisedTableContent = /* @__PURE__ */ React8.memo(VirtualizedTableContent);
+var MemoizedVirtualisedTableContent = /* @__PURE__ */ React9.memo(VirtualizedTableContent);
 var GroupedTableContent = () => {
   const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ React8.createElement(Fragment, {
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
+    return /* @__PURE__ */ React9.createElement(Fragment, {
       key: i
-    }, /* @__PURE__ */ React8.createElement("thead", null, /* @__PURE__ */ React8.createElement("tr", null, debug && /* @__PURE__ */ React8.createElement("th", null), /* @__PURE__ */ React8.createElement("th", {
+    }, /* @__PURE__ */ React9.createElement("thead", null, /* @__PURE__ */ React9.createElement("tr", null, debug && /* @__PURE__ */ React9.createElement("th", null), /* @__PURE__ */ React9.createElement("th", {
       // TODO(burdon): Calculate row span.
       colSpan: getHeaderGroups()[0].headers.length,
       className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React8.createElement(TableBody, {
+    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React9.createElement(TableBody, {
       rows: row.subRows
     }));
   }));
 };
-
-// packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
-import { CaretDown } from "@phosphor-icons/react";
-import React9, { useCallback as useCallback2, useState as useState3 } from "react";
-import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { PopoverCombobox } from "@dxos/react-ui-searchlist";
-import { descriptionText, getSize as getSize3, mx as mx3, staticPlaceholderText } from "@dxos/react-ui-theme";
-var initialItems = (model, value) => value ? {
-  [model.getId(value)]: {
-    label: model.getText(value),
-    data: value
-  }
-} : {};
-var CellCombobox = ({ model, value, onValueChange }) => {
-  const { t } = useTranslation2(translationKey);
-  const [items, setItems] = useState3(initialItems(model, value));
-  const [loading, setLoading] = useState3(false);
-  const [searchInputValue, setSearchInputValue] = useState3("");
-  const handleSearchInputValueChange = async (text) => {
-    setSearchInputValue(text ?? "");
-    setLoading(true);
-    const items2 = await model.query(text);
-    setItems(items2.reduce((acc, item) => {
-      acc[model.getId(item)] = {
-        label: model.getText(item),
-        data: item
-      };
-      return acc;
-    }, initialItems(model, value)));
-    setLoading(false);
-  };
-  const handleValueChange = useCallback2((id) => {
-    onValueChange(items[id]?.data);
-  }, [
-    items,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React9.createElement(PopoverCombobox.Root, {
-    placeholder: t("no selection label")
-  }, /* @__PURE__ */ React9.createElement(PopoverCombobox.Trigger, {
-    variant: "ghost",
-    classNames: "is-full rounded-none ring-inset"
-  }, value ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", {
-    className: mx3("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React9.createElement(CaretDown, {
-    weight: "bold",
-    className: getSize3(3)
-  })) : null), /* @__PURE__ */ React9.createElement(PopoverCombobox.Content, {
-    shouldFilter: false,
-    classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ React9.createElement(PopoverCombobox.Input, {
-    value: searchInputValue,
-    onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ React9.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(PopoverCombobox.Empty, {
-    classNames: [
-      "text-center",
-      descriptionText
-    ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React9.createElement(PopoverCombobox.Item, {
-    key: id,
-    value: id,
-    onSelect: handleValueChange,
-    classNames: "truncate"
-  }, label)))), /* @__PURE__ */ React9.createElement(Popover2.Arrow, null)));
+var Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport
 };
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
-import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
+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 useEffect2, useRef as useRef2, useState as useState4 } 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 mx4 } 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()
@@ -733,16 +990,19 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const ref = useRef2(null);
+  const ref = useRef4(null);
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState4(() => {
-    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) {
@@ -779,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] = useState4(displayNumber(value, digits));
+  const [text, setText] = useState9(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef2(null);
-  useEffect2(() => {
+  const ref = useRef4(null);
+  useEffect4(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
     digits,
@@ -869,7 +1129,7 @@ var ColumnBuilder = class {
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", classNames)
+          className: mx6("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -900,7 +1160,7 @@ var ColumnBuilder = class {
           value = value.content;
         }
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", textPadding, classNames)
+          className: mx6("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -929,7 +1189,6 @@ var ColumnBuilder = class {
         onUpdate,
         digits,
         header: {
-          classNames: "text-end",
           ...props.meta?.header
         },
         cell: {
@@ -955,14 +1214,14 @@ var ColumnBuilder = class {
             addSuffix: true
           }) : value.toISOString() : void 0;
           return /* @__PURE__ */ React10.createElement("div", {
-            className: mx4(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)
           });
@@ -1082,7 +1341,7 @@ var ColumnBuilder = class {
   */
   icon({ label, size, on, off, ...props } = {}) {
     const IconOn = on?.Icon ?? Check2;
-    const IconOff = off?.Icon ?? X2;
+    const IconOff = off?.Icon ?? X3;
     return {
       size: size ?? 32,
       // TODO(Zan): Implement sort algorithm
@@ -1094,11 +1353,11 @@ var ColumnBuilder = class {
         const value = cell.getValue();
         if (value) {
           return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx4("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: mx4("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;
@@ -1107,20 +1366,175 @@ var ColumnBuilder = class {
       ...props
     };
   }
+  /**
+  * This display column type is for nested/unhandled data to appear as JSON.
+  */
+  display({ label, classNames, ...props } = {}) {
+    return {
+      size: 120,
+      minSize: 120,
+      header: (cell) => label ?? cell.header.id,
+      cell: (cell) => {
+        const value = cell.getValue();
+        return /* @__PURE__ */ React10.createElement("div", {
+          className: "overflow-scroll"
+        }, /* @__PURE__ */ React10.createElement("code", {
+          className: "text-xs"
+        }, JSON.stringify(value)));
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames: [
+            "font-mono",
+            textPadding,
+            classNames
+          ]
+        }
+      }
+    };
+  }
+};
+
+// packages/ui/react-ui-table/src/schema/schema.ts
+import * as AST from "@effect/schema/AST";
+var classifySchemaProperties = (schema) => {
+  const recurse = (node, path, acc) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [
+            ...path,
+            propName
+          ], acc);
+        }
+      }
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [
+          ...path,
+          propName
+        ], acc);
+      } else {
+        acc.push([
+          path.concat(propName).join("."),
+          propertyToColumn(prop)
+        ]);
+      }
+    });
+    return acc;
+  };
+  return recurse(schema.ast, [], []);
+};
+var isStruct = (node) => AST.isTypeLiteral(node);
+var isOptionalUnion = (prop) => AST.isUnion(prop.type) && prop.isOptional;
+var unwrapOptionProperty = (prop) => {
+  if (!isOptionalUnion(prop)) {
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
+  }
+  if (!AST.isUnion(prop.type)) {
+    throw new Error(`Not a union type: ${String(prop.name)}`);
+  }
+  const [type, _undefinedCase] = prop.type.types;
+  return type;
+};
+var typeToColumn = (type) => {
+  if (AST.isStringKeyword(type)) {
+    return "string";
+  } else if (AST.isNumberKeyword(type)) {
+    return "number";
+  } else if (AST.isBooleanKeyword(type)) {
+    return "boolean";
+  }
+  if (AST.isRefinement(type)) {
+    return typeToColumn(type.from);
+  }
+  if (AST.isTransform(type)) {
+    const identifier = AST.getIdentifierAnnotation(type);
+    if (identifier._tag === "Some") {
+      if (identifier.value === "DateFromString") {
+        return "date";
+      }
+    }
+  }
+  return "display";
+};
+var propertyToColumn = (prop) => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
+  }
+  return typeToColumn(type);
+};
+
+// packages/ui/react-ui-table/src/schema/schemaToColumns.ts
+var schemaToColumnDefs = (schema) => {
+  const { helper, builder } = createColumnBuilder();
+  const classified = classifySchemaProperties(schema);
+  return classified.map(([name, type]) => {
+    const propertyKey = name.toString();
+    let column;
+    switch (type) {
+      case "string": {
+        column = builder.string({
+          label: propertyKey
+        });
+        break;
+      }
+      case "number": {
+        column = builder.number({
+          label: propertyKey
+        });
+        break;
+      }
+      case "boolean": {
+        column = builder.switch({
+          label: propertyKey
+        });
+        break;
+      }
+      case "date": {
+        column = builder.date({
+          label: propertyKey
+        });
+        break;
+      }
+      case "display": {
+        column = builder.display({
+          label: propertyKey,
+          id: propertyKey
+        });
+        break;
+      }
+      default: {
+        throw new Error(`Unhandled column type: ${type}`);
+      }
+    }
+    return helper.accessor(propertyKey, column);
+  });
 };
 export {
   CellCombobox,
   ColumnBuilder,
   ColumnMenu,
-  ColumnPanel,
+  ColumnSettingsForm,
+  ColumnSettingsPanel,
   MemoizedVirtualisedTableContent,
+  SortIndicator,
   Table,
+  TablePrimitive,
+  TableRootContext,
   createColumnBuilder,
   currentRow,
   flushPadding,
   gridCellFocusRing,
   groupTh,
   headPadding,
+  schemaToColumnDefs,
   selectedRow,
   tableRoot,
   tbodyRoot,
@@ -1135,6 +1549,11 @@ export {
   theadRoot,
   theadTh,
   theadTr,
-  translations_default as translations
+  translations_default as translations,
+  useColumnResizing,
+  useColumnSorting,
+  usePinLastRow,
+  useRowSelection,
+  useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map