@prorobotech/openapi-k8s-toolkit 1.5.0-alpha.6 → 1.5.0-alpha.7

package/dist/openapi-k8s-toolkit.es.js

@@ -1,2 +1,2 @@
-export { ai as BackToDefaultIcon, aP as BlackholeForm, aO as BlackholeFormProvider, aK as ClusterListTable, af as ConfirmModal, at as ContentCard, az as CursorDefaultDiv, ax as CursorPointerTag, ay as CursorPointerTagMinContent, aw as CustomSelect, D as DeleteIcon, l as DeleteModal, n as DeleteModalMany, ah as DownIcon, b0 as DynamicComponents, a$ as DynamicRenderer, b1 as DynamicRendererWithProviders, as as EarthIcon, h as EditIcon, aJ as EnrichedTable, E as EnrichedTableProvider, aB as ErrorBoundary, aC as ErrorBoundaryWithDataReset, a_ as Events, au as FlexGrow, an as LockedIcon, ar as LookingGlassIcon, aF as ManageableBreadcrumbs, aD as ManageableBreadcrumbsProvider, aI as ManageableSidebar, aG as ManageableSidebarProvider, aR as MarketPlace, aS as MarketplaceCard, am as MinusIcon, aV as NodeTerminal, i as PaddingContainer, ap as PauseCircleIcon, al as PlusIcon, aW as PodLogs, aX as PodLogsMonaco, aU as PodTerminal, aT as ProjectInfoCard, aA as ResourceLink, aq as ResumeCircleIcon, aZ as Search, ad as Spacer, aj as SuccessIcon, ae as TreeWithSearch, av as UncontrolledSelect, ao as UnlockedIcon, ag as UpIcon, aY as VMVNC, aN as YamlEditorSingleton, Q as checkIfApiInstanceNamespaceScoped, S as checkIfBuiltInInstanceNamespaceScoped, L as checkPermission, bx as convertBytes, bF as convertCompute, bC as convertCores, bA as convertStorage, bg as createContextFactory, q as createNewEntry, bi as deepMerge, t as deleteEntry, ak as feedbackIcons, N as filterIfApiInstanceNamespaceScoped, O as filterIfBuiltInInstanceNamespaceScoped, b4 as filterSelectOptions, b6 as floorToDecimal, by as formatBytesAuto, bD as formatCoresAuto, bH as formatDateAuto, bb as getAllPathsFromObj, z as getApiResourceSingle, G as getApiResourceTypes, H as getApiResourceTypesByApiGroup, y as getApiResources, B as getBuiltinResourceSingle, I as getBuiltinResourceTypes, A as getBuiltinResources, be as getBuiltinTreeData, o as getClusterList, J as getCrdData, F as getCrdResourceSingle, C as getCrdResources, K as getDirectUnknownResource, aL as getEnrichedColumns, aM as getEnrichedColumnsWithControls, bf as getGroupsByCategory, T as getKinds, br as getLinkToApiForm, bq as getLinkToBuiltinForm, k as getLinkToForm, bw as getNamespaceLink, aQ as getObjectFormItemsDraft, bc as getPrefixSubarrays, bv as getResourceLink, bj as getSortedKinds, bk as getSortedKindsAll, b5 as getStringByName, M as getSwagger, bm as getUppercase, bd as groupsToTreeData, bl as hslFromString, bu as includesArray, b3 as isFlatObject, bt as isMultilineFromYaml, bs as isMultilineString, bI as isValidRFC3339, bn as kindByGvr, bp as namespacedByGvr, ba as normalizeValuesForQuotasToNumber, bG as parseCoresWithUnit, b7 as parseQuotaValue, b8 as parseQuotaValueCpu, b9 as parseQuotaValueMemoryAndStorage, bB as parseValueWithUnit, x as patchEntryWithDeleteOp, w as patchEntryWithMergePatch, v as patchEntryWithReplaceOp, bo as pluralByKind, aE as prepareDataForManageableBreadcrumbs, aH as prepareDataForManageableSidebar, b2 as prepareTemplate, bh as prepareUrlsToFetchForDynamicRenderer, bz as toBytes, bE as toCores, r as updateEntry, W as useApiResourceSingle, a1 as useApiResourceTypesByGroup, V as useApiResources, a0 as useApisResourceTypes, Y as useBuiltinResourceSingle, a2 as useBuiltinResourceTypes, X as useBuiltinResources, U as useClusterList, a3 as useCrdData, $ as useCrdResourceSingle, Z as useCrdResources, e as useDirectUnknownResource, a5 as useInfiniteSentinel, f as useK8sSmartResource, a6 as useK8sVerbs, aa as useKinds, ab as useKindsRaw, a4 as useListWatch, a7 as useManyK8sSmartResource, d as usePermissions, ac as usePluginManifest, a9 as useResourceScope, a8 as useSmartResourceParams } from './index-C5cixTVm.mjs';
+export { ai as BackToDefaultIcon, aP as BlackholeForm, aO as BlackholeFormProvider, aK as ClusterListTable, af as ConfirmModal, at as ContentCard, az as CursorDefaultDiv, ax as CursorPointerTag, ay as CursorPointerTagMinContent, aw as CustomSelect, D as DeleteIcon, l as DeleteModal, n as DeleteModalMany, ah as DownIcon, b0 as DynamicComponents, a$ as DynamicRenderer, b1 as DynamicRendererWithProviders, as as EarthIcon, h as EditIcon, aJ as EnrichedTable, E as EnrichedTableProvider, aB as ErrorBoundary, aC as ErrorBoundaryWithDataReset, a_ as Events, au as FlexGrow, an as LockedIcon, ar as LookingGlassIcon, aF as ManageableBreadcrumbs, aD as ManageableBreadcrumbsProvider, aI as ManageableSidebar, aG as ManageableSidebarProvider, aR as MarketPlace, aS as MarketplaceCard, am as MinusIcon, aV as NodeTerminal, i as PaddingContainer, ap as PauseCircleIcon, al as PlusIcon, aW as PodLogs, aX as PodLogsMonaco, aU as PodTerminal, aT as ProjectInfoCard, aA as ResourceLink, aq as ResumeCircleIcon, aZ as Search, ad as Spacer, aj as SuccessIcon, ae as TreeWithSearch, av as UncontrolledSelect, ao as UnlockedIcon, ag as UpIcon, aY as VMVNC, aN as YamlEditorSingleton, Q as checkIfApiInstanceNamespaceScoped, S as checkIfBuiltInInstanceNamespaceScoped, L as checkPermission, bx as convertBytes, bF as convertCompute, bC as convertCores, bA as convertStorage, bg as createContextFactory, q as createNewEntry, bi as deepMerge, t as deleteEntry, ak as feedbackIcons, N as filterIfApiInstanceNamespaceScoped, O as filterIfBuiltInInstanceNamespaceScoped, b4 as filterSelectOptions, b6 as floorToDecimal, by as formatBytesAuto, bD as formatCoresAuto, bH as formatDateAuto, bb as getAllPathsFromObj, z as getApiResourceSingle, G as getApiResourceTypes, H as getApiResourceTypesByApiGroup, y as getApiResources, B as getBuiltinResourceSingle, I as getBuiltinResourceTypes, A as getBuiltinResources, be as getBuiltinTreeData, o as getClusterList, J as getCrdData, F as getCrdResourceSingle, C as getCrdResources, K as getDirectUnknownResource, aL as getEnrichedColumns, aM as getEnrichedColumnsWithControls, bf as getGroupsByCategory, T as getKinds, br as getLinkToApiForm, bq as getLinkToBuiltinForm, k as getLinkToForm, bw as getNamespaceLink, aQ as getObjectFormItemsDraft, bc as getPrefixSubarrays, bv as getResourceLink, bj as getSortedKinds, bk as getSortedKindsAll, b5 as getStringByName, M as getSwagger, bm as getUppercase, bd as groupsToTreeData, bl as hslFromString, bu as includesArray, b3 as isFlatObject, bt as isMultilineFromYaml, bs as isMultilineString, bI as isValidRFC3339, bn as kindByGvr, bp as namespacedByGvr, ba as normalizeValuesForQuotasToNumber, bG as parseCoresWithUnit, b7 as parseQuotaValue, b8 as parseQuotaValueCpu, b9 as parseQuotaValueMemoryAndStorage, bB as parseValueWithUnit, x as patchEntryWithDeleteOp, w as patchEntryWithMergePatch, v as patchEntryWithReplaceOp, bo as pluralByKind, aE as prepareDataForManageableBreadcrumbs, aH as prepareDataForManageableSidebar, b2 as prepareTemplate, bh as prepareUrlsToFetchForDynamicRenderer, bz as toBytes, bE as toCores, r as updateEntry, W as useApiResourceSingle, a1 as useApiResourceTypesByGroup, V as useApiResources, a0 as useApisResourceTypes, Y as useBuiltinResourceSingle, a2 as useBuiltinResourceTypes, X as useBuiltinResources, U as useClusterList, a3 as useCrdData, $ as useCrdResourceSingle, Z as useCrdResources, e as useDirectUnknownResource, a5 as useInfiniteSentinel, f as useK8sSmartResource, a6 as useK8sVerbs, aa as useKinds, ab as useKindsRaw, a4 as useListWatch, a7 as useManyK8sSmartResource, d as usePermissions, ac as usePluginManifest, a9 as useResourceScope, a8 as useSmartResourceParams } from './index-DxI19K37.mjs';
 //# sourceMappingURL=openapi-k8s-toolkit.es.js.map

