@dxos/react-ui-table 0.4.8-next.fff1521 → 0.4.9-main.4fd47cd

package/dist/lib/browser/index.mjs

@@ -1,10 +1,40 @@
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
-import { Check, CaretDown, Trash, X } from "@phosphor-icons/react";
-import React, { useRef, useState } from "react";
-import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from "@dxos/react-ui";
-import { getSize, mx } from "@dxos/react-ui-theme";
+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 = [
@@ -31,19 +61,26 @@ 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;
-  return /* @__PURE__ */ React.createElement("div", {
+  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__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("div", {
     className: "flex-1 min-is-0 truncate",
     title
-  }, title), /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0"
-  }, /* @__PURE__ */ React.createElement(ColumnPanel, {
+  }, title), /* @__PURE__ */ React2.createElement("div", {
+    className: "flex gap-0"
+  }, canSort && toggleSort && /* @__PURE__ */ React2.createElement(SortButton, {
+    sortDirection,
+    onClick: toggleSort
+  }), /* @__PURE__ */ React2.createElement(ColumnPanel, {
     ...props,
     column
   })));
 };
-var Section = ({ children, className }) => /* @__PURE__ */ React.createElement("div", {
+var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
   className: mx("p-2", className)
 }, children);
@@ -84,124 +121,122 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     });
     setOpen(false);
   };
-  return /* @__PURE__ */ React.createElement(Popover.Root, {
+  return /* @__PURE__ */ React2.createElement(Popover.Root, {
     open,
     onOpenChange: (nextOpen) => setOpen(nextOpen)
-  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-1"
-  }, /* @__PURE__ */ React.createElement(CaretDown, {
-    className: getSize(4)
-  }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Popover.Viewport, {
+  }, /* @__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__ */ React.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
     density: "fine"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  }, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1"
-  }, t("column label label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: label ?? "",
     onChange: (event) => setLabel(event.target.value),
     autoFocus: true
-  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, t("property key label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, 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, ""))
-  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, t("column type label")), /* @__PURE__ */ React.createElement(Select.Root, {
+  }, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: type,
     onValueChange: setType
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, [
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, [
     "number",
     "boolean",
     "string",
     "ref"
-  ].map((type2) => /* @__PURE__ */ React.createElement(Select.Option, {
+  ].map((type2) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: type2,
     value: type2
-  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  }, 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, {
     classNames: "mbe-1 mbs-3"
-  }, t("digits label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     value: digits ?? "",
     onChange: (event) => setDigits(event.target.value)
-  })))), type === "ref" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  })))), type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Table"), /* @__PURE__ */ React.createElement(Select.Root, {
+  }, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: refTable,
     onValueChange: setRefTable
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__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__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  }, name ?? id))))))), refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Table property"), /* @__PURE__ */ React.createElement(Select.Root, {
+  }, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: refProp,
     onValueChange: setRefProp
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Property",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React.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 === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, label2 ?? id))))))))), /* @__PURE__ */ React.createElement(Separator, {
+  }, label2 ?? id))))))))), /* @__PURE__ */ React2.createElement(Separator, {
     classNames: "mli-2"
-  }), /* @__PURE__ */ React.createElement(Section, {
+  }), /* @__PURE__ */ React2.createElement(Section, {
     className: "space-b-1.5"
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button2, {
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
-  }, /* @__PURE__ */ React.createElement("span", null, t("save label")), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("span", null, t("save label")), /* @__PURE__ */ React2.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React.createElement(Check, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React.createElement(Button, {
+  }), /* @__PURE__ */ React2.createElement(Check, {
+    className: getSize2(5)
+  })), /* @__PURE__ */ React2.createElement(Button2, {
     classNames: "is-full flex gap-2",
     onClick: handleCancel
-  }, /* @__PURE__ */ React.createElement("span", null, t("cancel label", {
+  }, /* @__PURE__ */ React2.createElement("span", null, t("cancel label", {
     ns: "os"
-  })), /* @__PURE__ */ React.createElement("div", {
+  })), /* @__PURE__ */ React2.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React.createElement(X, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React.createElement(Button, {
+  }), /* @__PURE__ */ React2.createElement(X, {
+    className: getSize2(5)
+  })), /* @__PURE__ */ React2.createElement(Button2, {
     classNames: "is-full flex gap-2",
     onClick: () => onDelete?.(column.id)
-  }, /* @__PURE__ */ React.createElement("span", null, t("delete label")), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("span", null, t("delete label")), /* @__PURE__ */ React2.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React.createElement(Trash, {
-    className: getSize(5)
-  })))))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
+  }), /* @__PURE__ */ React2.createElement(Trash, {
+    className: getSize2(5)
+  })))))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { getCoreRowModel, useReactTable, getGroupedRowModel } from "@tanstack/react-table";
+import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React6, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
-import { debounce } from "@dxos/async";
+import React7, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
 import { log } from "@dxos/log";
