@dynatrace/strato-components 3.6.0 → 3.7.0

package/esm/tables/DataTable/features/ColumnPinning/ColumnPinning.js

@@ -1,20 +1,23 @@
 import {
-  functionalUpdate,
-  memo
+  assignPrototypeAPIs,
+  assignTableAPIs
 } from "@tanstack/react-table";
-import { isEqual } from "lodash-es";
-import { useCallback, useMemo, useRef } from "react";
-import { pinColumns } from "./column-pinning-utils.js";
-import { useControllableState } from "../../../../core/hooks/useControllableState.js";
 import {
-  DATA_TABLE_BUILT_IN_COLUMN_IDS,
-  DATA_TABLE_ROW_ACTIONS_COLUMN_ID,
-  DATA_TABLE_ROW_DETAILS_COLUMN_ID,
-  DATA_TABLE_ROW_DRAG_COLUMN_ID,
-  DATA_TABLE_ROW_SELECTION_COLUMN_ID
-} from "../../constants.js";
+  table_getCenterVisibleLeafColumns,
+  table_getLeftVisibleLeafColumns,
+  table_getRightVisibleLeafColumns,
+  column_getIsPinned,
+  table_getCenterHeaderGroups,
+  table_getCenterLeafColumns,
+  table_getLeftHeaderGroups,
+  table_getLeftLeafColumns,
+  table_getRightHeaderGroups,
+  table_getRightLeafColumns,
+  table_getVisibleLeafColumns,
+  table_setColumnPinning
+} from "@tanstack/react-table/static-functions";
+import { pinColumns } from "./column-pinning-utils.js";
 import { isGroupColumnDef } from "../../hooks/useTable/datatable-typeguards.js";