package/dist/openapi-k8s-toolkit.umd.js

@@ -34587,6 +34587,18 @@
   && .ant-table-expanded-row-fixed {
     width: auto !important;
   }
+
+  /* Virtual tables keep rc-virtual-list's own scrollbar; the custom synced scrollbar is disabled for them. */
+  && .ant-table:not(.ant-table-virtual) .ant-table-content,
+  && .ant-table:not(.ant-table-virtual) .ant-table-body {
+    scrollbar-width: none;
+  }
+
+  && .ant-table:not(.ant-table-virtual) .ant-table-content::-webkit-scrollbar,
+  && .ant-table:not(.ant-table-virtual) .ant-table-body::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
 `;
   const HideableControls = styled.div`
   && .ant-table-row .hideable {
@@ -34656,6 +34668,196 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Flex, { wrap: "nowrap", gap: "4px", children: renderTableTags(tags) });
   };
 
+  const SCROLLABLE_TABLE_SELECTOR = ".ant-table-body, .ant-table-content";
+  const EMPTY_SCROLLBAR_METRICS = {
+    clientWidth: 0,
+    scrollWidth: 0,
+    visible: false
+  };
+  const HorizontalScrollbar = styled.div`
+  position: sticky;
+  bottom: var(--enriched-table-scrollbar-bottom-offset, 0px);
+  z-index: 1056;
+  height: 14px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: transparent;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
+
+  &::-webkit-scrollbar {
+    height: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.35);
+    background-clip: content-box;
+    border: 3px solid transparent;
+    border-radius: 999px;
+  }
+`;
+  const HorizontalScrollbarInner = styled.div`
+  height: 1px;
+`;
+  const SyncedHorizontalScrollbar = ({
+    tableContainerRef,
+    disabled = false
+  }) => {
+    const scrollbarRef = React$1.useRef(null);
+    const tableScrollerRef = React$1.useRef(null);
+    const isSyncingRef = React$1.useRef(false);
+    const refreshRafRef = React$1.useRef(null);
+    const [metrics, setMetrics] = React$1.useState(EMPTY_SCROLLBAR_METRICS);
+    const [scrollerBinding, setScrollerBinding] = React$1.useState({
+      scroller: null,
+      content: null
+    });
+    const releaseSyncLock = React$1.useCallback(() => {
+      if (typeof window.requestAnimationFrame !== "function") {
+        isSyncingRef.current = false;
+        return;
+      }
+      window.requestAnimationFrame(() => {
+        isSyncingRef.current = false;
+      });
+    }, []);
+    const bindTableScroller = React$1.useCallback((tableScroller) => {
+      const tableScrollerContent = tableScroller?.firstElementChild || null;
+      tableScrollerRef.current = tableScroller;
+      setScrollerBinding(
+        (currentBinding) => currentBinding.scroller === tableScroller && currentBinding.content === tableScrollerContent ? currentBinding : {
+          scroller: tableScroller,
+          content: tableScrollerContent
+        }
+      );
+    }, []);
+    const findTableScroller = React$1.useCallback(
+      () => disabled ? null : tableContainerRef.current?.querySelector(SCROLLABLE_TABLE_SELECTOR) || null,
+      [disabled, tableContainerRef]
+    );
+    const updateMetrics = React$1.useCallback((tableScroller) => {
+      tableScrollerRef.current = tableScroller;
+      if (!tableScroller) {
+        setMetrics((currentMetrics) => currentMetrics.visible ? EMPTY_SCROLLBAR_METRICS : currentMetrics);
+        return;
+      }
+      const nextMetrics = {
+        clientWidth: tableScroller.clientWidth,
+        scrollWidth: tableScroller.scrollWidth,
+        visible: tableScroller.scrollWidth > tableScroller.clientWidth + 1
+      };
+      setMetrics(
+        (currentMetrics) => currentMetrics.clientWidth === nextMetrics.clientWidth && currentMetrics.scrollWidth === nextMetrics.scrollWidth && currentMetrics.visible === nextMetrics.visible ? currentMetrics : nextMetrics
+      );
+      if (scrollbarRef.current && scrollbarRef.current.scrollLeft !== tableScroller.scrollLeft) {
+        scrollbarRef.current.scrollLeft = tableScroller.scrollLeft;
+      }
+    }, []);
+    const refreshTableScroller = React$1.useCallback(() => {
+      const tableScroller = findTableScroller();
+      bindTableScroller(tableScroller);
+      updateMetrics(tableScroller);
+    }, [bindTableScroller, findTableScroller, updateMetrics]);
+    const cancelScheduledRefresh = React$1.useCallback(() => {
+      if (refreshRafRef.current === null || typeof window.cancelAnimationFrame !== "function") {
+        return;
+      }
+      window.cancelAnimationFrame(refreshRafRef.current);
+      refreshRafRef.current = null;
+    }, []);
+    const scheduleRefreshTableScroller = React$1.useCallback(() => {
+      if (typeof window.requestAnimationFrame !== "function") {
+        refreshTableScroller();
+        return;
+      }
+      if (refreshRafRef.current !== null) {
+        return;
+      }
+      refreshRafRef.current = window.requestAnimationFrame(() => {
+        refreshRafRef.current = null;
+        refreshTableScroller();
+      });
+    }, [refreshTableScroller]);
+    React$1.useLayoutEffect(() => {
+      refreshTableScroller();
+    }, [refreshTableScroller]);
+    React$1.useEffect(() => {
+      refreshTableScroller();
+    }, [refreshTableScroller]);
+    React$1.useEffect(() => {
+      if (disabled || !tableContainerRef.current || typeof MutationObserver !== "function") {
+        return void 0;
+      }
+      const mutationObserver = new MutationObserver(scheduleRefreshTableScroller);
+      mutationObserver.observe(tableContainerRef.current, {
+        childList: true,
+        subtree: true
+      });
+      return () => {
+        cancelScheduledRefresh();
+        mutationObserver.disconnect();
+      };
+    }, [cancelScheduledRefresh, disabled, scheduleRefreshTableScroller, tableContainerRef]);
+    React$1.useEffect(() => cancelScheduledRefresh, [cancelScheduledRefresh]);
+    React$1.useEffect(() => {
+      const { scroller: tableScroller, content: tableScrollerContent } = scrollerBinding;
+      if (disabled) {
+        updateMetrics(null);
+        return void 0;
+      }
+      if (!tableScroller) {
+        return void 0;
+      }
+      const syncFromTable = () => {
+        if (isSyncingRef.current || !scrollbarRef.current) {
+          return;
+        }
+        isSyncingRef.current = true;
+        scrollbarRef.current.scrollLeft = tableScroller.scrollLeft;
+        releaseSyncLock();
+      };
+      tableScroller.addEventListener("scroll", syncFromTable, { passive: true });
+      window.addEventListener("resize", scheduleRefreshTableScroller);
+      const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => updateMetrics(tableScroller)) : void 0;
+      resizeObserver?.observe(tableScroller);
+      if (tableScrollerContent) {
+        resizeObserver?.observe(tableScrollerContent);
+      }
+      updateMetrics(tableScroller);
+      return () => {
+        tableScroller.removeEventListener("scroll", syncFromTable);
+        window.removeEventListener("resize", scheduleRefreshTableScroller);
+        resizeObserver?.disconnect();
+      };
+    }, [disabled, releaseSyncLock, scheduleRefreshTableScroller, scrollerBinding, updateMetrics]);
+    const syncFromScrollbar = React$1.useCallback(() => {
+      const tableScroller = tableScrollerRef.current;
+      if (isSyncingRef.current || !tableScroller || !scrollbarRef.current) {
+        return;
+      }
+      isSyncingRef.current = true;
+      tableScroller.scrollLeft = scrollbarRef.current.scrollLeft;
+      releaseSyncLock();
+    }, [releaseSyncLock]);
+    if (!metrics.visible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      HorizontalScrollbar,
+      {
+        ref: scrollbarRef,
+        "aria-hidden": "true",
+        "data-testid": "enriched-table-horizontal-scrollbar",
+        onScroll: syncFromScrollbar,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(HorizontalScrollbarInner, { style: { width: metrics.scrollWidth } })
+      }
+    );
+  };
+
   const isFlatObject = (obj) => {
     return Object.entries(obj).every(([, value]) => {
       return value === null || typeof value !== "object";
@@ -82325,13 +82527,16 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     shouldFixActionsColumn,
     currentFixed
   }) => {
+    if (currentFixed !== void 0) {
+      return currentFixed;
+    }
     if (shouldFixNameColumn) {
       return "left";
     }
     if (shouldFixActionsColumn) {
       return "right";
     }
-    return currentFixed;
+    return void 0;
   };
   const getFixedColumnWidth = ({
     possibleColWidth,
@@ -82466,9 +82671,11 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
       const possibleTooltip = additionalPrinterColumnsTooltips?.find(({ key }) => key === el.key)?.value;
       const possibleCustomTypeWithProps = additionalPrinterColumnsKeyTypeProps && el.key ? additionalPrinterColumnsKeyTypeProps[el.key.toString()] : void 0;
       const originalRender = el.render;
-      const shouldFixNameColumn = !hasFixedNameColumn && isNameColumn(el);
-      const shouldFixActionsColumn = possibleCustomTypeWithProps?.type === "factory" && hasFactoryItemOfType(possibleCustomTypeWithProps.customProps, "ActionsDropdown");
-      if (shouldFixNameColumn) {
+      const columnIsNameColumn = isNameColumn(el);
+      const canAutoFixColumn = el.fixed === void 0;
+      const shouldFixNameColumn = canAutoFixColumn && !hasFixedNameColumn && columnIsNameColumn;
+      const shouldFixActionsColumn = canAutoFixColumn && possibleCustomTypeWithProps?.type === "factory" && hasFactoryItemOfType(possibleCustomTypeWithProps.customProps, "ActionsDropdown");
+      if (columnIsNameColumn && !hasFixedNameColumn) {
         hasFixedNameColumn = true;
       }
       const useFactorySearch = possibleCustomTypeWithProps?.type === "factory";
@@ -82794,6 +83001,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     tableProps
   }) => {
     const navigate = reactRouterDom.useNavigate();
+    const tableContainerRef = React$1.useRef(null);
     if (!columns) {
       return null;
     }
@@ -82849,57 +83057,62 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableComponents.TableContainer,
       {
+        ref: tableContainerRef,
         $isDark: theme === "dark",
         $isCursorPointer: Boolean(pathToNavigate || rowClickable),
         $borderless: tableProps?.borderless,
         $isTotalLeft: tableProps?.isTotalLeft,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableComponents.HideableControls, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          antd.Table,
-          {
-            rowKey,
-            dataSource,
-            columns: columnsWithControls,
-            pagination: tableProps?.disablePagination ? false : {
-              position: tableProps?.paginationPosition || ["bottomLeft"],
-              showSizeChanger: true,
-              defaultPageSize: 10,
-              hideOnSinglePage: false,
-              showTotal
-            },
-            scroll: { x: "max-content", y: tableProps?.maxHeight },
-            virtual: tableProps?.virtual,
-            rowClassName,
-            rowSelection: selectData ? {
-              type: "checkbox",
-              fixed: "left",
-              columnWidth: 48,
-              selectedRowKeys: selectData.selectedRowKeys,
-              onChange: (selectedRowKeys, selectedRows) => {
-                const rows = selectedRows;
-                selectData.onChange(
-                  selectedRowKeys,
-                  rows.map(({ internalDataForControls }) => ({
-                    name: internalDataForControls.name,
-                    endpoint: `${internalDataForControls.deletePathPrefix}/${internalDataForControls.apiGroupAndVersion}${internalDataForControls.namespace ? `/namespaces/${internalDataForControls.namespace}` : ""}/${internalDataForControls.plural}/${internalDataForControls.name}`
-                  }))
-                );
-              }
-            } : void 0,
-            onRow: (record) => {
-              const consumerRowProps = onRow?.(record, void 0);
-              const navigationClickHandler = buildNavigationClickHandler(record);
-              return {
-                ...consumerRowProps,
-                onClick: (event) => {
-                  consumerRowProps?.onClick?.(event);
-                  if (!event.defaultPrevented) {
-                    navigationClickHandler();
-                  }
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableComponents.HideableControls, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            antd.Table,
+            {
+              rowKey,
+              dataSource,
+              columns: columnsWithControls,
+              pagination: tableProps?.disablePagination ? false : {
+                position: tableProps?.paginationPosition || ["bottomLeft"],
+                showSizeChanger: true,
+                defaultPageSize: 10,
+                hideOnSinglePage: false,
+                showTotal
+              },
+              scroll: { x: "max-content", y: tableProps?.maxHeight },
+              virtual: tableProps?.virtual,
+              rowClassName,
+              rowSelection: selectData ? {
+                type: "checkbox",
+                // Keep selection controls aligned with the fixed Name column.
+                fixed: "left",
+                columnWidth: 48,
+                selectedRowKeys: selectData.selectedRowKeys,
+                onChange: (selectedRowKeys, selectedRows) => {
+                  const rows = selectedRows;
+                  selectData.onChange(
+                    selectedRowKeys,
+                    rows.map(({ internalDataForControls }) => ({
+                      name: internalDataForControls.name,
+                      endpoint: `${internalDataForControls.deletePathPrefix}/${internalDataForControls.apiGroupAndVersion}${internalDataForControls.namespace ? `/namespaces/${internalDataForControls.namespace}` : ""}/${internalDataForControls.plural}/${internalDataForControls.name}`
+                    }))
+                  );
                 }
-              };
+              } : void 0,
+              onRow: (record) => {
+                const consumerRowProps = onRow?.(record, void 0);
+                const navigationClickHandler = buildNavigationClickHandler(record);
+                return {
+                  ...consumerRowProps,
+                  onClick: (event) => {
+                    consumerRowProps?.onClick?.(event);
+                    if (!event.defaultPrevented) {
+                      navigationClickHandler();
+                    }
+                  }
+                };
+              }
             }
-          }
-        ) })
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SyncedHorizontalScrollbar, { disabled: tableProps?.virtual, tableContainerRef })
+        ] })
       }
     );
   };