-import { useDefaultValue } from "@dxos/react-ui";
+import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
-import React3 from "react";
+import React4 from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import { createContext } from "@radix-ui/react-context";
@@ -234,7 +269,7 @@ var tfootTh = ({ border }, ...etc) => mx2(textPadding, modalSurface, border && g
 
 // packages/ui/react-ui-table/src/components/Cell/Cell.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React2 from "react";
+import React3 from "react";
 var CELL_NAME = "Cell";
 var FocusableCell = ({ cell, children }) => {
   const tableContext = useTableContext(CELL_NAME);
@@ -242,7 +277,7 @@ var FocusableCell = ({ cell, children }) => {
     tabBehavior: "limited"
   });
   const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
-  return /* @__PURE__ */ React2.createElement("td", {
+  return /* @__PURE__ */ React3.createElement("td", {
     tabIndex: 0,
     ...domAttributes,
     className
@@ -250,14 +285,14 @@ var FocusableCell = ({ cell, children }) => {
 };
 var StaticCell = ({ cell, children }) => {
   const tableContext = useTableContext(CELL_NAME);
-  return /* @__PURE__ */ React2.createElement("td", {
+  return /* @__PURE__ */ React3.createElement("td", {
     className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
   }, children);
 };
 var Cell = ({ cell, children }) => {
   const { isGrid } = useTableContext(CELL_NAME);
   const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ React2.createElement(Root, {
+  return /* @__PURE__ */ React3.createElement(Root, {
     cell
   }, children);
 };
@@ -272,10 +307,10 @@ var TableBody = ({ rows }) => {
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
-  return /* @__PURE__ */ React3.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
+  return /* @__PURE__ */ React4.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
-    return /* @__PURE__ */ React3.createElement("tr", {
+    return /* @__PURE__ */ React4.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: tbodyTr({
         canBeCurrent
@@ -297,82 +332,83 @@ var TableBody = ({ rows }) => {
           }
         }
       }
-    }, debug && /* @__PURE__ */ React3.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ React3.createElement(Cell, {
+    }, debug && /* @__PURE__ */ React4.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
+      return /* @__PURE__ */ React4.createElement(Cell, {
         key: cell.id,
         cell
       }, flexRender(cell.column.columnDef.cell, {
         className: "pli-2",
         ...cell.getContext()
       }));
-    }), expand && /* @__PURE__ */ React3.createElement("td", null));
+    }), expand && /* @__PURE__ */ React4.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 React4 from "react";
+import React5 from "react";
 var TABLE_FOOT_NAME = "TableFooter";
 var TableFooter = (props) => {
   const tableContext = useTableContext(TABLE_FOOT_NAME);
   const { table, expand, debug } = tableContext;
   const footers = table.getFooterGroups();
-  return /* @__PURE__ */ React4.createElement("tfoot", {
+  return /* @__PURE__ */ React5.createElement("tfoot", {
     className: tfootRoot(props)
-  }, footers.map((footerGroup) => /* @__PURE__ */ React4.createElement("tr", {
+  }, footers.map((footerGroup) => /* @__PURE__ */ React5.createElement("tr", {
     key: footerGroup.id,
     className: tfootTr(tableContext)
-  }, debug && /* @__PURE__ */ React4.createElement("th", null), footerGroup.headers.map((footer) => {
-    return /* @__PURE__ */ React4.createElement("th", {
+  }, debug && /* @__PURE__ */ React5.createElement("th", null), footerGroup.headers.map((footer) => {
+    return /* @__PURE__ */ React5.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__ */ React4.createElement("th", null))));
+  }), expand && /* @__PURE__ */ React5.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 React5 from "react";
+import React6 from "react";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 var TABLE_HEAD_NAME = "TableHeader";
 var TableHead = (_props) => {
   const tableContext = useTableContext(TABLE_HEAD_NAME);
   const headerGroups = tableContext.table.getHeaderGroups();
   const state = tableContext.table.getState();
-  return /* @__PURE__ */ React5.createElement("thead", {
+  return /* @__PURE__ */ React6.createElement("thead", {
     className: theadRoot(tableContext)
   }, headerGroups.map((headerGroup) => {
     return (
       // Group element to hover resize handles.
-      /* @__PURE__ */ React5.createElement("tr", {
+      /* @__PURE__ */ React6.createElement("tr", {
         key: headerGroup.id,
         className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ React5.createElement("th", {
+      }, tableContext.debug && /* @__PURE__ */ React6.createElement("th", {
         className: "font-mono",
         style: {
           width: 32
         }
       }, "#"), headerGroup.headers.map((header) => {
         const isResizing = header.column.getIsResizing();
-        return /* @__PURE__ */ React5.createElement("th", {
+        const resizeHandler = header.getResizeHandler();
+        return /* @__PURE__ */ React6.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()), header.column.columnDef.meta?.resizable && /* @__PURE__ */ React5.createElement("div", {
+        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.resizable && /* @__PURE__ */ React6.createElement("div", {
           className: theadResizeRoot(tableContext, isResizing && "hidden"),
           style: {
             transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`
           },
-          onMouseDown: header.getResizeHandler(),
-          onTouchStart: header.getResizeHandler()
-        }, /* @__PURE__ */ React5.createElement("div", {
+          onMouseDown: resizeHandler,
+          onTouchStart: resizeHandler
+        }, /* @__PURE__ */ React6.createElement("div", {
           className: mx3(theadResizeThumb(tableContext))
         })));
-      }), tableContext.expand && /* @__PURE__ */ React5.createElement("th", null))
+      }), tableContext.expand && /* @__PURE__ */ React6.createElement("th", null))
     );
   }));
 };
@@ -381,21 +417,31 @@ 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 } = props;
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement, 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 [columnSizingInfo, setColumnSizingInfo] = useState2({});
+  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [
+    onColumnResize,
+    columnSizing
+  ]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
   const [rowSelection = {}, setRowSelection] = useControllableState({
     prop: props.rowSelection,
     onChange: props.onRowSelectionChange,
@@ -448,16 +494,19 @@ var Table = (props) => {
     onColumnSizingInfoChange: setColumnSizingInfo,
     // Rows
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     // Grouping
     getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : void 0,
     onGroupingChange: handleGroupingChange,
     enableMultiRowSelection: rowsSelectable === "multi" ? true : void 0,
     enableRowSelection: rowsSelectable === true ? true : void 0,
     onRowSelectionChange: handleRowSelectionChange,
+    enableSorting: true,
+    enableColumnPinning: true,
     // Debug
     debugTable: debug
   });
-  const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1e3);
   useEffect(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
@@ -466,31 +515,33 @@ var Table = (props) => {
     table
   ]);
   useEffect(() => {
-    const shouldTriggerResize = columnSizingInfo.columnSizingStart?.length === 0;
-    if (shouldTriggerResize) {
-      onColumnResizeDebounced?.(table.getState().columnSizing);
+    if (!pinLastRow) {
+      return;
     }
+    table.resetRowPinning();
+    const rows = table.getRowModel().rows;
+    rows[rows.length - 1].pin("bottom");
   }, [
-    columnSizingInfo,
-    onColumnResizeDebounced,
-    table
+    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: 148,
+      L: 168,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
-  return /* @__PURE__ */ React6.createElement(TableProvider2, {
+  return /* @__PURE__ */ React7.createElement(TableProvider2, {
     ...props,
     table,
     header,
     expand,
     isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React6.createElement(TableImpl, {
+  }, /* @__PURE__ */ React7.createElement(TableImpl, {
     debug: false,
     getScrollElement,
     ...props
@@ -499,14 +550,19 @@ var Table = (props) => {
 var TableImpl = (props) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext("TableImpl");
-  const { rows } = table.getRowModel();
+  const centerRows = table.getCenterRows();
+  const bottomRows = table.getBottomRows();
+  const rows = [
+    ...centerRows,
+    ...bottomRows
+  ];
   if (debug) {
-    return /* @__PURE__ */ React6.createElement("pre", {
+    return /* @__PURE__ */ React7.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ React6.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
+    }, /* @__PURE__ */ React7.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-  return /* @__PURE__ */ React6.createElement("table", {
+  return /* @__PURE__ */ React7.createElement("table", {
     role,
     className: tableRoot(props, classNames),
     ...!fullWidth && {
@@ -514,17 +570,22 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React6.createElement(TableHead, null), grouping?.length !== 0 ? getScrollElement ? isResizingColumn ? /* @__PURE__ */ React6.createElement(MemoizedVirtualisedTableContent, {
+  }, /* @__PURE__ */ React7.createElement(TableHead, null), grouping?.length !== 0 ? getScrollElement ? isResizingColumn ? /* @__PURE__ */ React7.createElement(MemoizedVirtualisedTableContent, {
     getScrollElement
-  }) : /* @__PURE__ */ React6.createElement(VirtualizedTableContent, {
+  }) : /* @__PURE__ */ React7.createElement(VirtualizedTableContent, {
     getScrollElement
-  }) : /* @__PURE__ */ React6.createElement(TableBody, {
+  }) : /* @__PURE__ */ React7.createElement(TableBody, {
     rows
-  }) : /* @__PURE__ */ React6.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React6.createElement(TableFooter, null));
+  }) : /* @__PURE__ */ React7.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React7.createElement(TableFooter, null));
 };
 var VirtualizedTableContent = ({ getScrollElement }) => {
-  const { table: { getRowModel } } = useTableContext("VirtualizedTableContent");
-  const rows = getRowModel().rows;
+  const { table } = useTableContext("VirtualizedTableContent");
+  const centerRows = table.getCenterRows();
+  const pinnedRows = table.getBottomRows();
+  const rows = [
+    ...centerRows,
+    ...pinnedRows
+  ];
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
     count: rows.length,
@@ -535,50 +596,50 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   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__ */ React6.createElement(React6.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React6.createElement("tbody", {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React7.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React6.createElement("tr", {
+  }, /* @__PURE__ */ React7.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React6.createElement("td", {
+  }, /* @__PURE__ */ React7.createElement("td", {
     style: {
       height: `${paddingTop}px`
     },
     role: "none"
-  }))), /* @__PURE__ */ React6.createElement(TableBody, {
+  }))), /* @__PURE__ */ React7.createElement(TableBody, {
     rows: virtualRows.map((virtualRow) => rows[virtualRow.index])
-  }), paddingBottom > 0 && /* @__PURE__ */ React6.createElement("tbody", {
+  }), paddingBottom > 0 && /* @__PURE__ */ React7.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React6.createElement("tr", {
+  }, /* @__PURE__ */ React7.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React6.createElement("td", {
+  }, /* @__PURE__ */ React7.createElement("td", {
     style: {
       height: `${paddingBottom}px`
     },
     role: "none"
   }))));
 };
-var MemoizedVirtualisedTableContent = /* @__PURE__ */ React6.memo(VirtualizedTableContent);
+var MemoizedVirtualisedTableContent = /* @__PURE__ */ React7.memo(VirtualizedTableContent);
 var GroupedTableContent = () => {
   const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ React6.createElement(Fragment, {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
+    return /* @__PURE__ */ React7.createElement(Fragment, {
       key: i
-    }, /* @__PURE__ */ React6.createElement("thead", null, /* @__PURE__ */ React6.createElement("tr", null, debug && /* @__PURE__ */ React6.createElement("th", null), /* @__PURE__ */ React6.createElement("th", {
+    }, /* @__PURE__ */ React7.createElement("thead", null, /* @__PURE__ */ React7.createElement("tr", null, debug && /* @__PURE__ */ React7.createElement("th", null), /* @__PURE__ */ React7.createElement("th", {
       // TODO(burdon): Calculate row span.
       colSpan: getHeaderGroups()[0].headers.length,
       className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React6.createElement(TableBody, {
+    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React7.createElement(TableBody, {
       rows: row.subRows
     }));
   }));
 };
 
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
-import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
-import React7, { useCallback as useCallback2, useState as useState3 } from "react";
+import { CaretDown } from "@phosphor-icons/react";
+import React8, { 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 getSize2, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
+import { descriptionText, getSize as getSize3, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
@@ -609,37 +670,37 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     items,
     onValueChange
   ]);
-  return /* @__PURE__ */ React7.createElement(PopoverCombobox.Root, {
+  return /* @__PURE__ */ React8.createElement(PopoverCombobox.Root, {
     placeholder: t("no selection label")
-  }, /* @__PURE__ */ React7.createElement(PopoverCombobox.Trigger, {
+  }, /* @__PURE__ */ React8.createElement(PopoverCombobox.Trigger, {
     variant: "ghost",
     classNames: "is-full rounded-none ring-inset"
-  }, value ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", {
+  }, value ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
     className: mx4("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React7.createElement(CaretDown2, {
+  }, model.getText(value)), /* @__PURE__ */ React8.createElement(CaretDown, {
     weight: "bold",
-    className: getSize2(3)
-  })) : null), /* @__PURE__ */ React7.createElement(PopoverCombobox.Content, {
+    className: getSize3(3)
+  })) : null), /* @__PURE__ */ React8.createElement(PopoverCombobox.Content, {
     shouldFilter: false,
     classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ React7.createElement(PopoverCombobox.Input, {
+  }, /* @__PURE__ */ React8.createElement(PopoverCombobox.Input, {
     value: searchInputValue,
     onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ React7.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React7.createElement("p", {
+  }), /* @__PURE__ */ React8.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React8.createElement("p", {
     className: mx4("text-center", descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ React7.createElement("p", {
+  }, "Start typing to search") : loading ? /* @__PURE__ */ React8.createElement("p", {
     className: mx4("text-center", descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PopoverCombobox.Empty, {
+  }, "Searching\u2026") : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PopoverCombobox.Empty, {
     classNames: [
       "text-center",
       descriptionText
     ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React7.createElement(PopoverCombobox.Item, {
+  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React8.createElement(PopoverCombobox.Item, {
     key: id,
     value: id,
     onSelect: handleValueChange,
     classNames: "truncate"
-  }, label)))), /* @__PURE__ */ React7.createElement(Popover2.Arrow, null)));
+  }, label)))), /* @__PURE__ */ React8.createElement(Popover2.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/helpers.tsx
@@ -648,10 +709,10 @@ import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React8, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import React9, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { log as log2 } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
+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";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
@@ -659,7 +720,7 @@ var createColumnBuilder = () => ({
 });
 var ComboboxBuilderCell = (cellContext) => {
   const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return model ? /* @__PURE__ */ React8.createElement(CellCombobox, {
+  return model ? /* @__PURE__ */ React9.createElement(CellCombobox, {
     model,
     value: cellContext.getValue(),
     onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
@@ -683,10 +744,13 @@ var StringBuilderCell = (cellContext) => {
     }
   };
   const handleCancel = () => setValue(initialValue);
-  const rows = cellContext.table.getRowModel().flatRows;
+  let placeholder = false;
   const columns = cellContext.table.getVisibleFlatColumns();
-  const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
-  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
+  if (columns[0].id === cellContext.column.id) {
+    const rowCount = cellContext.table.getRowModel().rows.length;
+    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
+  }
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     placeholder: placeholder ? "Add row..." : void 0,
@@ -733,7 +797,7 @@ var NumberBuilderCell = (cellContext) => {
     setText(displayNumber(value, digits));
     ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     value: text,
@@ -756,10 +820,10 @@ var RowSelectorBuilderCell = (cellContext) => {
   const { cell } = cellContext.column.columnDef.meta;
   const { row } = cellContext;
   const checked = row.getCanSelect() ? row.getIsSelected() : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? "indeterminate" : row.getIsAllSubRowsSelected());
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     className: "flex justify-center w-full h-full",
     role: "presentation"
-  }, /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+  }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
     size: 4,
     classNames: [
       cell?.classNames
@@ -776,7 +840,7 @@ var RowSelectorBuilderCell = (cellContext) => {
 var SwitchBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Switch, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Switch, {
     classNames: "block mli-auto",
     onClick: (event) => event.stopPropagation(),
     disabled: !onUpdate,
@@ -798,7 +862,7 @@ var ColumnBuilder = class {
       },
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
-        return /* @__PURE__ */ React8.createElement("div", {
+        return /* @__PURE__ */ React9.createElement("div", {
           className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
@@ -829,7 +893,7 @@ var ColumnBuilder = class {
         if (typeof value === "object" && value?.__typename === "dxos.Text.v0") {
           value = value.content;
         }
-        return /* @__PURE__ */ React8.createElement("div", {
+        return /* @__PURE__ */ React9.createElement("div", {
           className: mx5("truncate", textPadding, classNames)
         }, value);
       },
@@ -884,7 +948,7 @@ var ColumnBuilder = class {
           const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
             addSuffix: true
           }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React8.createElement("div", {
+          return /* @__PURE__ */ React9.createElement("div", {
             className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
@@ -892,7 +956,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file2,
-            L: 370,
+            L: 374,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -926,9 +990,9 @@ var ColumnBuilder = class {
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React9.createElement(Tooltip.Provider, null, /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
           side: "right"
-        }, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React8.createElement(ClipboardText, {
+        }, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React9.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
@@ -966,10 +1030,10 @@ var ColumnBuilder = class {
       header: ({ table }) => {
         const { rowsSelectable } = useTableContext("HELPER_SELECT_ROW_HEADER_CELL");
         const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ React8.createElement("div", {
+        return rowsSelectable === "multi" ? /* @__PURE__ */ React9.createElement("div", {
           className: "flex justify-center w-full h-full",
           role: "presentation"
-        }, /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+        }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
           size: 4,
           classNames: [
             "mli-auto",
@@ -990,6 +1054,8 @@ var ColumnBuilder = class {
       size: 50,
       minSize: 50,
       header: (column) => label ?? column.header.id,
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: true,
       cell: SwitchBuilderCell,
       ...props,
       meta: {
@@ -1013,18 +1079,20 @@ var ColumnBuilder = class {
     const IconOff = off?.Icon ?? X2;
     return {
       size: size ?? 32,
-      header: (column) => /* @__PURE__ */ React8.createElement("div", {
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: false,
+      header: (column) => /* @__PURE__ */ React9.createElement("div", {
         className: "justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return /* @__PURE__ */ React8.createElement(IconOn, {
-            className: mx5("block mli-auto", getSize3(6), on?.className ?? "text-green-700")
+          return /* @__PURE__ */ React9.createElement(IconOn, {
+            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
-          return /* @__PURE__ */ React8.createElement(IconOff, {
-            className: mx5("block mli-auto", getSize3(6), off?.className ?? "text-red-700")
+          return /* @__PURE__ */ React9.createElement(IconOff, {
+            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;