-import { getMemoOptions } from "../../hooks/useTable/utils.js";
 import { getPrefixColumnWidth } from "../Layout/layout-utils.js";
 function computeLeftPinnedPosition(columnId, table) {
   const leftVisibleLeafColumns = table.getLeftVisibleLeafColumns();
@@ -34,8 +37,8 @@ function computeLeftPinnedPosition(columnId, table) {
     // use that instead of measured header, as prefix columns are also pinned when headers are hidden
     getPrefixColumnWidth(
       prevColumn,
-      table.getVisualVariantOptions().rowDensity,
-      table.options.rowThresholds
+      table.atoms.visualVariantConfig?.get().rowDensity,
+      table.optionsStore.state.rowThresholds
     )
   ) : table.getColumnOrHeaderWidth(prevColumn.id);
   const prevPosition = prevColumn.getLeftPinnedPosition() ?? 0;
@@ -56,366 +59,321 @@ function computeRightPinnedPosition(columnId, table) {
   const nextPosition = nextColumn.getRightPinnedPosition() ?? 0;
   return nextPosition + table.getColumnOrHeaderWidth(nextColumn.id);
 }
-const DataTableColumnPinning = {
-  createTable(table) {
-    table.getOrderedHeaderGroups = memo(
-      () => {
-        const state = table.getState();
-        return [
-          table.options.columns,
-          state.columnVisibility,
-          state.columnPinning,
-          state.columnOrder
-        ];
-      },
-      () => {
-        const leftGroups = table.getLeftHeaderGroups();
-        const centerGroups = table.getCenterHeaderGroups();
-        const rightGroups = table.getRightHeaderGroups();
-        const getOrderedHeaderGroup = (groupIndex) => [
-          ...leftGroups.at(groupIndex)?.headers ?? [],
-          ...centerGroups.at(groupIndex)?.headers ?? [],
-          ...rightGroups.at(groupIndex)?.headers ?? []
-        ];
-        return [getOrderedHeaderGroup(0), getOrderedHeaderGroup(1)];
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getOrderedHeaderGroups"
-      )
-    );
-  },
-  createHeader(header, table) {
-    header.getIsPinned = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const firstChild = header.subHeaders.at(0);
-        return firstChild?.getIsPinned() ?? false;
-      }
-      return header.column.getIsPinned();
-    };
-    header.getLeftPinnedPosition = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const firstChild = header.subHeaders.at(0);
-        return firstChild?.column.getLeftPinnedPosition();
-      }
-      return header.column.getLeftPinnedPosition();
-    };
-    header.getRightPinnedPosition = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const lastChild = header.subHeaders.at(-1);
-        return lastChild?.column.getRightPinnedPosition();
-      }
-      return header.column.getRightPinnedPosition();
-    };
-    header.getIsLastVisibleLeftPinnedHeader = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const lastChild = header.subHeaders.at(-1);
-        return lastChild?.column.getIsLastVisibleLeftPinnedColumn() ?? false;
-      }
-      return header.column.getIsLastVisibleLeftPinnedColumn();
-    };
-    header.getIsFirstVisibleUnpinnedHeader = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const firstChild = header.subHeaders.at(0);
-        return firstChild?.column.getIsFirstVisibleUnpinnedColumn() ?? false;
-      }
-      return header.column.getIsFirstVisibleUnpinnedColumn();
-    };
-    header.getIsLastVisibleUnpinnedHeader = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const lastChild = header.subHeaders.at(-1);
-        return lastChild?.column.getIsLastVisibleUnpinnedColumn() ?? false;
-      }
-      return header.column.getIsLastVisibleUnpinnedColumn();
-    };
-    header.getIsFirstVisibleRightPinnedHeader = () => {
-      if (isGroupColumnDef(header.column.columnDef)) {
-        const firstChild = header.subHeaders.at(0);
-        return firstChild?.column.getIsFirstVisibleRightPinnedColumn() ?? false;
-      }
-      return header.column.getIsFirstVisibleRightPinnedColumn();
-    };
-    header.pin = (position) => {
-      const { column, subHeaders: visibleSubHeaders } = header;
-      const idsToPin = isGroupColumnDef(column.columnDef) ? visibleSubHeaders.map((subHeader) => subHeader.column.id) : [column.id];
-      const pinningState = pinColumns(
-        idsToPin,
-        table.getState().columnPinning,
-        position
-      );
-      table.setColumnPinning(pinningState);
-    };
-  },
-  createColumn(column, table) {
-    let cachedLeftPinnedPosition;
-    column.getLeftPinnedPosition = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnSizingInfo.isResizingColumn,
-          state.columnVisibility,
-          state.columnPinning.left?.map((id) => `${id}:${table.getMeasuredColumnWidth(id)}`).join(),
-          table.options.columns
-        ];
-      },
-      (isResizingColumn) => {
-        if (isResizingColumn) {
-          if (cachedLeftPinnedPosition === void 0) {
-            cachedLeftPinnedPosition = computeLeftPinnedPosition(
-              column.id,
-              table
-            );
-          }
-          return cachedLeftPinnedPosition;
-        }
-        cachedLeftPinnedPosition = void 0;
-        return computeLeftPinnedPosition(column.id, table);
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getLeftPinnedPosition"
-      )
-    );
-    let cachedRightPinnedPosition;
-    column.getRightPinnedPosition = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnSizingInfo.isResizingColumn,
-          state.columnVisibility,
-          state.columnPinning.right?.map((id) => `${id}:${table.getMeasuredColumnWidth(id)}`).join(),
-          table.options.columns
-        ];
-      },
-      (isResizingColumn) => {
-        if (isResizingColumn) {
-          if (cachedRightPinnedPosition === void 0) {
-            cachedRightPinnedPosition = computeRightPinnedPosition(
-              column.id,
-              table
-            );
-          }
-          return cachedRightPinnedPosition;
-        }
-        cachedRightPinnedPosition = void 0;
-        return computeRightPinnedPosition(column.id, table);
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getRightPinnedPosition"
-      )
-    );
-    column.getIsLastVisibleLeftPinnedColumn = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnPinning.left,
-          state.columnVisibility,
-          table.options.columns
-        ];
-      },
-      () => {
-        const lastLeftVisibleLeafColumnId = table.getLeftVisibleLeafColumns().at(-1)?.id;
-        return column.id === lastLeftVisibleLeafColumnId || column.columns.some(
-          (childColumn) => childColumn.id === lastLeftVisibleLeafColumnId
-        );
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getIsLastVisibleLeftPinnedColumn"
-      )
-    );
-    column.getIsFirstVisibleUnpinnedColumn = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnPinning,
-          state.columnVisibility,
-          state.columnOrder,
-          table.options.columns
-        ];
-      },
-      () => {
-        const firstCenterVisibleLeafColumnId = table.getCenterVisibleLeafColumns().at(0)?.id;
-        return column.id === firstCenterVisibleLeafColumnId || column.columns.some(
-          (childColumn) => childColumn.id === firstCenterVisibleLeafColumnId
-        );
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getIsFirstVisibleUnpinnedColumn"
-      )
-    );
-    column.getIsLastVisibleUnpinnedColumn = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnPinning,
-          state.columnVisibility,
-          state.columnOrder,
-          table.options.columns
-        ];
-      },
-      () => {
-        const lastCenterVisibleLeafColumnId = table.getCenterVisibleLeafColumns().at(-1)?.id;
-        return column.id === lastCenterVisibleLeafColumnId || column.columns.some(
-          (childColumn) => childColumn.id === lastCenterVisibleLeafColumnId
-        );
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getIsLastVisibleUnpinnedColumn"
-      )
-    );
-    column.getIsFirstVisibleRightPinnedColumn = memo(
-      () => {
-        const state = table.getState();
-        return [
-          state.columnPinning.right,
-          state.columnVisibility,
-          table.options.columns
-        ];
-      },
-      () => {
-        const firstRightVisibleLeafColumnId = table.getRightVisibleLeafColumns().at(0)?.id;
-        return column.id === firstRightVisibleLeafColumnId || column.columns.some(
-          (childColumn) => childColumn.id === firstRightVisibleLeafColumnId
-        );
-      },
-      getMemoOptions(
-        table.options,
-        "debugColumns",
-        "column.getIsFirstVisibleRightPinnedColumn"
-      )
-    );
+function table_getOrderedHeaderGroups(table) {
+  const leftGroups = table_getLeftHeaderGroups(table);
+  const centerGroups = table_getCenterHeaderGroups(table);
+  const rightGroups = table_getRightHeaderGroups(table);
+  const getOrderedHeaderGroup = (groupIndex) => [
+    ...leftGroups.at(groupIndex)?.headers ?? [],
+    ...centerGroups.at(groupIndex)?.headers ?? [],
+    ...rightGroups.at(groupIndex)?.headers ?? []
+  ];
+  return [getOrderedHeaderGroup(0), getOrderedHeaderGroup(1)];
+}
+function header_getIsPinned(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const firstChild = header.subHeaders.at(0);
+    if (firstChild) {
+      return column_getIsPinned(firstChild.column);
+    }
+    return false;
   }
