@osdk/react-components 0.2.0-beta.1 → 0.2.0-beta.3

package/build/cjs/public/experimental.cjs

@@ -1,20 +1,27 @@
 'use strict';
 
 var reactTable = require('@tanstack/react-table');
-var React7 = require('react');
+var React10 = 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 classNames2 = require('classnames');
+var classNames7 = require('classnames');
+var button = require('@base-ui/react/button');
+var collapsible = require('@base-ui/react/collapsible');
+var sortable = require('@dnd-kit/sortable');
+var dialog = require('@base-ui/react/dialog');
+var core = require('@dnd-kit/core');
+var utilities = require('@dnd-kit/utilities');
+var input = require('@base-ui/react/input');
 var menu = require('@base-ui/react/menu');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
-var classNames2__default = /*#__PURE__*/_interopDefault(classNames2);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
+var classNames7__default = /*#__PURE__*/_interopDefault(classNames7);
 
 // src/object-table/ObjectTable.tsx
 function useColumnDefs(objectType, columnDefinitions) {
@@ -23,7 +30,7 @@ function useColumnDefs(objectType, columnDefinitions) {
     loading,
     error
   } = react.useOsdkMetadata(objectType);
-  const columns = React7.useMemo(() => {
+  const columns = React10.useMemo(() => {
     const objectProperties = metadata?.properties;
     if (columnDefinitions) {
       return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
@@ -47,14 +54,19 @@ function getColumnsFromColumnDefinitions(columnDefinitions, objectProperties) {
       orderable,
       filterable,
       renderCell,
-      renderHeader
+      renderHeader,
+      columnName
     } = col;
     const propertyMetadata = locator.type === "property" ? objectProperties?.[locator.id] : void 0;
     const colKey = locator.id;
     const colDef = {
       id: colKey,
       accessorKey: colKey,
-      header: renderHeader ?? propertyMetadata?.displayName,
+      header: renderHeader ?? (columnName || propertyMetadata?.displayName),
+      meta: {
+        columnName: columnName || propertyMetadata?.displayName,
+        isVisible: col.isVisible !== false
+      },
       size: width,
       ...minWidth ? {
         minSize: minWidth
@@ -93,11 +105,11 @@ var useColumnPinning = ({
   hasSelectionColumn,
   onColumnsPinnedChanged
 }) => {
-  const [columnPinning, setColumnPinning] = React7.useState({
+  const [columnPinning, setColumnPinning] = React10.useState({
     left: [],
     right: []
   });
-  React7.useEffect(() => {
+  React10.useEffect(() => {
     const defaultState = getColumnPinningStateFromColumnDefs(columnDefinitions);
     const selectionCol = hasSelectionColumn ? [SELECTION_COLUMN_ID] : [];
     setColumnPinning({
@@ -105,7 +117,7 @@ var useColumnPinning = ({
       right: [...defaultState.right ?? []]
     });
   }, [columnDefinitions, hasSelectionColumn]);
-  const onColumnPinningChange = React7.useCallback((updater) => {
+  const onColumnPinningChange = React10.useCallback((updater) => {
     setColumnPinning((prev) => {
       const newPinning = typeof updater === "function" ? updater(prev) : updater;
       if (onColumnsPinnedChanged) {
@@ -159,32 +171,89 @@ function convertColumnPinningStateToArray(pinningState) {
     pinned: "right"
   }))];
 }
-var useColumnVisibility = ({
-  columnDefinitions
+var useColumnResize = ({
+  onColumnResize
 }) => {
-  const columnVisibility = React7.useMemo(() => {
-    if (columnDefinitions) {
-      const colVisibility = columnDefinitions.reduce((acc, colDef) => {
-        if (colDef.isVisible !== void 0) {
-          const {
-            locator
-          } = colDef;
-          const colKey = locator.id;
-          return {
-            ...acc,
-            [colKey]: colDef.isVisible
-          };
+  const [columnSizing, setColumnSizing] = React10.useState({});
+  const onColumnSizingChange = React10.useCallback((updater) => {
+    setColumnSizing((prev) => {
+      const newState = typeof updater === "function" ? updater(prev) : updater;
+      if (onColumnResize) {
+        for (const columnId of Object.keys(newState)) {
+          if (newState[columnId] !== prev[columnId]) {
+            onColumnResize(columnId, newState[columnId]);
+          }
+        }
+        for (const columnId of Object.keys(prev)) {
+          if (!(columnId in newState)) {
+            onColumnResize(columnId, null);
+          }
         }
-        return acc;
-      }, {});
-      return colVisibility;
+      }
+      return newState;
+    });
+  }, [onColumnResize]);
+  return {
+    columnSizing,
+    onColumnSizingChange
+  };
+};
+var useColumnVisibility = ({
+  allColumns,
+  onColumnVisibilityChanged
+}) => {
+  const [columnVisibility, setColumnVisibility] = React10.useState(() => getColumnVisibilityState(allColumns));
+  const [columnOrder, setColumnOrder] = React10.useState(() => getColumnOrder(allColumns));
+  React10.useEffect(() => {
+    setColumnVisibility(getColumnVisibilityState(allColumns));
+  }, [allColumns]);
+  React10.useEffect(() => {
+    setColumnOrder(getColumnOrder(allColumns));
+  }, [allColumns]);
+  const onColumnVisibilityChange = React10.useCallback((updaterOrValue) => {
+    setColumnVisibility((prev) => {
+      const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+      if (onColumnVisibilityChanged) {
+        const changes = Object.entries(newState).map(([columnId, isVisible]) => ({
+          columnId,
+          isVisible
+        }));
+        onColumnVisibilityChanged(changes);
+      }
+      return newState;
+    });
+  }, [onColumnVisibilityChanged]);
+  const onColumnOrderChange = React10.useCallback((updaterOrValue) => {
+    setColumnOrder((prev) => {
+      const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+      return newState;
+    });
+  }, []);
+  return {
+    columnVisibility,
+    onColumnVisibilityChange,
+    columnOrder,
+    onColumnOrderChange
+  };
+};
+var getColumnVisibilityState = (allColumns) => {
+  return allColumns.reduce((acc, col) => {
+    const colId = col.id ?? col.accessorKey;
+    if (colId) {
+      return {
+        ...acc,
+        [colId]: col.meta?.isVisible !== false
+      };
     }
-  }, [columnDefinitions]);
-  return columnVisibility;
+    return acc;
+  }, {});
+};
+var getColumnOrder = (allColumns) => {
+  return allColumns.map((col) => col.id ?? col.accessorKey).filter((id) => id != null);
 };
 var PAGE_SIZE = 50;
 function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, sorting) {
-  const orderBy = React7.useMemo(() => {
+  const orderBy = React10.useMemo(() => {
     if (!sorting || sorting.length === 0) {
       return void 0;
     }
@@ -193,7 +262,7 @@ function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, so
       return acc;
     }, {});
   }, [sorting]);
-  const withProperties = React7.useMemo(() => {
+  const withProperties = React10.useMemo(() => {
     if (!columnDefinitions) {
       return;
     }
@@ -231,31 +300,31 @@ function useRowSelection({
   onRowSelection,
   data
 }) {
-  const [internalRowSelection, setInternalRowSelection] = React7.useState({});
-  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React7.useState(null);
+  const [internalRowSelection, setInternalRowSelection] = React10.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React10.useState(null);
   const isControlled = selectedRows !== void 0;
-  const isSelectionEnabled = selectionMode !== "none";
-  const rowSelectionState = React7.useMemo(() => {
-    if (!isSelectionEnabled) return {};
+  const enableRowSelection = selectionMode !== "none";
+  const rowSelectionState = React10.useMemo(() => {
+    if (!enableRowSelection) return {};
     if (isControlled && selectedRows) {
       return getRowSelectionState(selectedRows);
     }
     return internalRowSelection;
-  }, [isSelectionEnabled, isControlled, selectedRows, internalRowSelection]);
+  }, [enableRowSelection, isControlled, selectedRows, internalRowSelection]);
   const selectedCount = Object.values(rowSelectionState).filter(Boolean).length;
   const totalCount = data?.length ?? 0;
   const isAllSelected = totalCount > 0 && selectedCount === totalCount;
   const hasSelection = selectedCount > 0;
-  const onToggleAll = React7.useCallback(() => {
-    if (!isSelectionEnabled || !data) return;
+  const onToggleAll = React10.useCallback(() => {
+    if (!enableRowSelection || !data) return;
     const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
     if (!isControlled) {
       setInternalRowSelection(getRowSelectionState(newSelectedRows));
     }
     onRowSelection?.(newSelectedRows);
-  }, [isSelectionEnabled, data, isAllSelected, isControlled, onRowSelection]);
-  const onToggleRow = React7.useCallback((rowId, rowIndex, isShiftClick = false) => {
-    if (!isSelectionEnabled || !data) return;
+  }, [enableRowSelection, data, isAllSelected, isControlled, onRowSelection]);
+  const onToggleRow = React10.useCallback((rowId, rowIndex, isShiftClick = false) => {
+    if (!enableRowSelection || !data) return;
     let newSelectedRows = [];
     if (selectionMode === "single") {
       newSelectedRows = getSingleSelectionRows({
@@ -286,10 +355,11 @@ function useRowSelection({
       setInternalRowSelection(getRowSelectionState(newSelectedRows));
     }
     onRowSelection?.(newSelectedRows);
-  }, [isSelectionEnabled, data, selectionMode, lastSelectedRowIndex, isControlled, rowSelectionState, onRowSelection]);
+  }, [enableRowSelection, data, selectionMode, lastSelectedRowIndex, isControlled, rowSelectionState, onRowSelection]);
   return {
     rowSelection: rowSelectionState,
     isAllSelected,
+    enableRowSelection,
     hasSelection,
     onToggleAll,
     onToggleRow
@@ -376,14 +446,14 @@ function Checkbox({
   indicatorProps,
   ...rest
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement(checkbox.Checkbox.Root, _extends({
-    className: classNames2__default.default(Checkbox_default.osdkCheckboxRoot, className),
+  return /* @__PURE__ */ React10__default.default.createElement(checkbox.Checkbox.Root, _extends({
+    className: classNames7__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate
-  }, rest), /* @__PURE__ */ React7__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
-    className: classNames2__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
-  }), indeterminate ? /* @__PURE__ */ React7__default.default.createElement(icons.Minus, {
+  }, rest), /* @__PURE__ */ React10__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
+    className: classNames7__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
+  }), indeterminate ? /* @__PURE__ */ React10__default.default.createElement(icons.Minus, {
     color: "currentColor"
-  }) : /* @__PURE__ */ React7__default.default.createElement(icons.Tick, {
+  }) : /* @__PURE__ */ React10__default.default.createElement(icons.Tick, {
     color: "currentColor"
   })));
 }
@@ -394,7 +464,7 @@ function SelectionHeaderCell({
   hasSelection,
   onToggleAll
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
     indeterminate: hasSelection && !isAllSelected,
     checked: isAllSelected,
     onCheckedChange: onToggleAll,
@@ -405,11 +475,11 @@ function SelectionCell({
   row,
   onToggleRow
 }) {
-  const handleClick = React7.useCallback((event) => {
+  const handleClick = React10.useCallback((event) => {
     const isShiftClick = event.shiftKey;
     onToggleRow(row.id, row.index, isShiftClick);
   }, [row, onToggleRow]);
-  return /* @__PURE__ */ React7__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
     checked: row.getIsSelected(),
     onClick: handleClick,
     "aria-label": `Select row ${row.index + 1}`
@@ -424,20 +494,28 @@ var useSelectionColumn = ({
   onToggleAll,
   onToggleRow
 }) => {
-  const selectionColumn = React7.useMemo(() => {
+  const isAllSelectedRef = React10.useRef(isAllSelected);
+  isAllSelectedRef.current = isAllSelected;
+  const hasSelectionRef = React10.useRef(hasSelection);
+  hasSelectionRef.current = hasSelection;
+  const onToggleAllRef = React10.useRef(onToggleAll);
+  onToggleAllRef.current = onToggleAll;
+  const onToggleRowRef = React10.useRef(onToggleRow);
+  onToggleRowRef.current = onToggleRow;
+  const selectionColumn = React10.useMemo(() => {
     if (selectionMode === "none") return null;
     const colDef = {
       id: SELECTION_COLUMN_ID,
-      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React7__default.default.createElement(SelectionHeaderCell, {
-        isAllSelected,
-        hasSelection,
-        onToggleAll
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React10__default.default.createElement(SelectionHeaderCell, {
+        isAllSelected: isAllSelectedRef.current,
+        hasSelection: hasSelectionRef.current,
+        onToggleAll: onToggleAllRef.current
       }) : null,
       cell: ({
         row
-      }) => /* @__PURE__ */ React7__default.default.createElement(SelectionCell, {
+      }) => /* @__PURE__ */ React10__default.default.createElement(SelectionCell, {
         row,
-        onToggleRow
+        onToggleRow: onToggleRowRef.current
       }),
       size: 50,
       minSize: 50,
@@ -447,7 +525,7 @@ var useSelectionColumn = ({
       enablePinning: false
     };
     return colDef;
-  }, [selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow]);
+  }, [selectionMode]);
   return selectionColumn;
 };
 var useTableSorting = ({
@@ -455,10 +533,10 @@ var useTableSorting = ({
   defaultOrderBy,
   onOrderByChanged
 }) => {
-  const [internalSorting, setInternalSorting] = React7.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
+  const [internalSorting, setInternalSorting] = React10.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
   const isControlled = orderBy !== void 0;
-  const sortingState = React7.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
-  const onSortingChange = React7.useCallback((updater) => {
+  const sortingState = React10.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
+  const onSortingChange = React10.useCallback((updater) => {
     const newSorting = typeof updater === "function" ? updater(sortingState) : updater;
     if (!isControlled) {
       setInternalSorting(newSorting);
@@ -502,13 +580,13 @@ var TableCell_default = {};
 function LoadingCell({
   width
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement("td", {
+  return /* @__PURE__ */ React10__default.default.createElement("td", {
     className: TableCell_default.osdkTableCell,
     style: {
       width
     }
-  }, /* @__PURE__ */ React7__default.default.createElement("div", {
-    className: classNames2__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
   }));
 }
 
@@ -523,17 +601,17 @@ function LoadingRow({
   rowHeight = 40,
   columnWidth = 80
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement("tr", {
+  return /* @__PURE__ */ React10__default.default.createElement("tr", {
     className: TableRow_default.osdkTableRow,
     style: {
       height: `${rowHeight}px`,
       transform: `translateY(${translateY}px)`
     }
-  }, /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, Array.from({
+  }, /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, Array.from({
     length: columnCount
   }).map((_, index) => {
     const width = headers.length > index ? headers[index].getSize() : columnWidth;
-    return /* @__PURE__ */ React7__default.default.createElement(LoadingCell, {
+    return /* @__PURE__ */ React10__default.default.createElement(LoadingCell, {
       key: `loading-cell-${index}`,
       width
     });
@@ -543,6 +621,620 @@ function LoadingRow({
 // src/object-table/TableBody.module.css
 var TableBody_default = {};
 
+// src/base-components/action-button/ActionButton.module.css
+var ActionButton_default = {};
+
+// src/base-components/action-button/ActionButton.tsx
+function _extends2() {
+  return _extends2 = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends2.apply(null, arguments);
+}
+function ActionButton({
+  variant = "secondary",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ React10__default.default.createElement(button.Button, _extends2({
+    className: classNames7__default.default(ActionButton_default.button, variant === "primary" ? ActionButton_default.primaryButton : ActionButton_default.secondaryButton, className)
+  }, rest));
+}
+
+// src/base-components/dialog/Dialog.module.css
+var Dialog_default = {};
+
+// src/base-components/dialog/Dialog.tsx
+function Dialog({
+  isOpen,
+  onOpenChange,
+  title,
+  children,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Root, {
+    open: isOpen,
+    onOpenChange
+  }, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Portal, null, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Backdrop, {
+    className: Dialog_default.backdrop
+  }), /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Popup, {
+    className: classNames7__default.default(Dialog_default.popup, className)
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: Dialog_default.header
+  }, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Title, {
+    className: Dialog_default.title
+  }, title), /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Close, {
+    className: Dialog_default.closeButton,
+    "aria-label": "Close dialog"
+  }, /* @__PURE__ */ React10__default.default.createElement(icons.Cross, {
+    className: Dialog_default.closeIcon
+  }))), /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: Dialog_default.body
+  }, children), footer != null && /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: Dialog_default.footer
+  }, footer))));
+}
+
+// src/base-components/draggable-list/DraggableList.module.css
+var DraggableList_default = {};
+
+// src/base-components/draggable-list/DraggableList.tsx
+function _extends3() {
+  return _extends3 = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends3.apply(null, arguments);
+}
+function DraggableListItem({
+  item,
+  onRemove,
+  removeIconVariant = "trash",
+  renderContent
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  const handleRemove = React10.useCallback(() => {
+    onRemove?.(item.id);
+  }, [item.id, onRemove]);
+  const RemoveIcon = removeIconVariant === "trash" ? icons.Trash : icons.SmallCross;
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    ref: setNodeRef,
+    style,
+    className: DraggableList_default.draggableItem,
+    "data-dragging": isDragging
+  }, /* @__PURE__ */ React10__default.default.createElement("div", _extends3({
+    className: DraggableList_default.dragHandle,
+    "aria-label": `Reorder ${item.label}`
+  }, attributes, listeners), /* @__PURE__ */ React10__default.default.createElement(icons.DragHandleVertical, {
+    className: DraggableList_default.icon
+  })), /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: DraggableList_default.itemContent
+  }, renderContent ? renderContent(item) : item.label), onRemove && /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+    className: DraggableList_default.removeButton,
+    onClick: handleRemove,
+    "aria-label": `Remove ${item.label}`
+  }, /* @__PURE__ */ React10__default.default.createElement(RemoveIcon, {
+    className: DraggableList_default.icon
+  })));
+}
+function DraggableList({
+  items,
+  onReorder,
+  onRemove,
+  removeIconVariant = "cross",
+  renderContent,
+  emptyMessage,
+  className
+}) {
+  const itemIds = React10.useMemo(() => items.map((item) => item.id), [items]);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), core.useSensor(core.KeyboardSensor, {
+    coordinateGetter: sortable.sortableKeyboardCoordinates
+  }));
+  const handleDragEnd = React10.useCallback((event) => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder(oldIndex, newIndex);
+    }
+  }, [items, onReorder]);
+  const containerRef = React10.useRef(null);
+  useKeyboardEvents(containerRef);
+  const DndContext = core.DndContext;
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    ref: containerRef,
+    className: classNames7__default.default(DraggableList_default.draggableListContainer, className)
+  }, /* @__PURE__ */ React10__default.default.createElement(DndContext, {
+    sensors,
+    collisionDetection: core.closestCenter,
+    onDragEnd: handleDragEnd
+  }, /* @__PURE__ */ React10__default.default.createElement(sortable.SortableContext, {
+    items: itemIds,
+    strategy: sortable.verticalListSortingStrategy
+  }, items.map((item) => /* @__PURE__ */ React10__default.default.createElement(DraggableListItem, {
+    key: item.id,
+    item,
+    onRemove,
+    removeIconVariant,
+    renderContent
+  })))), items.length === 0 && emptyMessage && /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: DraggableList_default.emptyState
+  }, emptyMessage));
+}
+var useKeyboardEvents = (containerRef) => {
+  React10.useEffect(() => {
+    const el = containerRef.current;
+    if (el == null) {
+      return;
+    }
+    const ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+    function handleCapture(event) {
+      if (!ARROW_KEYS.has(event.key)) {
+        return;
+      }
+      if (el.querySelector('[data-dragging="true"]') == null) {
+        return;
+      }
+      event.stopPropagation();
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: event.key,
+        code: event.code,
+        bubbles: true
+      }));
+    }
+    el.addEventListener("keydown", handleCapture, true);
+    return () => el.removeEventListener("keydown", handleCapture, true);
+  }, [containerRef]);
+};
+
+// src/base-components/search-bar/SearchBar.module.css
+var SearchBar_default = {};
+
+// src/base-components/search-bar/SearchBar.tsx
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search",
+  "aria-label": ariaLabel,
+  className,
+  onKeyDown
+}) {
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(SearchBar_default.searchBar, className)
+  }, /* @__PURE__ */ React10__default.default.createElement(icons.Search, {
+    className: SearchBar_default.searchIcon
+  }), /* @__PURE__ */ React10__default.default.createElement(input.Input, {
+    type: "text",
+    placeholder,
+    "aria-label": ariaLabel ?? placeholder,
+    value,
+    onChange,
+    className: SearchBar_default.searchInput,
+    onKeyDown
+  }));
+}
+
+// src/object-table/ColumnConfigDialog.module.css
+var ColumnConfigDialog_default = {};
+
+// src/object-table/ColumnConfigDialog.tsx
+function ColumnConfigDialog({
+  isOpen,
+  onClose,
+  columnOptions,
+  currentVisibility,
+  currentColumnOrder,
+  onApply,
+  isValidConfig
+}) {
+  const [visibleColumns, setVisibleColumns] = React10.useState([]);
+  const [searchQuery, setSearchQuery] = React10.useState("");
+  const allColumns = React10.useMemo(() => {
+    return columnOptions.map((opt) => {
+      const isVisible = currentVisibility ? currentVisibility[opt.id] : false;
+      return {
+        id: opt.id,
+        label: opt.name,
+        isVisible
+      };
+    });
+  }, [columnOptions, currentVisibility]);
+  React10.useEffect(() => {
+    if (isOpen) {
+      const visibleCols = allColumns.filter((col) => col.isVisible);
+      if (!!currentColumnOrder?.length) {
+        visibleCols.sort((a, b) => {
+          const indexA = currentColumnOrder.indexOf(a.id);
+          const indexB = currentColumnOrder.indexOf(b.id);
+          const orderA = indexA === -1 ? Infinity : indexA;
+          const orderB = indexB === -1 ? Infinity : indexB;
+          return orderA - orderB;
+        });
+      }
+      setVisibleColumns(visibleCols);
+      setSearchQuery("");
+    }
+  }, [isOpen, allColumns, currentColumnOrder]);
+  const handleApply = React10.useCallback(() => {
+    onApply(getColumnConfig(allColumns, visibleColumns));
+    onClose();
+  }, [allColumns, visibleColumns, onApply, onClose]);
+  const isValid = isValidConfig ? isValidConfig(getColumnConfig(allColumns, visibleColumns)) : true;
+  const isApplyDisabled = visibleColumns.length === 0 || !isValid;
+  const handleReorderColumns = React10.useCallback((fromIndex, toIndex) => {
+    setVisibleColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
+  }, []);
+  const handleRemoveColumn = React10.useCallback((columnId) => {
+    setVisibleColumns((prev) => prev.filter((col) => col.id !== columnId));
+  }, []);
+  const handleToggleColumn = React10.useCallback((column) => {
+    setVisibleColumns((prev) => {
+      const isCurrentlyVisible = prev.some((col) => col.id === column.id);
+      if (isCurrentlyVisible) {
+        return prev.filter((col) => col.id !== column.id);
+      } else {
+        return [...prev, column];
+      }
+    });
+  }, []);
+  const handleSearchChange = React10.useCallback((event) => {
+    setSearchQuery(event.target.value);
+  }, []);
+  const handleSelectAll = React10.useCallback((columns) => {
+    setVisibleColumns((prev) => {
+      const allSelected = columns.every((col) => prev.some((v) => v.id === col.id));
+      if (allSelected) {
+        return prev.filter((v) => !columns.some((col) => col.id === v.id));
+      } else {
+        const newColumns = columns.filter((col) => !prev.some((v) => v.id === col.id));
+        return [...prev, ...newColumns];
+      }
+    });
+  }, []);
+  const filteredAvailableColumns = React10.useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    if (!query) {
+      return allColumns;
+    }
+    return allColumns.filter((col) => (col.label?.toLowerCase().includes(query) ?? false) || col.id.toLowerCase().includes(query));
+  }, [allColumns, searchQuery]);
+  const footer = React10.useMemo(() => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+    onClick: onClose
+  }, "Cancel"), /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleApply,
+    disabled: isApplyDisabled
+  }, "Apply")), [onClose, handleApply, isApplyDisabled]);
+  return /* @__PURE__ */ React10__default.default.createElement(Dialog, {
+    isOpen,
+    onOpenChange: onClose,
+    title: DialogTitle,
+    footer,
+    className: ColumnConfigDialog_default.columnConfigDialog
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.dialogLayout
+  }, /* @__PURE__ */ React10__default.default.createElement(VisibleColumnsList, {
+    columns: visibleColumns,
+    onReorder: handleReorderColumns,
+    onRemove: handleRemoveColumn
+  }), /* @__PURE__ */ React10__default.default.createElement(AvailableColumnsList, {
+    visibleColumns,
+    searchQuery,
+    onSearchChange: handleSearchChange,
+    onToggleColumn: handleToggleColumn,
+    onSelectAll: handleSelectAll,
+    filteredColumns: filteredAvailableColumns
+  })));
+}
+var DialogTitle = /* @__PURE__ */ React10__default.default.createElement("div", {
+  className: ColumnConfigDialog_default.title
+}, /* @__PURE__ */ React10__default.default.createElement(icons.Cog, null), "Configure Table Columns");
+var getColumnConfig = (allColumns, visibleColumns) => {
+  const hiddenColumns = allColumns.filter((col) => !visibleColumns.some((v) => v.id === col.id));
+  return [...visibleColumns.map((col) => ({
+    columnId: col.id,
+    isVisible: true
+  })), ...hiddenColumns.map((col) => ({
+    columnId: col.id,
+    isVisible: false
+  }))];
+};
+function VisibleColumnsList({
+  columns,
+  onReorder,
+  onRemove
+}) {
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.visibleColumnsContainer
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.sectionHeader
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.sectionTitle
+  }, /* @__PURE__ */ React10__default.default.createElement("span", null, "Visible Columns"), /* @__PURE__ */ React10__default.default.createElement("span", {
+    className: ColumnConfigDialog_default.countTag
+  }, columns.length)), /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.sectionHint
+  }, "Drag to reorder")), /* @__PURE__ */ React10__default.default.createElement(DraggableList, {
+    items: columns,
+    onReorder,
+    onRemove,
+    removeIconVariant: "trash",
+    emptyMessage: "No visible columns",
+    className: ColumnConfigDialog_default.columnList
+  }));
+}
+function AvailableColumnsList({
+  visibleColumns,
+  searchQuery,
+  onSearchChange,
+  onToggleColumn,
+  onSelectAll,
+  filteredColumns
+}) {
+  const selectedCount = visibleColumns.length;
+  const totalCount = filteredColumns.length;
+  const allFilteredSelected = filteredColumns.every((col) => visibleColumns.some((v) => v.id === col.id));
+  const someFilteredSelected = filteredColumns.some((col) => visibleColumns.some((v) => v.id === col.id));
+  const handleSelectAllClick = React10.useCallback(() => {
+    onSelectAll(filteredColumns);
+  }, [filteredColumns, onSelectAll]);
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.availableColumnsContainer
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(ColumnConfigDialog_default.sectionHeader, ColumnConfigDialog_default.sectionTitle)
+  }, "Add or Remove Columns"), /* @__PURE__ */ React10__default.default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: onSearchChange,
+    placeholder: "Search...",
+    "aria-label": "Search available columns",
+    className: ColumnConfigDialog_default.searchContainer
+  }), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Root, {
+    defaultOpen: true,
+    className: ColumnConfigDialog_default.propertiesList
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.categoryHeader
+  }, /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+    checked: allFilteredSelected,
+    indeterminate: someFilteredSelected && !allFilteredSelected,
+    onCheckedChange: handleSelectAllClick,
+    className: ColumnConfigDialog_default.checkbox
+  }), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Trigger, {
+    className: ColumnConfigDialog_default.categoryTrigger
+  }, /* @__PURE__ */ React10__default.default.createElement("span", {
+    className: ColumnConfigDialog_default.categoryTitle
+  }, "All Columns"), /* @__PURE__ */ React10__default.default.createElement("span", {
+    className: ColumnConfigDialog_default.categoryCount
+  }, selectedCount, "/", totalCount), /* @__PURE__ */ React10__default.default.createElement(icons.CaretDown, {
+    className: ColumnConfigDialog_default.caretIcon
+  }))), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Panel, {
+    className: ColumnConfigDialog_default.propertyList
+  }, filteredColumns.length === 0 ? /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.emptyState
+  }, "No matching columns found") : filteredColumns.map((column) => /* @__PURE__ */ React10__default.default.createElement(PropertyItem, {
+    key: column.id,
+    column,
+    isSelected: visibleColumns.some((v) => v.id === column.id),
+    onToggle: onToggleColumn
+  })))));
+}
+function PropertyItem({
+  column,
+  isSelected,
+  onToggle,
+  showInfoIcon = false
+}) {
+  const handleClick = React10.useCallback(() => {
+    onToggle(column);
+  }, [onToggle, column]);
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: ColumnConfigDialog_default.propertyItem
+  }, /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+    checked: isSelected,
+    onCheckedChange: handleClick,
+    className: ColumnConfigDialog_default.checkbox
+  }), /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+    onClick: handleClick,
+    className: ColumnConfigDialog_default.propertyName
+  }, column.label), showInfoIcon && /* @__PURE__ */ React10__default.default.createElement(icons.SmallInfoSign, {
+    className: ColumnConfigDialog_default.infoIcon
+  }));
+}
+
+// src/object-table/MultiColumnSortDialog.module.css
+var MultiColumnSortDialog_default = {};
+function SortableItemsList({
+  items,
+  onReorder,
+  onRemove,
+  className
+}) {
+  const renderContent = React10.useCallback((item) => item.content, []);
+  return /* @__PURE__ */ React10__default.default.createElement(DraggableList, {
+    items,
+    onReorder,
+    onRemove,
+    removeIconVariant: "cross",
+    renderContent,
+    className
+  });
+}
+
+// src/object-table/MultiColumnSortDialog.tsx
+function MultiColumnSortDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentSorting,
+  columnOptions
+}) {
+  const [selectedSortColumns, setSelectedSortColumns] = React10.useState([]);
+  const [menuSearchQuery, setMenuSearchQuery] = React10.useState("");
+  React10.useEffect(() => {
+    if (isOpen) {
+      const selectedColumns = [];
+      for (const sort of currentSorting) {
+        const column = columnOptions.find((col) => col.id === sort.id);
+        if (column) {
+          selectedColumns.push({
+            ...column,
+            direction: sort.desc ? "desc" : "asc"
+          });
+        }
+      }
+      setSelectedSortColumns(selectedColumns);
+    }
+  }, [isOpen, currentSorting, columnOptions]);
+  const handleAddColumn = React10.useCallback((column) => {
+    setSelectedSortColumns((prev) => [...prev, {
+      ...column,
+      direction: "asc"
+    }]);
+  }, []);
+  const handleRemoveSortColumn = React10.useCallback((id) => {
+    setSelectedSortColumns((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const handleReorderSortColumns = React10.useCallback((fromIndex, toIndex) => {
+    setSelectedSortColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
+  }, []);
+  const handleToggleSortDirection = React10.useCallback((id) => {
+    setSelectedSortColumns((prev) => prev.map((item) => item.id === id ? {
+      ...item,
+      direction: item.direction === "asc" ? "desc" : "asc"
+    } : item));
+  }, []);
+  const handleApply = React10.useCallback(() => {
+    const sortingState = selectedSortColumns.map((col) => ({
+      id: col.id,
+      desc: col.direction === "desc"
+    }));
+    onApply(sortingState);
+    onClose();
+  }, [selectedSortColumns, onApply, onClose]);
+  const availableColumns = React10.useMemo(() => columnOptions.filter((col) => col.canSort && !selectedSortColumns.some((selected) => selected.id === col.id)), [columnOptions, selectedSortColumns]);
+  const filteredAvailableColumns = React10.useMemo(() => {
+    const query = menuSearchQuery.toLowerCase().trim();
+    if (!query) {
+      return availableColumns;
+    }
+    return availableColumns.filter((col) => col.name.toLowerCase().includes(query));
+  }, [availableColumns, menuSearchQuery]);
+  const handleMenuSearchChange = React10.useCallback((event) => {
+    setMenuSearchQuery(event.target.value);
+  }, []);
+  const handleMenuOpenChange = React10.useCallback((open) => {
+    if (open) {
+      setMenuSearchQuery("");
+    }
+  }, []);
+  const sortableItems = React10.useMemo(() => {
+    return selectedSortColumns.map((item) => ({
+      id: item.id,
+      label: item.name,
+      content: /* @__PURE__ */ React10__default.default.createElement("div", {
+        className: MultiColumnSortDialog_default.sortColumnItem
+      }, /* @__PURE__ */ React10__default.default.createElement("span", {
+        className: classNames7__default.default(MultiColumnSortDialog_default.sortColumnName, MultiColumnSortDialog_default.truncate)
+      }, item.name), /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+        className: MultiColumnSortDialog_default.sortDirectionButton,
+        onClick: () => handleToggleSortDirection(item.id),
+        "aria-label": `Toggle sort direction for ${item.name}`
+      }, item.direction === "asc" ? /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabetical, {
+        className: MultiColumnSortDialog_default.sortIcon
+      }) : /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabeticalDesc, {
+        className: MultiColumnSortDialog_default.sortIcon
+      })))
+    }));
+  }, [selectedSortColumns, handleToggleSortDirection]);
+  const footer = React10.useMemo(() => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+    onClick: onClose
+  }, "Cancel"), /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleApply
+  }, "Apply")), [handleApply, onClose]);
+  return /* @__PURE__ */ React10__default.default.createElement(Dialog, {
+    isOpen,
+    onOpenChange: onClose,
+    title: DialogTitle2,
+    footer
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: MultiColumnSortDialog_default.sortColumnsList
+  }, /* @__PURE__ */ React10__default.default.createElement(SortableItemsList, {
+    items: sortableItems,
+    onReorder: handleReorderSortColumns,
+    onRemove: handleRemoveSortColumn,
+    className: MultiColumnSortDialog_default.sortableList
+  }), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Root, {
+    onOpenChange: handleMenuOpenChange
+  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Trigger, {
+    className: MultiColumnSortDialog_default.addColumnButton,
+    disabled: availableColumns.length === 0,
+    "aria-label": "Add column to sort"
+  }, /* @__PURE__ */ React10__default.default.createElement(icons.Add, {
+    className: MultiColumnSortDialog_default.addIcon
+  }), /* @__PURE__ */ React10__default.default.createElement("span", {
+    className: MultiColumnSortDialog_default.addColumnText
+  }, "Add Column to Sort"), /* @__PURE__ */ React10__default.default.createElement(icons.CaretDown, {
+    color: "currentColor"
+  })), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Positioner, {
+    className: MultiColumnSortDialog_default.menuPositioner,
+    sideOffset: 4
+  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Popup, {
+    className: MultiColumnSortDialog_default.dropdownMenu
+  }, /* @__PURE__ */ React10__default.default.createElement(SearchBar, {
+    value: menuSearchQuery,
+    onChange: handleMenuSearchChange,
+    placeholder: "Search columns",
+    "aria-label": "Search columns to sort",
+    className: MultiColumnSortDialog_default.menuSearchContainer,
+    onKeyDown: (e) => e.stopPropagation()
+  }), filteredAvailableColumns.map((column) => /* @__PURE__ */ React10__default.default.createElement(AvailableColumnMenuItem, {
+    key: column.id,
+    column,
+    onAddColumn: handleAddColumn
+  })), filteredAvailableColumns.length === 0 && /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: MultiColumnSortDialog_default.menuEmptyState
+  }, "No matching columns")))))));
+}
+var DialogTitle2 = /* @__PURE__ */ React10__default.default.createElement("div", {
+  className: MultiColumnSortDialog_default.title
+}, /* @__PURE__ */ React10__default.default.createElement(icons.Cog, null), "Sort on Multiple Columns");
+function AvailableColumnMenuItem({
+  column,
+  onAddColumn
+}) {
+  const onClick = React10.useCallback(() => onAddColumn(column), [onAddColumn, column]);
+  return /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Item, {
+    className: classNames7__default.default(MultiColumnSortDialog_default.dropdownItem, MultiColumnSortDialog_default.truncate),
+    onClick
+  }, column.name);
+}
+
 // src/object-table/TableHeader.module.css
 var TableHeader_default = {};
 
