@osdk/react-components 0.1.0-beta.3 → 0.1.0-beta.5

package/build/cjs/public/experimental.cjs

@@ -1,19 +1,20 @@
 'use strict';
 
 var reactTable = require('@tanstack/react-table');
-var React = require('react');
+var React9 = require('react');
 var react = require('@osdk/react');
 var experimental = require('@osdk/react/experimental');
 var checkbox = require('@base-ui/react/checkbox');
 var icons = require('@blueprintjs/icons');
-var classnames = require('classnames');
+var classNames = require('classnames');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactDom = require('react-dom');
+var menu = require('@base-ui/react/menu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 // src/object-table/ObjectTable.tsx
 function useColumnDefs(objectType, columnDefinitions) {
@@ -22,7 +23,7 @@ function useColumnDefs(objectType, columnDefinitions) {
     loading,
     error
   } = react.useOsdkMetadata(objectType);
-  const columns = React.useMemo(() => {
+  const columns = React9.useMemo(() => {
     const objectProperties = metadata?.properties;
     if (columnDefinitions) {
       return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
@@ -78,10 +79,86 @@ function getDefaultColumns(objectProperties) {
     return colDef;
   });
 }
-var useDefaultTableStates = ({
+
+// src/object-table/utils/constants.ts
+var SELECTION_COLUMN_ID = "__selection__";
+
+// src/object-table/hooks/useColumnPinning.ts
+var useColumnPinning = ({
+  columnDefinitions,
+  hasSelectionColumn,
+  onColumnsPinnedChanged
+}) => {
+  const [columnPinning, setColumnPinning] = React9.useState({
+    left: [],
+    right: []
+  });
+  React9.useEffect(() => {
+    const defaultState = getColumnPinningStateFromColumnDefs(columnDefinitions);
+    const selectionCol = hasSelectionColumn ? [SELECTION_COLUMN_ID] : [];
+    setColumnPinning({
+      left: [...selectionCol, ...defaultState.left ?? []],
+      right: [...defaultState.right ?? []]
+    });
+  }, [columnDefinitions, hasSelectionColumn]);
+  const onColumnPinningChange = React9.useCallback((updater) => {
+    setColumnPinning((prev) => {
+      const newPinning = typeof updater === "function" ? updater(prev) : updater;
+      if (onColumnsPinnedChanged) {
+        const newStates = convertColumnPinningStateToArray(newPinning);
+        const stateWithoutSelectionCol = newStates.filter((state) => state.columnId !== SELECTION_COLUMN_ID);
+        onColumnsPinnedChanged(stateWithoutSelectionCol);
+      }
+      return newPinning;
+    });
+  }, [onColumnsPinnedChanged]);
+  return {
+    columnPinning,
+    onColumnPinningChange
+  };
+};
+var getColumnPinningStateFromColumnDefs = (columnDefinitions) => {
+  if (!columnDefinitions) {
+    return {};
+  }
+  const columnPinningState = columnDefinitions.reduce((acc, {
+    locator,
+    pinned
+  }) => {
+    const colKey = locator.id.toString();
+    const isPinned = pinned != null && pinned !== "none";
+    if (!isPinned) {
+      return acc;
+    }
+    if (pinned === "left") {
+      return {
+        ...acc,
+        left: [...acc.left ?? [], colKey]
+      };
+    }
+    return {
+      ...acc,
+      right: [...acc.right ?? [], colKey]
+    };
+  }, {
+    left: [],
+    right: []
+  });
+  return columnPinningState;
+};
+function convertColumnPinningStateToArray(pinningState) {
+  return [...(pinningState.left ?? []).map((columnId) => ({
+    columnId,
+    pinned: "left"
+  })), ...(pinningState.right ?? []).map((columnId) => ({
+    columnId,
+    pinned: "right"
+  }))];
+}
+var useColumnVisibility = ({
   columnDefinitions
 }) => {
-  const columnVisibility = React.useMemo(() => {
+  const columnVisibility = React9.useMemo(() => {
     if (columnDefinitions) {
       const colVisibility = columnDefinitions.reduce((acc, colDef) => {
         if (colDef.isVisible !== void 0) {
@@ -99,13 +176,20 @@ var useDefaultTableStates = ({
       return colVisibility;
     }
   }, [columnDefinitions]);
-  return {
-    columnVisibility
-  };
+  return columnVisibility;
 };
 var PAGE_SIZE = 50;
-function useObjectTableData(objectSet, columnDefinitions, filter) {
-  const withProperties = React.useMemo(() => {
+function useObjectTableData(objectSet, columnDefinitions, filter, sorting) {
+  const orderBy = React9.useMemo(() => {
+    if (!sorting || sorting.length === 0) {
+      return void 0;
+    }
+    return sorting.reduce((acc, sort) => {
+      acc[sort.id] = sort.desc ? "desc" : "asc";
+      return acc;
+    }, {});
+  }, [sorting]);
+  const withProperties = React9.useMemo(() => {
     if (!columnDefinitions) {
       return;
     }
@@ -122,7 +206,8 @@ function useObjectTableData(objectSet, columnDefinitions, filter) {
   return experimental.useObjectSet(objectSet, {
     withProperties,
     pageSize: PAGE_SIZE,
-    where: filter
+    where: filter,
+    orderBy
   });
 }
 
@@ -139,11 +224,11 @@ function useRowSelection({
   onRowSelection,
   data
 }) {
-  const [internalRowSelection, setInternalRowSelection] = React.useState({});
-  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React.useState(null);
+  const [internalRowSelection, setInternalRowSelection] = React9.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React9.useState(null);
   const isControlled = selectedRows !== void 0;
   const isSelectionEnabled = selectionMode !== "none";
-  const rowSelectionState = React.useMemo(() => {
+  const rowSelectionState = React9.useMemo(() => {
     if (!isSelectionEnabled) return {};
     if (isControlled && selectedRows) {
       return getRowSelectionState(selectedRows);
@@ -154,7 +239,7 @@ function useRowSelection({
   const totalCount = data?.length ?? 0;
   const isAllSelected = totalCount > 0 && selectedCount === totalCount;
   const hasSelection = selectedCount > 0;
-  const onToggleAll = React.useCallback(() => {
+  const onToggleAll = React9.useCallback(() => {
     if (!isSelectionEnabled || !data) return;
     const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
     if (!isControlled) {
@@ -162,7 +247,7 @@ function useRowSelection({
     }
     onRowSelection?.(newSelectedRows);
   }, [isSelectionEnabled, data, isAllSelected, isControlled, onRowSelection]);
-  const onToggleRow = React.useCallback((rowId, rowIndex, isShiftClick = false) => {
+  const onToggleRow = React9.useCallback((rowId, rowIndex, isShiftClick = false) => {
     if (!isSelectionEnabled || !data) return;
     let newSelectedRows = [];
     if (selectionMode === "single") {
@@ -284,14 +369,14 @@ function Checkbox({
   indicatorProps,
   ...rest
 }) {
-  return /* @__PURE__ */ React__default.default.createElement(checkbox.Checkbox.Root, _extends({
-    className: classnames__default.default(Checkbox_default.osdkCheckboxRoot, className),
+  return /* @__PURE__ */ React9__default.default.createElement(checkbox.Checkbox.Root, _extends({
+    className: classNames__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate
-  }, rest), /* @__PURE__ */ React__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
-    className: classnames__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
-  }), indeterminate ? /* @__PURE__ */ React__default.default.createElement(icons.Minus, {
+  }, rest), /* @__PURE__ */ React9__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
+    className: classNames__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
+  }), indeterminate ? /* @__PURE__ */ React9__default.default.createElement(icons.Minus, {
     color: "currentColor"
-  }) : /* @__PURE__ */ React__default.default.createElement(icons.Tick, {
+  }) : /* @__PURE__ */ React9__default.default.createElement(icons.Tick, {
     color: "currentColor"
   })));
 }
@@ -302,7 +387,7 @@ function SelectionHeaderCell({
   hasSelection,
   onToggleAll
 }) {
-  return /* @__PURE__ */ React__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React9__default.default.createElement(Checkbox, {
     indeterminate: hasSelection && !isAllSelected,
     checked: isAllSelected,
     onCheckedChange: onToggleAll,
@@ -313,11 +398,11 @@ function SelectionCell({
   row,
   onToggleRow
 }) {
-  const handleClick = React.useCallback((event) => {
+  const handleClick = React9.useCallback((event) => {
     const isShiftClick = event.shiftKey;
     onToggleRow(row.id, row.index, isShiftClick);
   }, [row, onToggleRow]);
-  return /* @__PURE__ */ React__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React9__default.default.createElement(Checkbox, {
     checked: row.getIsSelected(),
     onClick: handleClick,
     "aria-label": `Select row ${row.index + 1}`
@@ -325,7 +410,6 @@ function SelectionCell({
 }
 
 // src/object-table/hooks/useSelectionColumn.tsx
-var SELECTION_COLUMN_ID = "__selection__";
 var useSelectionColumn = ({
   selectionMode,
   isAllSelected,
@@ -333,18 +417,18 @@ var useSelectionColumn = ({
   onToggleAll,
   onToggleRow
 }) => {
-  const selectionColumn = React.useMemo(() => {
+  const selectionColumn = React9.useMemo(() => {
     if (selectionMode === "none") return null;
-    return {
+    const colDef = {
       id: SELECTION_COLUMN_ID,
-      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React__default.default.createElement(SelectionHeaderCell, {
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React9__default.default.createElement(SelectionHeaderCell, {
         isAllSelected,
         hasSelection,
         onToggleAll
       }) : null,
       cell: ({
         row
-      }) => /* @__PURE__ */ React__default.default.createElement(SelectionCell, {
+      }) => /* @__PURE__ */ React9__default.default.createElement(SelectionCell, {
         row,
         onToggleRow
       }),
@@ -352,19 +436,73 @@ var useSelectionColumn = ({
       minSize: 50,
       maxSize: 50,
       enableSorting: false,
-      enableResizing: false
+      enableResizing: false,
+      enablePinning: false
     };
+    return colDef;
   }, [selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow]);
   return selectionColumn;
 };
+var useTableSorting = ({
+  orderBy,
+  defaultOrderBy,
+  onOrderByChanged
+}) => {
+  const [internalSorting, setInternalSorting] = React9.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
+  const isControlled = orderBy !== void 0;
+  const sortingState = React9.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
+  const onSortingChange = React9.useCallback((updater) => {
+    const newSorting = typeof updater === "function" ? updater(sortingState) : updater;
+    if (!isControlled) {
+      setInternalSorting(newSorting);
+    }
+    if (onOrderByChanged) {
+      const newOrderBy = convertSortingStateToOrderBy(newSorting);
+      onOrderByChanged(newOrderBy);
+    }
+  }, [isControlled, sortingState, onOrderByChanged]);
+  return {
+    sorting: sortingState,
+    onSortingChange
+  };
+};
+function convertOrderByToSortingState(orderBy) {
+  return orderBy.map(({
+    property,
+    direction
+  }) => ({
+    id: property,
+    desc: direction === "desc"
+  }));
+}
+function convertSortingStateToOrderBy(sorting) {
+  return sorting.map(({
+    id,
+    desc
+  }) => ({
+    property: id,
+    direction: desc ? "desc" : "asc"
+  }));
+}
+
+// src/object-table/Table.module.css
+var Table_default = {};
+
+// src/object-table/TableBody.module.css
+var TableBody_default = {};
+
+// src/object-table/CellContextMenu.module.css
+var CellContextMenu_default = {};
+
+// src/object-table/CellContextMenu.tsx
 function CellContextMenu({
   cell,
   position,
   onClose,
   renderContent
 }) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const ref = React9.useRef(null);
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         onClose();
@@ -375,11 +513,10 @@ function CellContextMenu({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
-  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React__default.default.createElement("div", {
+  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React9__default.default.createElement("div", {
     ref,
+    className: CellContextMenu_default.osdkCellContextMenu,
     style: {
-      position: "fixed",
-      zIndex: 9999,
       left: position.left,
       top: position.top,
       minWidth: position.width
@@ -389,9 +526,9 @@ function CellContextMenu({
 var useCellContextMenu = ({
   tdRef
 }) => {
-  const [popoverPosition, setPopoverPosition] = React.useState(null);
-  const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
-  const handleOpenContextMenu = React.useCallback((event) => {
+  const [popoverPosition, setPopoverPosition] = React9.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React9.useState(false);
+  const handleOpenContextMenu = React9.useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
     if (tdRef.current) {
@@ -405,7 +542,7 @@ var useCellContextMenu = ({
       setIsContextMenuOpen(true);
     }
   }, [tdRef]);
-  const handleCloseContextMenu = React.useCallback(() => {
+  const handleCloseContextMenu = React9.useCallback(() => {
     setIsContextMenuOpen(false);
     setPopoverPosition(null);
   }, []);
@@ -417,12 +554,27 @@ var useCellContextMenu = ({
   };
 };
 
+// src/object-table/TableCell.module.css
+var TableCell_default = {};
+
+// src/object-table/utils/getColumnPinningStyles.ts
+function getColumnPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  return {
+    columnStyles: {
+      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+      width: column.getSize()
+    }
+  };
+}
+
 // src/object-table/TableCell.tsx
 function TableCell({
   cell,
   renderCellContextMenu
 }) {
-  const tdRef = React.useRef(null);
+  const tdRef = React9.useRef(null);
   const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
   const {
     isContextMenuOpen,
@@ -433,15 +585,18 @@ function TableCell({
     tdRef
   });
   const shouldRenderContextMenu = !isSelectColumn && isContextMenuOpen && !!popoverPosition && !!renderCellContextMenu;
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("td", {
+  const {
+    columnStyles
+  } = getColumnPinningStyles(cell.column);
+  return /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement("td", {
     ref: tdRef,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      width: cell.column.getSize()
-    },
+    "data-pinned": cell.column.getIsPinned(),
+    className: TableCell_default.osdkTableCell,
+    style: columnStyles,
     onContextMenu: handleOpenContextMenu
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())), shouldRenderContextMenu && /* @__PURE__ */ React__default.default.createElement(CellContextMenu, {
+  }, /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: TableCell_default.osdkTableCellContent
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React9__default.default.createElement(CellContextMenu, {
     cell,
     position: popoverPosition,
     onClose: handleCloseContextMenu,
@@ -449,6 +604,9 @@ function TableCell({
   }));
 }
 
+// src/object-table/TableRow.module.css
+var TableRow_default = {};
+
 // src/object-table/TableRow.tsx
 function TableRow({
   row,
@@ -456,18 +614,18 @@ function TableRow({
   onRowClick,
   renderCellContextMenu
 }) {
-  const handleClick = React.useCallback(() => {
+  const handleClick = React9.useCallback(() => {
     onRowClick?.(row.original);
   }, [onRowClick, row.original]);
-  return /* @__PURE__ */ React__default.default.createElement("tr", {
+  return /* @__PURE__ */ React9__default.default.createElement("tr", {
+    "data-selected": row.getIsSelected(),
+    className: TableRow_default.osdkTableRow,
     style: {
-      position: "absolute",
       height: `${virtualRow.size}px`,
-      transform: `translateY(${virtualRow.start}px)`,
-      display: "flex"
+      transform: `translateY(${virtualRow.start}px)`
     },
     onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React__default.default.createElement(TableCell, {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React9__default.default.createElement(TableCell, {
     key: cell.id,
     cell,
     renderCellContextMenu
@@ -488,18 +646,17 @@ function TableBody({
     getScrollElement: () => tableContainerRef.current,
     overscan: 5
   });
-  React.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     rowVirtualizer.measure();
   }, [rowVirtualizer, rows.length]);
-  return /* @__PURE__ */ React__default.default.createElement("tbody", {
+  return /* @__PURE__ */ React9__default.default.createElement("tbody", {
+    className: TableBody_default.osdkTableBody,
     style: {
-      display: "grid",
-      position: "relative",
       height: `${rowVirtualizer.getTotalSize()}px`
     }
   }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
     const row = rows[virtualRow.index];
-    return /* @__PURE__ */ React__default.default.createElement(TableRow, {
+    return /* @__PURE__ */ React9__default.default.createElement(TableRow, {
       key: row.id,
       row,
       virtualRow,
@@ -508,63 +665,209 @@ function TableBody({
     });
   }));
 }
+
+// src/object-table/TableHeader.module.css
+var TableHeader_default = {};
+
+// src/object-table/TableHeaderContent.module.css
+var TableHeaderContent_default = {};
+
+// src/object-table/TableHeaderContent.tsx
+function TableHeaderContent({
+  header
+}) {
+  return /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: TableHeaderContent_default.osdkHeaderContent
+  }, reactTable.flexRender(header.column.columnDef.header, header.getContext()));
+}
+
+// src/object-table/TableHeaderWithPopover.module.css
+var TableHeaderWithPopover_default = {};
+
+// src/object-table/TableHeaderWithPopover.tsx
+function HeaderMenuItem({
+  onClick,
+  icon: Icon,
+  label,
+  active = false
+}) {
+  return /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Item, {
+    closeOnClick: true,
+    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
+    onClick
+  }, /* @__PURE__ */ React9__default.default.createElement(Icon, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon,
+    color: "currentColor"
+  }), /* @__PURE__ */ React9__default.default.createElement("span", null, label));
+}
+function TableHeaderWithPopover({
+  header,
+  isColumnPinned,
+  setColumnPinning,
+  onSortChange,
+  onResetSize
+}) {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const handlePinLeft = React9.useCallback(() => {
+    setColumnPinning((prev) => {
+      return {
+        left: [...prev.left || [], header.column.id],
+        right: prev.right?.filter((id) => id !== header.column.id) || []
+      };
+    });
+  }, [header.column.id, setColumnPinning]);
+  const handleUnpin = React9.useCallback(() => {
+    setColumnPinning((prev) => {
+      return {
+        left: prev.left?.filter((id) => id !== header.column.id) || [],
+        right: prev.right?.filter((id) => id !== header.column.id) || []
+      };
+    });
+  }, [header.column.id, setColumnPinning]);
+  const handleSortAscending = React9.useCallback(() => {
+    header.column.toggleSorting(false);
+    onSortChange?.([{
+      id: header.column.id,
+      desc: false
+    }]);
+  }, [header.column, onSortChange]);
+  const handleSortDescending = React9.useCallback(() => {
+    header.column.toggleSorting(true);
+    onSortChange?.([{
+      id: header.column.id,
+      desc: true
+    }]);
+  }, [header.column, onSortChange]);
+  const handleClearAllSorts = React9.useCallback(() => {
+    header.column.clearSorting();
+    onSortChange?.([]);
+  }, [header.column, onSortChange]);
+  const handleResetSize = React9.useCallback(() => {
+    header.column.resetSize();
+    if (onResetSize) {
+      onResetSize();
+    }
+  }, [header.column, onResetSize]);
+  const handleInteraction = React9.useCallback((e) => {
+    e.preventDefault();
+    setIsOpen((prev) => !prev);
+  }, []);
+  const isSorted = header.column.getIsSorted();
+  const isSortable = header.column.getCanSort();
+  return /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Root, {
+    open: isOpen,
+    onOpenChange: setIsOpen
+  }, /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
+    onContextMenu: handleInteraction
+  }, /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
+  }, isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(icons.Pin, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon,
+    color: "currentColor"
+  }), /* @__PURE__ */ React9__default.default.createElement(TableHeaderContent, {
+    header
+  })), /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
+  }, isSorted && /* @__PURE__ */ React9__default.default.createElement("div", {
+    className: TableHeaderWithPopover_default.osdkCenterContainer
+  }, isSorted === "asc" ? /* @__PURE__ */ React9__default.default.createElement(icons.SortAlphabetical, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon,
+    color: "currentColor"
+  }) : /* @__PURE__ */ React9__default.default.createElement(icons.SortAlphabeticalDesc, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon,
+    color: "currentColor"
+  })), /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Trigger, {
+    "aria-label": `Open header menu for column with id=${header.column.id}`,
+    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
+  }, /* @__PURE__ */ React9__default.default.createElement(icons.ChevronDown, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon
+  }))), /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Portal, {
+    container: document.body
+  }, /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Positioner, {
+    sideOffset: 4
+  }, /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Popup, {
+    className: TableHeaderWithPopover_default.osdkHeaderPopup
+  }, !isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handlePinLeft,
+    icon: icons.Pin,
+    label: "Pin column"
+  }), isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handleUnpin,
+    icon: icons.Unpin,
+    label: "Unpin Column",
+    active: true
+  }), isSortable && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handleSortAscending,
+    icon: icons.SortAlphabetical,
+    label: "Sort ascending",
+    active: isSorted === "asc"
+  }), /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handleSortDescending,
+    icon: icons.SortAlphabeticalDesc,
+    label: "Sort descending",
+    active: isSorted === "desc"
+  })), !!isSorted && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handleClearAllSorts,
+    icon: icons.Remove,
+    label: "Clear all sorts"
+  }), /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+    onClick: handleResetSize,
+    icon: icons.VerticalDistribution,
+    label: "Reset Column Size"
+  }))))));
+}
+
+// src/object-table/TableHeader.tsx
 function TableHeader({
   table
 }) {
-  return /* @__PURE__ */ React__default.default.createElement("thead", {
-    style: {
-      display: "grid",
-      position: "sticky",
-      top: 0,
-      zIndex: 1
-    }
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React__default.default.createElement("tr", {
+  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
+  return /* @__PURE__ */ React9__default.default.createElement("thead", {
+    className: TableHeader_default.osdkTableHeader,
+    "data-resizing": isResizing
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React9__default.default.createElement("tr", {
     key: headerGroup.id,
-    style: {
-      display: "flex"
-    }
-  }, headerGroup.headers.map((header) => (
-    // TODO: Move inline styling to CSS file
-    /* @__PURE__ */ React__default.default.createElement("th", {
+    className: TableHeader_default.osdkTableHeaderRow
+  }, headerGroup.headers.map((header) => {
+    const {
+      columnStyles
+    } = getColumnPinningStyles(header.column);
+    const isColumnPinned = header.column.getIsPinned();
+    const isSelectColumn = header.id === SELECTION_COLUMN_ID;
+    return /* @__PURE__ */ React9__default.default.createElement("th", {
       key: header.id,
-      style: {
-        display: "flex",
-        width: header.getSize(),
-        justifyContent: "flex-start",
-        alignItems: "center",
-        position: "relative"
-      }
-    }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && /* @__PURE__ */ React__default.default.createElement("div", {
+      "data-pinned": header.column.getIsPinned(),
+      className: TableHeader_default.osdkTableHeaderCell,
+      style: columnStyles
+    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React9__default.default.createElement(TableHeaderContent, {
+      header
+    }) : /* @__PURE__ */ React9__default.default.createElement(TableHeaderWithPopover, {
+      header,
+      isColumnPinned,
+      setColumnPinning: table.setColumnPinning
+    }), header.column.getCanResize() && /* @__PURE__ */ React9__default.default.createElement("div", {
+      className: TableHeader_default.osdkTableHeaderResizer,
       onDoubleClick: () => header.column.resetSize(),
       onMouseDown: header.getResizeHandler(),
-      onTouchStart: header.getResizeHandler(),
-      style: {
-        position: "absolute",
-        right: 0,
-        top: 0,
-        height: "100%",
-        width: "3px",
-        cursor: "col-resize",
-        touchAction: "none",
-        zIndex: 11,
-        transform: header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset ?? 0}px)` : ""
-      }
-    }))
-  )))));
+      onTouchStart: header.getResizeHandler()
+    }));
+  }))));
 }
 
 // src/object-table/Table.tsx
-function Table({
+function BaseTable({
   table,
   isLoading,
   fetchNextPage,
   onRowClick,
   rowHeight,
-  renderCellContextMenu
+  renderCellContextMenu,
+  className
 }) {
-  const tableContainerRef = React.useRef(null);
-  const fetchingRef = React.useRef(false);
-  const fetchMoreOnEndReached = React.useCallback(async (containerRefElement) => {
+  const tableContainerRef = React9.useRef(null);
+  const fetchingRef = React9.useRef(false);
+  const fetchMoreOnEndReached = React9.useCallback(async (containerRefElement) => {
     if (containerRefElement && !fetchingRef.current) {
       const {
         scrollHeight,
@@ -581,28 +884,16 @@ function Table({
       }
     }
   }, [fetchNextPage, isLoading]);
-  const handleScroll = React.useCallback(async (e) => {
+  const handleScroll = React9.useCallback(async (e) => {
     await fetchMoreOnEndReached(e.currentTarget);
   }, [fetchMoreOnEndReached]);
-  return /* @__PURE__ */ React__default.default.createElement("div", {
+  return /* @__PURE__ */ React9__default.default.createElement("div", {
     ref: tableContainerRef,
-    style: {
-      position: "relative",
-      // needed for sticky header
-      height: "100%",
-      // needed for scrolling
-      overflow: "auto",
-      cursor: table.getState().columnSizingInfo?.isResizingColumn ? "col-resize" : "default",
-      userSelect: table.getState().columnSizingInfo?.isResizingColumn ? "none" : "auto"
-    },
+    className: classNames__default.default(Table_default.osdkTableContainer, className),
     onScroll: handleScroll
-  }, /* @__PURE__ */ React__default.default.createElement("table", {
-    style: {
-      display: "grid"
-    }
-  }, /* @__PURE__ */ React__default.default.createElement(TableHeader, {
+  }, /* @__PURE__ */ React9__default.default.createElement("table", null, /* @__PURE__ */ React9__default.default.createElement(TableHeader, {
     table
-  }), /* @__PURE__ */ React__default.default.createElement(TableBody, {
+  }), /* @__PURE__ */ React9__default.default.createElement(TableBody, {
     rows: table.getRowModel().rows,
     tableContainerRef,
     onRowClick,
@@ -617,27 +908,37 @@ function ObjectTable({
   objectType,
   columnDefinitions,
   filter,
+  orderBy,
+  defaultOrderBy,
+  onOrderByChanged,
+  onColumnsPinnedChanged,
   onRowSelection,
   renderCellContextMenu,
   selectionMode = "none",
   selectedRows,
   ...props
 }) {
+  const [columnSizing, setColumnSizing] = React9.useState({});
+  const {
+    sorting,
+    onSortingChange
+  } = useTableSorting({
+    orderBy,
+    defaultOrderBy,
+    onOrderByChanged
+  });
   const {
     data,
     fetchMore,
     isLoading
-  } = useObjectTableData(objectSet, columnDefinitions, filter);
+  } = useObjectTableData(objectSet, columnDefinitions, filter, sorting);
   const {
     columns,
     loading: isColumnsLoading
   } = useColumnDefs(objectType, columnDefinitions);
-  const {
-    columnVisibility
-  } = useDefaultTableStates({
+  const columnVisibility = useColumnVisibility({
     columnDefinitions
   });
-  const [columnSizing, setColumnSizing] = React.useState({});
   const {
     rowSelection,
     isAllSelected,
@@ -657,9 +958,17 @@ function ObjectTable({
     onToggleAll,
     onToggleRow
   });
-  const allColumns = React.useMemo(() => {
+  const allColumns = React9.useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
+  const {
+    columnPinning,
+    onColumnPinningChange
+  } = useColumnPinning({
+    columnDefinitions,
+    hasSelectionColumn: selectionColumn != null,
+    onColumnsPinnedChanged
+  });
   const table = reactTable.useReactTable({
     data: data ?? [],
     columns: allColumns,
@@ -667,31 +976,39 @@ function ObjectTable({
     state: {
       columnVisibility,
       rowSelection,
-      columnSizing
+      sorting,
+      columnSizing,
+      columnPinning
     },
+    onSortingChange,
     onColumnSizingChange: setColumnSizing,
+    onColumnPinningChange,
     enableRowSelection: selectionMode !== "none",
     columnResizeMode: "onChange",
     columnResizeDirection: "ltr",
+    manualSorting: true,
+    // Enable manual sorting to indicate server-side sorting
     defaultColumn: {
       minSize: 80
     },
     getRowId
   });
-  const onRenderCellContextMenu = React.useCallback((row, cell) => {
+  const onRenderCellContextMenu = React9.useCallback((row, cell) => {
     return renderCellContextMenu?.(row, cell.getValue());
   }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
-  return /* @__PURE__ */ React__default.default.createElement(Table, {
+  return /* @__PURE__ */ React9__default.default.createElement(BaseTable, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
     onRowClick: props.onRowClick,
     rowHeight: props.rowHeight,
-    renderCellContextMenu: onRenderCellContextMenu
+    renderCellContextMenu: onRenderCellContextMenu,
+    className: props.className
   });
 }
 
+exports.BaseTable = BaseTable;
 exports.ObjectTable = ObjectTable;
 //# sourceMappingURL=experimental.cjs.map
 //# sourceMappingURL=experimental.cjs.map