@@ -82917,6 +83130,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     tableProps
   }) => {
     const navigate = reactRouterDom.useNavigate();
+    const tableContainerRef = React$1.useRef(null);
     if (!columns) {
       return null;
     }
@@ -82957,54 +83171,58 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableComponents.TableContainer,
       {
+        ref: tableContainerRef,
         $isDark: theme === "dark",
         $isCursorPointer: Boolean(
           recordKeysForNavigation && (!!pathToNavigate || !!navigationSettings) || rowClickable
         ),
         $borderless: tableProps?.borderless,
         $isTotalLeft: tableProps?.isTotalLeft,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableComponents.HideableControls, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          antd.Table,
-          {
-            rowKey,
-            dataSource,
-            columns: enrichedColumns,
-            pagination: tableProps?.disablePagination ? false : {
-              position: tableProps?.paginationPosition || ["bottomLeft"],
-              showSizeChanger: true,
-              defaultPageSize: 10,
-              hideOnSinglePage: false,
-              showTotal
-            },
-            scroll: { x: "max-content", y: tableProps?.maxHeight },
-            virtual: tableProps?.virtual,
-            rowClassName,
-            onRow: (record) => {
-              const consumerRowProps = onRow?.(record, void 0);
-              return {
-                ...consumerRowProps,
-                onClick: async (event) => {
-                  consumerRowProps?.onClick?.(event);
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-                  if (recordKeysForNavigation) {
-                    const recordValueRaw = Array.isArray(recordKeysForNavigation) ? lodashExports.get(record, recordKeysForNavigation) : jp.query(record || {}, `$${recordKeysForNavigation}`)[0];
-                    const clusterName = typeof recordValueRaw === "string" ? recordValueRaw : void 0;
-                    const recordValue = typeof recordValueRaw === "string" ? recordValueRaw : JSON.stringify(recordValueRaw);
-                    const fetchedPathToNavigate = await tryGetPathFromNavigationResource(clusterName);
-                    const finalPathToNavigate = fetchedPathToNavigate || pathToNavigate;
-                    if (!finalPathToNavigate) {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableComponents.HideableControls, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            antd.Table,
+            {
+              rowKey,
+              dataSource,
+              columns: enrichedColumns,
+              pagination: tableProps?.disablePagination ? false : {
+                position: tableProps?.paginationPosition || ["bottomLeft"],
+                showSizeChanger: true,
+                defaultPageSize: 10,
+                hideOnSinglePage: false,
+                showTotal
+              },
+              scroll: { x: "max-content", y: tableProps?.maxHeight },
+              virtual: tableProps?.virtual,
+              rowClassName,
+              onRow: (record) => {
+                const consumerRowProps = onRow?.(record, void 0);
+                return {
+                  ...consumerRowProps,
+                  onClick: async (event) => {
+                    consumerRowProps?.onClick?.(event);
+                    if (event.defaultPrevented) {
                       return;
                     }
-                    const newPath = finalPathToNavigate.replaceAll("~recordValue~", recordValue);
-                    navigate(newPath);
+                    if (recordKeysForNavigation) {
+                      const recordValueRaw = Array.isArray(recordKeysForNavigation) ? lodashExports.get(record, recordKeysForNavigation) : jp.query(record || {}, `$${recordKeysForNavigation}`)[0];
+                      const clusterName = typeof recordValueRaw === "string" ? recordValueRaw : void 0;
+                      const recordValue = typeof recordValueRaw === "string" ? recordValueRaw : JSON.stringify(recordValueRaw);
+                      const fetchedPathToNavigate = await tryGetPathFromNavigationResource(clusterName);
+                      const finalPathToNavigate = fetchedPathToNavigate || pathToNavigate;
+                      if (!finalPathToNavigate) {
+                        return;
+                      }
+                      const newPath = finalPathToNavigate.replaceAll("~recordValue~", recordValue);
+                      navigate(newPath);
+                    }
                   }
-                }
-              };
+                };
+              }
             }
-          }
-        ) })
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SyncedHorizontalScrollbar, { disabled: tableProps?.virtual, tableContainerRef })
+        ] })
       }
     );
   };