@@ -553,7 +1245,7 @@ var TableHeaderContent_default = {};
 function TableHeaderContent({
   header
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement("div", {
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
     className: TableHeaderContent_default.osdkHeaderContent
   }, reactTable.flexRender(header.column.columnDef.header, header.getContext()));
 }
@@ -568,24 +1260,38 @@ function HeaderMenuItem({
   label,
   active = false
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Item, {
+  return /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Item, {
     closeOnClick: true,
-    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
+    className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
     onClick
-  }, /* @__PURE__ */ React7__default.default.createElement(Icon, {
+  }, /* @__PURE__ */ React10__default.default.createElement(Icon, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React7__default.default.createElement("span", null, label));
+  }), /* @__PURE__ */ React10__default.default.createElement("span", null, label));
 }
 function TableHeaderWithPopover({
   header,
+  table,
   isColumnPinned,
-  setColumnPinning,
-  onSortChange,
-  onResetSize
+  onResetSize,
+  columnOptions,
+  featureFlags,
+  onOpenColumnConfig,
+  onOpenMultiSort
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const handlePinLeft = React7.useCallback(() => {
+  const {
+    showSortingItems = false,
+    showPinningItems = false,
+    showResizeItem = false,
+    showConfigItem = false
+  } = featureFlags ?? {};
+  const {
+    setColumnPinning,
+    setSorting
+  } = table;
+  const currentSorting = table.getState().sorting;
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const handlePinLeft = React10.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: [...prev.left || [], header.column.id],
@@ -593,7 +1299,7 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleUnpin = React7.useCallback(() => {
+  const handleUnpin = React10.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: prev.left?.filter((id) => id !== header.column.id) || [],
@@ -601,98 +1307,116 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleSortAscending = React7.useCallback(() => {
+  const handleSortAscending = React10.useCallback(() => {
     header.column.toggleSorting(false);
-    onSortChange?.([{
+    setSorting?.([{
       id: header.column.id,
       desc: false
     }]);
-  }, [header.column, onSortChange]);
-  const handleSortDescending = React7.useCallback(() => {
+  }, [header.column, setSorting]);
+  const handleSortDescending = React10.useCallback(() => {
     header.column.toggleSorting(true);
-    onSortChange?.([{
+    setSorting?.([{
       id: header.column.id,
       desc: true
     }]);
-  }, [header.column, onSortChange]);
-  const handleClearAllSorts = React7.useCallback(() => {
+  }, [header.column, setSorting]);
+  const handleClearAllSorts = React10.useCallback(() => {
     header.column.clearSorting();
-    onSortChange?.([]);
-  }, [header.column, onSortChange]);
-  const handleResetSize = React7.useCallback(() => {
+    setSorting?.([]);
+  }, [header.column, setSorting]);
+  const handleResetSize = React10.useCallback(() => {
     header.column.resetSize();
     if (onResetSize) {
       onResetSize();
     }
   }, [header.column, onResetSize]);
-  const handleInteraction = React7.useCallback((e) => {
+  const handleInteraction = React10.useCallback((e) => {
     e.preventDefault();
     setIsOpen((prev) => !prev);
   }, []);
+  const handleOpenColumnConfig = React10.useCallback(() => {
+    onOpenColumnConfig?.();
+    setIsOpen(false);
+  }, [onOpenColumnConfig]);
+  const handleOpenMultiSort = React10.useCallback(() => {
+    onOpenMultiSort?.();
+    setIsOpen(false);
+  }, [onOpenMultiSort]);
   const isSorted = header.column.getIsSorted();
   const isSortable = header.column.getCanSort();
-  return /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Root, {
+  const sortIndex = currentSorting?.findIndex((s) => s.id === header.column.id) ?? -1;
+  const hasAnyMenuItems = showPinningItems || showSortingItems && isSortable || showResizeItem || showConfigItem;
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Root, {
     open: isOpen,
     onOpenChange: setIsOpen
-  }, /* @__PURE__ */ React7__default.default.createElement("div", {
-    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
     onContextMenu: handleInteraction
-  }, /* @__PURE__ */ React7__default.default.createElement("div", {
-    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
-  }, isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(icons.Pin, {
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
+  }, isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(icons.Pin, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React7__default.default.createElement(TableHeaderContent, {
+  }), /* @__PURE__ */ React10__default.default.createElement(TableHeaderContent, {
     header
-  })), /* @__PURE__ */ React7__default.default.createElement("div", {
-    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
-  }, isSorted && /* @__PURE__ */ React7__default.default.createElement("div", {
+  })), /* @__PURE__ */ React10__default.default.createElement("div", {
+    className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
+  }, isSorted && /* @__PURE__ */ React10__default.default.createElement("div", {
     className: TableHeaderWithPopover_default.osdkCenterContainer
-  }, isSorted === "asc" ? /* @__PURE__ */ React7__default.default.createElement(icons.SortAlphabetical, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  }) : /* @__PURE__ */ React7__default.default.createElement(icons.SortAlphabeticalDesc, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  })), /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Trigger, {
+  }, isSorted === "asc" ? /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabetical, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon
+  }) : /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabeticalDesc, {
+    className: TableHeaderWithPopover_default.osdkHeaderIcon
+  }), currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ React10__default.default.createElement("span", {
+    className: TableHeaderWithPopover_default.sortIndex
+  }, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Trigger, {
     "aria-label": `Open header menu for column with id=${header.column.id}`,
-    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
-  }, /* @__PURE__ */ React7__default.default.createElement(icons.ChevronDown, {
+    className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
+  }, /* @__PURE__ */ React10__default.default.createElement(icons.ChevronDown, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }))), /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Portal, {
+  }))), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Portal, {
     container: document.body
-  }, /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Positioner, {
+  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Positioner, {
     sideOffset: 4
-  }, /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Popup, {
+  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Popup, {
     className: TableHeaderWithPopover_default.osdkHeaderPopup
-  }, !isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }, showPinningItems && !isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handlePinLeft,
     icon: icons.Pin,
     label: "Pin column"
-  }), isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }), showPinningItems && isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handleUnpin,
     icon: icons.Unpin,
     label: "Unpin Column",
     active: true
-  }), isSortable && /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }), showSortingItems && isSortable && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortAscending,
     icon: icons.SortAlphabetical,
     label: "Sort ascending",
     active: isSorted === "asc"
-  }), /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }), /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortDescending,
     icon: icons.SortAlphabeticalDesc,
     label: "Sort descending",
     active: isSorted === "desc"
-  })), !!isSorted && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+    onClick: handleOpenMultiSort,
+    icon: icons.Sort,
+    label: "Sort on multiple columns"
+  })), showSortingItems && !!currentSorting?.length && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handleClearAllSorts,
     icon: icons.Remove,
     label: "Clear all sorts"