-};
-function isCustomColumn(columnId) {
-  return !DATA_TABLE_BUILT_IN_COLUMN_IDS.has(columnId);
+  return column_getIsPinned(header.column);
 }
-function removeBuiltinColumns(pinnedColumns) {
-  return pinnedColumns?.filter(isCustomColumn) ?? [];
+function header_getLeftPinnedPosition(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const firstChild = header.subHeaders.at(0);
+    if (firstChild) {
+      return column_getLeftPinnedPosition(firstChild.column);
+    }
+    return false;
+  }
+  return column_getLeftPinnedPosition(header.column);
 }
-function addBuiltinColumns(pinnedColumns, options) {
-  if (!pinnedColumns) {
-    return {};
+function header_getRightPinnedPosition(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const lastChild = header.subHeaders.at(-1);
+    if (lastChild) {
+      return column_getRightPinnedPosition(lastChild.column);
+    }
+    return false;
   }
-  const leftPinnedColumns = removeBuiltinColumns(pinnedColumns.left);
-  const rightPinnedColumns = removeBuiltinColumns(pinnedColumns.right);
-  if (options.enableRowDetails) {
-    leftPinnedColumns.unshift(DATA_TABLE_ROW_DETAILS_COLUMN_ID);
+  return column_getRightPinnedPosition(header.column);
+}
+function header_getIsLastVisibleLeftPinnedHeader(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const lastChild = header.subHeaders.at(-1);
+    if (lastChild) {
+      return column_getIsLastVisibleLeftPinnedColumn(lastChild.column);
+    }
+    return false;
   }
-  if (options.enableRowSelection) {
-    leftPinnedColumns.unshift(DATA_TABLE_ROW_SELECTION_COLUMN_ID);
+  return column_getIsLastVisibleLeftPinnedColumn(header.column);
+}
+function header_getIsFirstVisibleUnpinnedHeader(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const firstChild = header.subHeaders.at(0);
+    if (firstChild) {
+      return column_getIsFirstVisibleUnpinnedColumn(firstChild.column);
+    }
+    return false;
   }
-  if (options.enableRowOrderDragAndDrop) {
-    leftPinnedColumns.unshift(DATA_TABLE_ROW_DRAG_COLUMN_ID);
+  return column_getIsFirstVisibleUnpinnedColumn(header.column);
+}
+function header_getIsLastVisibleUnpinnedHeader(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const lastChild = header.subHeaders.at(-1);
+    if (lastChild) {
+      return column_getIsLastVisibleUnpinnedColumn(lastChild.column);
+    }
+    return false;
   }
-  if (options.enableRowActions) {
-    rightPinnedColumns.push(DATA_TABLE_ROW_ACTIONS_COLUMN_ID);
+  return column_getIsLastVisibleUnpinnedColumn(header.column);
+}
+function header_getIsFirstVisibleRightPinnedHeader(header) {
+  if (isGroupColumnDef(header.column.columnDef)) {
+    const firstChild = header.subHeaders.at(0);
+    if (firstChild) {
+      return column_getIsFirstVisibleRightPinnedColumn(firstChild.column);
+    }
+    return false;
   }
-  return {
-    left: leftPinnedColumns,
-    right: rightPinnedColumns
-  };
+  return column_getIsFirstVisibleRightPinnedColumn(header.column);
+}
+function header_pin(header, position) {
+  const { column, subHeaders: visibleSubHeaders } = header;
+  const idsToPin = isGroupColumnDef(column.columnDef) ? visibleSubHeaders.map((subHeader) => subHeader.column.id) : [column.id];
+  const columnPinningState = header.table.atoms.columnPinning.get();
+  const pinningState = pinColumns(idsToPin, columnPinningState, position);
+  table_setColumnPinning(header.column.table, pinningState);
+}
+function column_getLeftPinnedPosition(column, isResizingColumn) {
+  if (isResizingColumn) {
+    column._cachedLeftPinnedPosition ??= computeLeftPinnedPosition(
+      column.id,
+      column.table
+    );
+    return column._cachedLeftPinnedPosition;
+  }
+  column._cachedLeftPinnedPosition = void 0;
+  return computeLeftPinnedPosition(column.id, column.table);
+}
+function column_getRightPinnedPosition(column, isResizingColumn) {
+  if (isResizingColumn) {
+    column._cachedRightPinnedPosition ??= computeRightPinnedPosition(
+      column.id,
+      column.table
+    );
+    return column._cachedRightPinnedPosition;
+  }
+  column._cachedRightPinnedPosition = void 0;
+  return computeRightPinnedPosition(column.id, column.table);
 }
-function useColumnPinning(props, options) {
-  options.enableColumnPinning = props.columnPinning === true;
-  const {
-    enableColumnPinning,
-    enableRowDetails,
-    enableRowSelection,
-    enableRowOrderDragAndDrop,
-    enableRowActions
-  } = options;
-  const defaultPinnedColumns = useMemo(() => {
-    const userDefinedPinnedColumns = enableColumnPinning && props.defaultPinnedColumns ? props.defaultPinnedColumns : {};
-    return addBuiltinColumns(userDefinedPinnedColumns, {
-      enableRowDetails: !!enableRowDetails,
-      enableRowSelection: !!enableRowSelection,
-      enableRowOrderDragAndDrop: !!enableRowOrderDragAndDrop,
-      enableRowActions: !!enableRowActions
-    });
-  }, [
-    enableColumnPinning,
-    enableRowActions,
-    enableRowDetails,
-    enableRowOrderDragAndDrop,
-    enableRowSelection,
-    props.defaultPinnedColumns
-  ]);
-  const pinnedColumns = useMemo(
-    () => enableColumnPinning && props.pinnedColumns ? addBuiltinColumns(props.pinnedColumns, {
-      enableRowDetails: !!enableRowDetails,
-      enableRowSelection: !!enableRowSelection,
-      enableRowOrderDragAndDrop: !!enableRowOrderDragAndDrop,
-      enableRowActions: !!enableRowActions
-    }) : void 0,
-    [
-      enableColumnPinning,
-      enableRowActions,
-      enableRowDetails,
-      enableRowOrderDragAndDrop,
-      enableRowSelection,
-      props.pinnedColumns
-    ]
+function column_getIsLastVisibleLeftPinnedColumn(column) {
+  const lastLeftVisibleLeafColumnId = column.table.getLeftVisibleLeafColumns().at(-1)?.id;
+  return column.id === lastLeftVisibleLeafColumnId || column.columns.some(
+    (childColumn) => childColumn.id === lastLeftVisibleLeafColumnId
   );
-  const [columnPinning, setColumnPinning] = useControllableState({
-    value: pinnedColumns,
-    defaultValue: defaultPinnedColumns
-  });
-  options.state = {
-    ...options.state,
-    columnPinning: enableColumnPinning ? columnPinning : defaultPinnedColumns
-    // just built-in columns
-  };
-  options.onColumnPinningChange = useCallback(
-    (updater) => {
-      const nextState = functionalUpdate(updater, columnPinning);
-      if (isEqual(nextState, columnPinning)) {
-        return;
-      }
-      setColumnPinning(
-        addBuiltinColumns(nextState, {
-          enableRowDetails: !!enableRowDetails,
-          enableRowSelection: !!enableRowSelection,
-          enableRowOrderDragAndDrop: !!enableRowOrderDragAndDrop,
-          enableRowActions: !!enableRowActions
-        })
-      );
-      props.onPinnedColumnsChange?.({
-        left: removeBuiltinColumns(nextState.left),
-        right: removeBuiltinColumns(nextState.right)
+}
+function column_getIsFirstVisibleUnpinnedColumn(column) {
+  const firstCenterVisibleLeafColumnId = column.table.getCenterVisibleLeafColumns().at(0)?.id;
+  return column.id === firstCenterVisibleLeafColumnId || column.columns.some(
+    (childColumn) => childColumn.id === firstCenterVisibleLeafColumnId
+  );
+}
+function column_getIsLastVisibleUnpinnedColumn(column) {
+  const lastCenterVisibleLeafColumnId = column.table.getCenterVisibleLeafColumns().at(-1)?.id;
+  return column.id === lastCenterVisibleLeafColumnId || column.columns.some(
+    (childColumn) => childColumn.id === lastCenterVisibleLeafColumnId
+  );
+}
+function column_getIsFirstVisibleRightPinnedColumn(column) {
+  const firstRightVisibleLeafColumnId = column.table.getRightVisibleLeafColumns().at(0)?.id;
+  return column.id === firstRightVisibleLeafColumnId || column.columns.some(
+    (childColumn) => childColumn.id === firstRightVisibleLeafColumnId
+  );
+}
+function constructColumnPinningFeature() {
+  return {
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs("columnPinningFeature", prototype, table, {
+        column_getLeftPinnedPosition: {
+          fn: (column, isResizingColumn) => column_getLeftPinnedPosition(column, isResizingColumn),
+          memoDeps: () => [
+            table.atoms.columnResizing?.get()?.isResizingColumn,
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnPinning?.get()?.left?.map((id) => `${id}:${table.getMeasuredColumnWidth(id)}`).join(),
+            table.options.columns
+          ]
+        },
+        column_getRightPinnedPosition: {
+          fn: (column) => column_getRightPinnedPosition(column),
+          memoDeps: () => [
+            table.atoms.columnResizing?.get()?.isResizingColumn,
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnPinning?.get()?.right?.map((id) => `${id}:${table.getMeasuredColumnWidth(id)}`).join(),
+            table.optionsStore.state.columns
+          ]
+        },
+        column_getIsLastVisibleLeftPinnedColumn: {
+          fn: (column) => column_getIsLastVisibleLeftPinnedColumn(column),
+          memoDeps: () => [
+            table.atoms.columnPinning?.get()?.left,
+            table.atoms.columnVisibility?.get(),
+            table.optionsStore.state.columns
+          ]
+        },
+        column_getIsFirstVisibleUnpinnedColumn: {
+          fn: (column) => column_getIsFirstVisibleUnpinnedColumn(column),
+          memoDeps: () => [
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get(),
+            table.optionsStore.state.columns
+          ]
+        },
+        column_getIsLastVisibleUnpinnedColumn: {
+          fn: (column) => column_getIsLastVisibleUnpinnedColumn(column),
+          memoDeps: () => [
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get(),
+            table.optionsStore.state.columns
+          ]
+        },
+        column_getIsFirstVisibleRightPinnedColumn: {
+          fn: (column) => column_getIsFirstVisibleRightPinnedColumn(column),
+          memoDeps: () => [
+            table.atoms.columnPinning?.get()?.right,
+            table.atoms.columnVisibility?.get(),
+            table.optionsStore.state.columns
+          ]
+        }
       });
     },
-    [
-      columnPinning,
-      enableRowActions,
-      enableRowDetails,
-      enableRowOrderDragAndDrop,
-      enableRowSelection,
-      props,
-      setColumnPinning
-    ]
-  );
-  const originalColumnPinningRef = useRef();
-  if (!originalColumnPinningRef.current) {
-    const originalPinned = pinnedColumns || defaultPinnedColumns || [];
-    originalColumnPinningRef.current = {
-      left: originalPinned.left,
-      right: originalPinned.right
-    };
-  }
-  options.originalColumnPinning = originalColumnPinningRef.current;
+    assignHeaderPrototype: (prototype, table) => {
+      assignPrototypeAPIs("columnPinningFeature", prototype, table, {
+        header_getIsPinned: { fn: (header) => header_getIsPinned(header) },
+        header_getLeftPinnedPosition: {
+          fn: (header) => header_getLeftPinnedPosition(header)
+        },
+        header_getRightPinnedPosition: {
+          fn: (header) => header_getRightPinnedPosition(header)
+        },
+        header_getIsLastVisibleLeftPinnedHeader: {
+          fn: (header) => header_getIsLastVisibleLeftPinnedHeader(header)
+        },
+        header_getIsFirstVisibleUnpinnedHeader: {
+          fn: (header) => header_getIsFirstVisibleUnpinnedHeader(header)
+        },
+        header_getIsLastVisibleUnpinnedHeader: {
+          fn: (header) => header_getIsLastVisibleUnpinnedHeader(header)
+        },
+        header_getIsFirstVisibleRightPinnedHeader: {
+          fn: (header) => header_getIsFirstVisibleRightPinnedHeader(header)
+        },
+        header_pin: { fn: (header, position) => header_pin(header, position) }
+      });
+    },
+    constructTableAPIs: (table) => {
+      assignTableAPIs("columnPinningFeature", table, {
+        table_getOrderedHeaderGroups: {
+          fn: () => table_getOrderedHeaderGroups(table),
+          memoDeps: () => [
+            table.optionsStore.state.columns,
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getVisibleLeafColumns: {
+          fn: () => table_getVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get(),
+            table.optionsStore.state.columns
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getLeftLeafColumns: {
+          fn: () => table_getLeftLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getRightLeafColumns: {
+          fn: () => table_getRightLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getCenterLeafColumns: {
+          fn: () => table_getCenterLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getLeftVisibleLeafColumns: {
+          fn: () => table_getLeftVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getCenterVisibleLeafColumns: {
+          fn: () => table_getCenterVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        },
+        // Redeclare these here to add the columnOrder state to the dependencies.
+        table_getRightVisibleLeafColumns: {
+          fn: () => table_getRightVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get()
+          ]
+        }
+      });
+    }
+  };
 }
+const DataTableColumnPinningFeature = constructColumnPinningFeature();
 export {
-  DataTableColumnPinning,
-  useColumnPinning
+  DataTableColumnPinningFeature,
+  column_getIsFirstVisibleRightPinnedColumn,
+  column_getIsFirstVisibleUnpinnedColumn,
+  column_getIsLastVisibleLeftPinnedColumn,
+  column_getIsLastVisibleUnpinnedColumn,
+  column_getLeftPinnedPosition,
+  column_getRightPinnedPosition,
+  constructColumnPinningFeature,
+  header_getIsFirstVisibleRightPinnedHeader,
+  header_getIsFirstVisibleUnpinnedHeader,
+  header_getIsLastVisibleLeftPinnedHeader,
+  header_getIsLastVisibleUnpinnedHeader,
+  header_getIsPinned,
+  header_getLeftPinnedPosition,
+  header_getRightPinnedPosition,
+  header_pin,
+  table_getOrderedHeaderGroups
 };
 //# sourceMappingURL=ColumnPinning.js.map