-  }), /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
+  }), showResizeItem && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
     onClick: handleResetSize,
     icon: icons.VerticalDistribution,
     label: "Reset Column Size"
-  }))))));
+  }), showConfigItem && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+    onClick: handleOpenColumnConfig,
+    icon: icons.Settings,
+    label: "Configure Columns"
+  })))))));
 }
 
 // src/object-table/utils/getColumnPinningStyles.ts
@@ -708,14 +1432,80 @@ function getColumnPinningStyles(column) {
 }
 
 // src/object-table/TableHeader.tsx
+var getHeaderName = (column, allHeaders) => {
+  const {
+    id,
+    columnDef
+  } = column;
+  const header = allHeaders.find((header2) => header2.id === id);
+  const headerDef = columnDef.header;
+  if (headerDef) {
+    if (typeof headerDef === "string") {
+      return headerDef;
+    }
+    if (header) {
+      const displayedHeader = headerDef(header.getContext());
+      if (typeof displayedHeader === "string") return displayedHeader;
+    }
+  }
+  const {
+    meta
+  } = columnDef;
+  return meta?.columnName ?? id;
+};
 function TableHeader({
-  table
+  table,
+  headerMenuFeatureFlags
 }) {
+  const {
+    setColumnOrder,
+    setColumnVisibility,
+    setSorting
+  } = table;
+  const currentSorting = table.getState().sorting;
+  const currentVisibility = table.getState().columnVisibility;
+  const currentColumnOrder = table.getState().columnOrder;
   const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
-  return /* @__PURE__ */ React7__default.default.createElement("thead", {
+  const [configDialogOpen, setConfigDialogOpen] = React10.useState(false);
+  const [multiSortDialogOpen, setMultiSortDialogOpen] = React10.useState(false);
+  const handleOpenColumnConfig = React10.useCallback(() => {
+    setConfigDialogOpen(true);
+  }, []);
+  const handleCloseColumnConfig = React10.useCallback(() => {
+    setConfigDialogOpen(false);
+  }, []);
+  const handleOpenMultiSort = React10.useCallback(() => {
+    setMultiSortDialogOpen(true);
+  }, []);
+  const handleCloseMultiSort = React10.useCallback(() => {
+    setMultiSortDialogOpen(false);
+  }, []);
+  const handleApplyMultiSort = React10.useCallback((sortColumns) => {
+    setMultiSortDialogOpen(false);
+    setSorting?.(sortColumns);
+  }, [setSorting]);
+  const handleApplyColumnConfig = React10.useCallback((updates) => {
+    const newVisibilityState = {};
+    for (const update of updates) {
+      newVisibilityState[update.columnId] = update.isVisible;
+    }
+    setColumnOrder(updates.map((col) => col.columnId));
+    setColumnVisibility(newVisibilityState);
+  }, [setColumnOrder, setColumnVisibility]);
+  const columnOptions = React10.useMemo(() => {
+    const allHeaders = table.getHeaderGroups().flatMap((headerGroup) => headerGroup.headers);
+    return table.getAllColumns().filter((column) => column.id !== SELECTION_COLUMN_ID).map((column) => {
+      return {
+        id: column.id,
+        name: getHeaderName(column, allHeaders),
+        canSort: column.getCanSort()
+      };
+    });
+  }, [table]);
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement("thead", {
     className: TableHeader_default.osdkTableHeader,
     "data-resizing": isResizing
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React7__default.default.createElement("tr", {
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React10__default.default.createElement("tr", {
     key: headerGroup.id,
     className: TableHeader_default.osdkTableHeaderRow
   }, headerGroup.headers.map((header) => {
@@ -724,24 +1514,41 @@ function TableHeader({
     } = getColumnPinningStyles(header.column);
     const isColumnPinned = header.column.getIsPinned();
     const isSelectColumn = header.id === SELECTION_COLUMN_ID;
-    return /* @__PURE__ */ React7__default.default.createElement("th", {
+    return /* @__PURE__ */ React10__default.default.createElement("th", {
       key: header.id,
       "data-pinned": header.column.getIsPinned(),
       className: TableHeader_default.osdkTableHeaderCell,
       style: columnStyles
-    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React7__default.default.createElement(TableHeaderContent, {
+    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React10__default.default.createElement(TableHeaderContent, {
       header
-    }) : /* @__PURE__ */ React7__default.default.createElement(TableHeaderWithPopover, {
+    }) : /* @__PURE__ */ React10__default.default.createElement(TableHeaderWithPopover, {
+      table,
       header,
       isColumnPinned,
-      setColumnPinning: table.setColumnPinning
-    }), header.column.getCanResize() && /* @__PURE__ */ React7__default.default.createElement("div", {
+      columnOptions,
+      featureFlags: headerMenuFeatureFlags,
+      onOpenColumnConfig: handleOpenColumnConfig,
+      onOpenMultiSort: handleOpenMultiSort
+    }), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /* @__PURE__ */ React10__default.default.createElement("div", {
       className: TableHeader_default.osdkTableHeaderResizer,
       onDoubleClick: () => header.column.resetSize(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler()
     }));
-  }))));
+  })))), !!columnOptions?.length && /* @__PURE__ */ React10__default.default.createElement(ColumnConfigDialog, {
+    isOpen: configDialogOpen,
+    onClose: handleCloseColumnConfig,
+    columnOptions,
+    currentVisibility,
+    currentColumnOrder,
+    onApply: handleApplyColumnConfig
+  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React10__default.default.createElement(MultiColumnSortDialog, {
+    isOpen: multiSortDialogOpen,
+    onClose: handleCloseMultiSort,
+    columnOptions,
+    currentSorting,
+    onApply: handleApplyMultiSort
+  }));
 }
 
 // src/object-table/LoadingStateTable.tsx
@@ -753,15 +1560,15 @@ function LoadingStateTable({
   rowHeight = 40,
   columnWidth = 120
 }) {
-  const isSelectionEnabled = table.options.enableRowSelection;
-  const minHeaderCount = isSelectionEnabled ? 1 : 0;
-  const headers = headerGroups[0]?.headers ?? [];
+  const enableRowSelection = table.options.enableRowSelection;
+  const minHeaderCount = enableRowSelection ? 1 : 0;
+  const headers = React10.useMemo(() => headerGroups.length > 0 ? headerGroups[0].headers : [], [headerGroups]);
   const hasHeadersLoaded = headers.length > minHeaderCount;
-  const headerRef = React7.useRef(null);
-  const bodyRef = React7.useRef(null);
-  const [loadingRowCount, setLoadingRowCount] = React7.useState(MIN_ROWS);
-  const [loadingColumnCount, setLoadingColumnCount] = React7.useState(headers.length);
-  React7.useEffect(() => {
+  const headerRef = React10.useRef(null);
+  const bodyRef = React10.useRef(null);
+  const [loadingRowCount, setLoadingRowCount] = React10.useState(MIN_ROWS);
+  const [loadingColumnCount, setLoadingColumnCount] = React10.useState(headers.length);
+  React10.useEffect(() => {
     if (hasHeadersLoaded) {
       setLoadingColumnCount(headers.length);
     } else {
@@ -774,7 +1581,7 @@ function LoadingStateTable({
       }
     }
   }, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);
-  React7.useEffect(() => {
+  React10.useEffect(() => {
     if (tableContainerRef.current) {
       const containerHeight = tableContainerRef.current.clientHeight;
       const availableHeight = containerHeight - rowHeight;
@@ -784,32 +1591,32 @@ function LoadingStateTable({
       }
     }
   }, [tableContainerRef, rowHeight]);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React7__default.default.createElement(TableHeader, {
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React10__default.default.createElement(TableHeader, {
     table
-  }) : /* @__PURE__ */ React7__default.default.createElement("thead", {
+  }) : /* @__PURE__ */ React10__default.default.createElement("thead", {
     className: TableHeader_default.osdkTableHeader,
     ref: headerRef
-  }, /* @__PURE__ */ React7__default.default.createElement("tr", {
+  }, /* @__PURE__ */ React10__default.default.createElement("tr", {
     className: TableHeader_default.osdkTableHeaderRow
   }, Array.from({
     length: loadingColumnCount
   }).map((_, index) => {
     const width = headers.length > index ? headers[index].getSize() : columnWidth;
-    return /* @__PURE__ */ React7__default.default.createElement("th", {
+    return /* @__PURE__ */ React10__default.default.createElement("th", {
       key: `loading-header-${index}`,
       className: TableHeader_default.osdkTableHeaderCell,
       style: {
         width
       }
-    }, /* @__PURE__ */ React7__default.default.createElement("div", {
-      className: classNames2__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
+    }, /* @__PURE__ */ React10__default.default.createElement("div", {
+      className: classNames7__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
     }));
-  }))), /* @__PURE__ */ React7__default.default.createElement("tbody", {
+  }))), /* @__PURE__ */ React10__default.default.createElement("tbody", {
     className: TableBody_default.osdkTableBody,
     ref: bodyRef
   }, Array.from({
     length: loadingRowCount
-  }).map((_, index) => /* @__PURE__ */ React7__default.default.createElement(LoadingRow, {
+  }).map((_, index) => /* @__PURE__ */ React10__default.default.createElement(LoadingRow, {
     key: `skeleton-${index}`,
     columnCount: loadingColumnCount,
     headers,
@@ -826,9 +1633,9 @@ var NonIdealState_default = {};
 function NonIdealState({
   message
 }) {
-  return /* @__PURE__ */ React7__default.default.createElement("div", {
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
     className: NonIdealState_default.container
-  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
     className: NonIdealState_default.message
   }, message));
 }
@@ -846,8 +1653,8 @@ function CellContextMenu({
   onClose,
   renderContent
 }) {
-  const ref = React7.useRef(null);
-  React7.useEffect(() => {
+  const ref = React10.useRef(null);
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         onClose();
@@ -858,7 +1665,7 @@ function CellContextMenu({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
-  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React7__default.default.createElement("div", {
+  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React10__default.default.createElement("div", {
     ref,
     className: CellContextMenu_default.osdkCellContextMenu,
     style: {
@@ -871,9 +1678,9 @@ function CellContextMenu({
 var useCellContextMenu = ({
   tdRef
 }) => {
-  const [popoverPosition, setPopoverPosition] = React7.useState(null);
-  const [isContextMenuOpen, setIsContextMenuOpen] = React7.useState(false);
-  const handleOpenContextMenu = React7.useCallback((event) => {
+  const [popoverPosition, setPopoverPosition] = React10.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React10.useState(false);
+  const handleOpenContextMenu = React10.useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
     if (tdRef.current) {
@@ -887,7 +1694,7 @@ var useCellContextMenu = ({
       setIsContextMenuOpen(true);
     }
   }, [tdRef]);
-  const handleCloseContextMenu = React7.useCallback(() => {
+  const handleCloseContextMenu = React10.useCallback(() => {
     setIsContextMenuOpen(false);
     setPopoverPosition(null);
   }, []);
@@ -904,7 +1711,7 @@ function TableCell({
   cell,
   renderCellContextMenu
 }) {
-  const tdRef = React7.useRef(null);
+  const tdRef = React10.useRef(null);
   const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
   const {
     isContextMenuOpen,
@@ -918,15 +1725,15 @@ function TableCell({
   const {
     columnStyles
   } = getColumnPinningStyles(cell.column);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement("td", {
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement("td", {
     ref: tdRef,
     "data-pinned": cell.column.getIsPinned(),
     className: TableCell_default.osdkTableCell,
     style: columnStyles,
     onContextMenu: handleOpenContextMenu
-  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+  }, /* @__PURE__ */ React10__default.default.createElement("div", {
     className: TableCell_default.osdkTableCellContent
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React7__default.default.createElement(CellContextMenu, {
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React10__default.default.createElement(CellContextMenu, {
     cell,
     position: popoverPosition,
     onClose: handleCloseContextMenu,
@@ -941,10 +1748,10 @@ function TableRow({
   onRowClick,
   renderCellContextMenu
 }) {
-  const handleClick = React7.useCallback(() => {
+  const handleClick = React10.useCallback(() => {
     onRowClick?.(row.original);
   }, [onRowClick, row.original]);
-  return /* @__PURE__ */ React7__default.default.createElement("tr", {
+  return /* @__PURE__ */ React10__default.default.createElement("tr", {
     "data-selected": row.getIsSelected(),
     className: TableRow_default.osdkTableRow,
     style: {
@@ -952,7 +1759,7 @@ function TableRow({
       transform: `translateY(${virtualRow.start}px)`
     },
     onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React7__default.default.createElement(TableCell, {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React10__default.default.createElement(TableCell, {
     key: cell.id,
     cell,
     renderCellContextMenu
@@ -975,27 +1782,27 @@ function TableBody({
     getScrollElement: () => tableContainerRef.current,
     overscan: 5
   });
-  React7.useLayoutEffect(() => {
+  React10.useLayoutEffect(() => {
     rowVirtualizer.measure();
   }, [rowVirtualizer, rows.length]);
   const totalSize = rowVirtualizer.getTotalSize();
   const bodyHeight = isLoadingMore ? totalSize + rowHeight : totalSize;
   const headers = headerGroups[0]?.headers ?? [];
-  return /* @__PURE__ */ React7__default.default.createElement("tbody", {
+  return /* @__PURE__ */ React10__default.default.createElement("tbody", {
     className: TableBody_default.osdkTableBody,
     style: {
       height: `${bodyHeight}px`
     }
   }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
     const row = rows[virtualRow.index];
-    return /* @__PURE__ */ React7__default.default.createElement(TableRow, {
+    return /* @__PURE__ */ React10__default.default.createElement(TableRow, {
       key: row.id,
       row,
       virtualRow,
       onRowClick,
       renderCellContextMenu
     });
-  }), isLoadingMore && /* @__PURE__ */ React7__default.default.createElement(LoadingRow, {
+  }), isLoadingMore && /* @__PURE__ */ React10__default.default.createElement(LoadingRow, {
     headers,
     translateY: totalSize,
     rowHeight,
@@ -1012,17 +1819,18 @@ function BaseTable({
   rowHeight,
   renderCellContextMenu,
   className,
-  error
+  error,
+  headerMenuFeatureFlags
 }) {
-  const tableContainerRef = React7.useRef(null);
-  const [isLoadingMore, setIsLoadingMore] = React7.useState(false);
-  const fetchingRef = React7.useRef(false);
-  React7.useEffect(() => {
+  const tableContainerRef = React10.useRef(null);
+  const [isLoadingMore, setIsLoadingMore] = React10.useState(false);
+  const fetchingRef = React10.useRef(false);
+  React10.useEffect(() => {
     if (!isLoading || fetchNextPage == null) {
       setIsLoadingMore(false);
     }
   }, [isLoading, fetchNextPage]);
-  const fetchMoreOnEndReached = React7.useCallback(async (containerRefElement) => {
+  const fetchMoreOnEndReached = React10.useCallback(async (containerRefElement) => {
     if (containerRefElement && !fetchingRef.current && !isLoadingMore) {
       const {
         scrollHeight,
@@ -1040,26 +1848,25 @@ function BaseTable({
       }
     }
   }, [fetchNextPage, isLoading, isLoadingMore]);
-  const handleScroll = React7.useCallback(async (e) => {
+  const handleScroll = React10.useCallback(async (e) => {
     await fetchMoreOnEndReached(e.currentTarget);
   }, [fetchMoreOnEndReached]);
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
   const hasData = rows.length > 0;
-  return /* @__PURE__ */ React7__default.default.createElement("div", {
+  return /* @__PURE__ */ React10__default.default.createElement("div", {
     ref: tableContainerRef,
-    className: classNames2__default.default(Table_default.osdkTableContainer, className),
+    className: classNames7__default.default(Table_default.osdkTableContainer, className),
     onScroll: handleScroll
-  }, /* @__PURE__ */ React7__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React7__default.default.createElement(LoadingStateTable, {
+  }, /* @__PURE__ */ React10__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React10__default.default.createElement(LoadingStateTable, {
     table,
     headerGroups,
     rowHeight,
     tableContainerRef
-  }) : /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(TableHeader, {
-    table
-  }), !hasData && error == null ? /* @__PURE__ */ React7__default.default.createElement(NonIdealState, {
-    message: "No Data"
-  }) : /* @__PURE__ */ React7__default.default.createElement(TableBody, {
+  }) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(TableHeader, {
+    table,
+    headerMenuFeatureFlags
+  }), /* @__PURE__ */ React10__default.default.createElement(TableBody, {
     rows,
     tableContainerRef,
     onRowClick,
@@ -1067,9 +1874,11 @@ function BaseTable({
     renderCellContextMenu,
     isLoadingMore,
     headerGroups
-  })), error != null && /* @__PURE__ */ React7__default.default.createElement(NonIdealState, {
+  }))), !hasData && error == null && /* @__PURE__ */ React10__default.default.createElement(NonIdealState, {
+    message: "No Data"
+  }), error != null && /* @__PURE__ */ React10__default.default.createElement(NonIdealState, {
     message: `Error Loading Data: ${error.message}`
-  })));
+  }));
 }
 
 // src/object-table/ObjectTable.tsx
@@ -1081,13 +1890,24 @@ function ObjectTable({
   defaultOrderBy,
   onOrderByChanged,
   onColumnsPinnedChanged,
+  onColumnResize,
   onRowSelection,
   renderCellContextMenu,
   selectionMode = "none",
   selectedRows,
+  onColumnVisibilityChanged,
+  enableOrdering = true,
+  enableColumnPinning = true,
+  enableColumnResizing = true,
+  enableColumnConfig = true,
   ...props
 }) {
-  const [columnSizing, setColumnSizing] = React7.useState({});
+  const {
+    columnSizing,
+    onColumnSizingChange
+  } = useColumnResize({
+    onColumnResize
+  });
   const {
     sorting,
     onSortingChange
@@ -1106,15 +1926,13 @@ function ObjectTable({
     columns,
     loading: isColumnsLoading
   } = useColumnDefs(objectType, columnDefinitions);
-  const columnVisibility = useColumnVisibility({
-    columnDefinitions
-  });
   const {
     rowSelection,
     isAllSelected,
     hasSelection,
     onToggleAll,
-    onToggleRow
+    onToggleRow,
+    enableRowSelection
   } = useRowSelection({
     selectionMode,
     selectedRows,
@@ -1128,32 +1946,45 @@ function ObjectTable({
     onToggleAll,
     onToggleRow
   });
-  const allColumns = React7.useMemo(() => {
-    return selectionColumn ? [selectionColumn, ...columns] : columns;
-  }, [selectionColumn, columns]);
+  const {
+    columnVisibility,
+    onColumnVisibilityChange,
+    columnOrder,
+    onColumnOrderChange
+  } = useColumnVisibility({
+    allColumns: columns,
+    onColumnVisibilityChanged
+  });
   const {
     columnPinning,
     onColumnPinningChange
   } = useColumnPinning({
     columnDefinitions,
-    hasSelectionColumn: selectionColumn != null,
+    hasSelectionColumn: enableRowSelection,
     onColumnsPinnedChanged
   });
+  const allColumns = React10.useMemo(() => {
+    return selectionColumn ? [selectionColumn, ...columns] : columns;
+  }, [selectionColumn, columns]);
   const table = reactTable.useReactTable({
     data: data ?? [],
     columns: allColumns,
     getCoreRowModel: reactTable.getCoreRowModel(),
     state: {
       columnVisibility,
+      columnOrder,
       rowSelection,
       sorting,
       columnSizing,
       columnPinning
     },
     onSortingChange,
-    onColumnSizingChange: setColumnSizing,
+    onColumnSizingChange,
     onColumnPinningChange,
-    enableRowSelection: selectionMode !== "none",
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    enableRowSelection,
+    enableSorting: enableOrdering,
     columnResizeMode: "onChange",
     columnResizeDirection: "ltr",
     manualSorting: true,
@@ -1163,11 +1994,17 @@ function ObjectTable({
     },
     getRowId
   });
-  const onRenderCellContextMenu = React7.useCallback((row, cell) => {
+  const onRenderCellContextMenu = React10.useCallback((row, cell) => {
     return renderCellContextMenu?.(row, cell.getValue());
   }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
-  return /* @__PURE__ */ React7__default.default.createElement(BaseTable, {
+  const headerMenuFeatureFlags = React10.useMemo(() => ({
+    showSortingItems: enableOrdering,
+    showPinningItems: enableColumnPinning,
+    showResizeItem: enableColumnResizing,
+    showConfigItem: enableColumnConfig
+  }), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
+  return /* @__PURE__ */ React10__default.default.createElement(BaseTable, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
@@ -1175,11 +2012,13 @@ function ObjectTable({
     rowHeight: props.rowHeight,
     renderCellContextMenu: onRenderCellContextMenu,
     className: props.className,
-    error
+    error,
+    headerMenuFeatureFlags
   });
 }
 
 exports.BaseTable = BaseTable;
+exports.ColumnConfigDialog = ColumnConfigDialog;
 exports.ObjectTable = ObjectTable;
 //# sourceMappingURL=experimental.cjs.map
 //# sourceMappingURL=experimental.cjs.map