npm - @canvas-components/react-pivot-table - Versions diffs - 0.2.18 → 0.2.19 - Mend

@canvas-components/react-pivot-table 0.2.18 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
-import { PivotTableOptions, PivotField, PivotFieldLayout, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
+import { PivotTableOptions, PivotFieldLayout, PivotField, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
 /** PivotTable 自定义字段面板配置。 */
 interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknown>> {
@@ -28,6 +28,8 @@ interface ReactPivotTableProps<RecordType = Record<string, unknown>> extends Omi
     style?: CSSProperties;
     /** 标题栏左侧内容。 */
     title?: ReactNode;
+    /** 初始透视字段区域；字段 key 从行、列、指标及 customization.fields 中查找，已缓存布局优先。 */
+    pivotAreas?: PivotFieldLayout;
     /** 开启字段自定义模式及右侧字段面板。 */
     customization?: boolean | ReactPivotTableCustomizationOptions<RecordType>;
 }

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
-import { PivotTableOptions, PivotField, PivotFieldLayout, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
+import { PivotTableOptions, PivotFieldLayout, PivotField, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
 /** PivotTable 自定义字段面板配置。 */
 interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknown>> {
@@ -28,6 +28,8 @@ interface ReactPivotTableProps<RecordType = Record<string, unknown>> extends Omi
     style?: CSSProperties;
     /** 标题栏左侧内容。 */
     title?: ReactNode;
+    /** 初始透视字段区域；字段 key 从行、列、指标及 customization.fields 中查找，已缓存布局优先。 */
+    pivotAreas?: PivotFieldLayout;
     /** 开启字段自定义模式及右侧字段面板。 */
     customization?: boolean | ReactPivotTableCustomizationOptions<RecordType>;
 }

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, Fragment as Fragment$1 } from 'react';
-import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotFieldLayout, DEFAULT_PIVOT_TABLE_DEBUG_OPTIONS, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
-import { ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactModal, ReactInput, ReactSelect, ReactInputNumber } from '@canvas-components/react-components';
+import { createPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotScrollbarConfig, loadPivotFieldLayout, DEFAULT_PIVOT_TABLE_DEBUG_OPTIONS, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, savePivotScrollbarConfig, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
+import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, setSharedScrollbarSettings, ReactInput, ReactSelect, ReactButton, ReactInputNumber } from '@canvas-components/react-components';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ReactListTableExportNameDialog, ReactListTable } from '@canvas-components/react-list-table';
 import { createPortal } from 'react-dom';
 import { CanvasChart } from '@canvas-components/chart';
@@ -37,83 +38,269 @@ var CONTEXT_MENU_SURFACE_STYLE = {
   boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
   fontSize: 14
 };
+function ScrollbarModeMenu(props) {
+  const { request, onOpenSettings } = props;
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u6EDA\u52A8\u6761\u6A21\u5F0F",
+      items: [
+        ["scrollbar", "\u6EDA\u52A8\u6761"],
+        ["button", "\u6309\u94AE"]
+      ].map(([mode, label]) => ({
+        key: `scrollbar-mode-${mode}`,
+        label,
+        selected: (request.scrollbar?.mode ?? "scrollbar") === mode,
+        onClick: () => {
+          request.onChangeScrollbar?.({
+            ...request.scrollbar,
+            mode,
+            horizontal: request.scrollbar?.horizontal === false ? false : { ...request.scrollbar?.horizontal, mode },
+            vertical: request.scrollbar?.vertical === false ? false : { ...request.scrollbar?.vertical, mode }
+          });
+          request.onClose();
+        }
+      })),
+      footer: /* @__PURE__ */ jsx(ReactButton, { onClick: onOpenSettings, children: "\u914D\u7F6E\u6EDA\u52A8\u6761\u5C5E\u6027" })
+    }
+  );
+}
+function ScrollbarCacheMenu(props) {
+  const { request } = props;
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u7F13\u5B58\u5230\u672C\u5730",
+      items: [
+        {
+          key: "cache-scrollbar",
+          label: "\u6EDA\u52A8\u6761",
+          selected: request.scrollbarCacheAvailable === true && request.cacheScrollbar !== false,
+          disabled: request.scrollbarCacheAvailable !== true,
+          onClick: () => request.onChangeCacheScrollbar?.(request.cacheScrollbar === false)
+        }
+      ]
+    }
+  );
+}
 function PivotContextMenu(props) {
   const { request } = props;
   const [menuOpen, setMenuOpen] = useState(true);
+  const [scrollbarSettingsRequest, setScrollbarSettingsRequest] = useState(null);
+  const [scrollbarPositionRequest, setScrollbarPositionRequest] = useState(null);
   useEffect(() => {
     if (request) setMenuOpen(true);
   }, [request]);
-  if (!request) return null;
-  return /* @__PURE__ */ jsx(
-    ReactPopup,
+  const scrollbarDialog = scrollbarSettingsRequest ? /* @__PURE__ */ jsx(
+    ReactScrollbarSettingsDialog,
     {
-      open: menuOpen,
-      anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
-      offset: 4,
-      matchAnchorWidth: false,
-      minWidth: 260,
-      onOpenChange: (open) => {
-        setMenuOpen(open);
-        if (!open) request.onClose();
+      value: scrollbarSettingsRequest.scrollbar,
+      onConfirm: (value) => {
+        scrollbarSettingsRequest.onChangeScrollbar?.({
+          ...scrollbarSettingsRequest.scrollbar,
+          ...value
+        });
+        setScrollbarSettingsRequest(null);
       },
-      surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
-      children: /* @__PURE__ */ jsxs("div", { children: [
-        request.title ? /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", color: "#8f959e", fontSize: 12 }, children: request.title }) : null,
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u590D\u5236",
-            items: [
-              {
-                key: "copy-cell",
-                label: request.target === "header" ? "\u590D\u5236\u8868\u5934" : "\u590D\u5236\u5355\u5143\u683C",
-                onClick: request.onCopy
-              },
-              {
-                key: "copy-selection",
-                label: "\u590D\u5236\u9009\u533A",
-                onClick: request.target === "header" ? void 0 : request.onCopySelection
+      onClose: () => setScrollbarSettingsRequest(null)
+    }
+  ) : null;
+  const scrollbarPositionDialog = scrollbarPositionRequest ? /* @__PURE__ */ jsx(
+    ReactScrollbarPositionDialog,
+    {
+      rowCount: scrollbarPositionRequest.scrollbarRowCount ?? 0,
+      columnCount: scrollbarPositionRequest.scrollbarColumnCount ?? 0,
+      onConfirm: (row, column) => scrollbarPositionRequest.onScrollToPosition?.(row, column),
+      onClose: () => setScrollbarPositionRequest(null)
+    }
+  ) : null;
+  if (!request)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      scrollbarDialog,
+      scrollbarPositionDialog
+    ] });
+  const openScrollbarSettings = () => {
+    setScrollbarSettingsRequest(request);
+    request.onClose();
+  };
+  const exportAndClose = (action) => action ? () => {
+    setMenuOpen(false);
+    request.onClose();
+    action();
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scrollbarDialog,
+    scrollbarPositionDialog,
+    /* @__PURE__ */ jsx(
+      ReactPopup,
+      {
+        open: menuOpen,
+        anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
+        offset: 4,
+        matchAnchorWidth: false,
+        minWidth: 260,
+        onOpenChange: (open) => {
+          setMenuOpen(open);
+          if (!open) request.onClose();
+        },
+        surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
+        children: /* @__PURE__ */ jsx("div", { children: request.target === "scrollbar" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ],
-            children: request.target !== "header" ? /* @__PURE__ */ jsx(CustomSelectionMenu, { request }) : null
-          }
-        ),
-        request.target === "header" ? /* @__PURE__ */ jsx(HeaderMenu, { request }) : null,
-        request.target === "summary" ? /* @__PURE__ */ jsx(
-          SummaryMenu,
-          {
-            request
-          },
-          `${request.indicatorKey}-${request.x}-${request.y}`
-        ) : null,
-        /* @__PURE__ */ jsx(DataFormatMenu, { request }),
-        /* @__PURE__ */ jsx(DensityMenu, { request }),
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u5BFC\u51FA",
-            items: [
-              {
-                key: "export-csv",
-                label: "\u5BFC\u51FA CSV",
-                onClick: request.onExportCsv
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+              onClick: () => {
+                request.onResetScrollbar?.();
+                request.onClose();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollbarCacheMenu, { request })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          request.title ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "6px 10px",
+                color: "#8f959e",
+                fontSize: 12
               },
-              {
-                key: "export-xlsx",
-                label: "\u5BFC\u51FA XLSX",
-                onClick: request.onExportXlsx
+              children: request.title
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u590D\u5236",
+              items: [
+                {
+                  key: "copy-cell",
+                  label: request.target === "header" ? "\u590D\u5236\u8868\u5934" : "\u590D\u5236\u5355\u5143\u683C",
+                  onClick: request.onCopy
+                },
+                {
+                  key: "copy-selection",
+                  label: "\u590D\u5236\u9009\u533A",
+                  onClick: request.target === "header" ? void 0 : request.onCopySelection
+                },
+                ...["all", "selection", "viewport"].map(
+                  (scope) => ({
+                    key: `copy-image-${scope}`,
+                    label: `\u590D\u5236\u4E3A\u56FE\u7247 \xB7 ${{ all: "\u6240\u6709\u533A\u57DF", selection: "\u9009\u4E2D\u533A\u57DF", viewport: "\u89C6\u53E3\u533A\u57DF" }[scope]}`,
+                    onClick: scope === "selection" && !request.hasImageSelection ? void 0 : request.onCopyImage ? () => request.onCopyImage?.(scope) : void 0
+                  })
+                )
+              ],
+              children: request.target !== "header" ? /* @__PURE__ */ jsx(CustomSelectionMenu, { request }) : null
+            }
+          ),
+          request.target === "header" ? /* @__PURE__ */ jsx(HeaderMenu, { request }) : null,
+          request.target === "summary" ? /* @__PURE__ */ jsx(
+            SummaryMenu,
+            {
+              request
+            },
+            `${request.indicatorKey}-${request.x}-${request.y}`
+          ) : null,
+          /* @__PURE__ */ jsx(DataFormatMenu, { request }),
+          /* @__PURE__ */ jsx(DensityMenu, { request }),
+          /* @__PURE__ */ jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ]
-          }
-        ),
-        request.recordCount != null ? /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", color: "#8f959e", fontSize: 12 }, children: [
-          "\u4E0B\u94BB\u8BB0\u5F55 ",
-          request.recordCount,
-          " \u6761"
-        ] }) : null
-      ] })
-    }
-  );
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollbarCacheMenu, { request }),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u91CD\u7F6E",
+              items: [
+                {
+                  key: "reset-scrollbar",
+                  label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+                  onClick: () => {
+                    request.onResetScrollbar?.();
+                    request.onClose();
+                  }
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u5BFC\u51FA",
+              items: [
+                {
+                  key: "export-csv",
+                  label: "\u5BFC\u51FA CSV",
+                  onClick: exportAndClose(request.onExportCsv)
+                },
+                {
+                  key: "export-xlsx",
+                  label: "\u5BFC\u51FA XLSX",
+                  onClick: exportAndClose(request.onExportXlsx)
+                },
+                ...["all", "selection", "viewport"].map(
+                  (scope) => ({
+                    key: `export-image-${scope}`,
+                    label: `\u5BFC\u51FA\u56FE\u7247 \xB7 ${{ all: "\u6240\u6709\u533A\u57DF", selection: "\u9009\u4E2D\u533A\u57DF", viewport: "\u89C6\u53E3\u533A\u57DF" }[scope]}`,
+                    onClick: exportAndClose(
+                      scope === "selection" && !request.hasImageSelection ? void 0 : request.onExportImage ? () => request.onExportImage?.(scope) : void 0
+                    )
+                  })
+                )
+              ]
+            }
+          ),
+          request.recordCount != null ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "8px 10px",
+                color: "#8f959e",
+                fontSize: 12
+              },
+              children: [
+                "\u4E0B\u94BB\u8BB0\u5F55 ",
+                request.recordCount,
+                " \u6761"
+              ]
+            }
+          ) : null
+        ] }) })
+      }
+    )
+  ] });
 }
 function HeaderMenu(props) {
   const { request } = props;
@@ -815,54 +1002,15 @@ function DataFormatMenu(props) {
   );
 }
 function PivotExportNameDialog({
-  request
+  request,
+  onClose
 }) {
-  const extension = request.fileName.match(/\.(xlsx|csv)$/i)?.[0] ?? "";
-  const [fileName, setFileName] = useState(
-    extension ? request.fileName.slice(0, -extension.length) : request.fileName
-  );
-  const [invalid, setInvalid] = useState(false);
-  const confirm = () => {
-    if (!fileName.trim()) {
-      setInvalid(true);
-      return;
-    }
-    request.onConfirm(`${fileName.trim()}${extension}`);
-  };
-  return /* @__PURE__ */ jsxs(
-    ReactModal,
+  return /* @__PURE__ */ jsx(
+    ReactListTableExportNameDialog,
     {
-      open: true,
-      title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: 420,
-      fullscreenable: false,
-      onCancel: request.onCancel,
-      onOk: confirm,
-      okText: "\u5BFC\u51FA",
-      cancelText: "\u53D6\u6D88",
-      children: [
-        /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-          "\u6587\u4EF6\u540D\u79F0",
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx(
-              ReactInput,
-              {
-                autoFocus: true,
-                value: fileName,
-                placeholder: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0",
-                onFocus: (event) => event.target.select(),
-                onChange: (event) => {
-                  setFileName(event.target.value);
-                  setInvalid(false);
-                },
-                onPressEnter: confirm
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
-          ] })
-        ] }),
-        invalid ? /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0" }) : null
-      ]
+      request,
+      onClose,
+      renderTable: (props) => /* @__PURE__ */ jsx(ReactListTable, { ...props })
     }
   );
 }
@@ -1855,7 +2003,14 @@ function resolveReactPivotTableDebugOptions(debug, inheritedEnabled) {
   };
 }
 function ReactPivotTableInner(props, ref) {
-  const { className, style, customization, title, ...tableOptions } = props;
+  const {
+    className,
+    style,
+    customization,
+    pivotAreas,
+    title,
+    ...tableOptions
+  } = props;
   const inheritedDebugEnabled = useReactPivotTableDebugEnabled();
   const resolvedDebug = useMemo(
     () => resolveReactPivotTableDebugOptions(
@@ -1868,6 +2023,7 @@ function ReactPivotTableInner(props, ref) {
   const tableRef = useRef(null);
   const customizationOptions = customization && typeof customization === "object" ? customization : void 0;
   const customizationEnabled = customization === true || customizationOptions != null;
+  const pivotLayoutEnabled = customizationEnabled || pivotAreas != null;
   const [internalPanelOpen, setInternalPanelOpen] = useState(
     customizationOptions?.defaultOpen ?? false
   );
@@ -1882,13 +2038,35 @@ function ReactPivotTableInner(props, ref) {
   const chartIdRef = useRef(0);
   const layoutRevisionRef = useRef(0);
   const [internalLayout, setInternalLayout] = useState(
-    () => customizationOptions?.defaultLayout ?? createEmptyPivotFieldLayout()
+    () => pivotAreas ?? customizationOptions?.defaultLayout ?? createPivotFieldLayout({
+      filterDimensions: tableOptions.filterDimensions,
+      columns: tableOptions.columns,
+      rows: tableOptions.rows,
+      indicators: tableOptions.indicators
+    })
   );
   const [fieldOverrides, setFieldOverrides] = useState({});
   const [densityOverride, setDensityOverride] = useState(null);
+  const [scrollbarOverride, setScrollbarOverride] = useState(null);
+  const [sharedScrollbar, setSharedScrollbar] = useState(
+    getSharedScrollbarSettings
+  );
+  useEffect(
+    () => subscribeSharedScrollbarSettings(
+      () => setSharedScrollbar(getSharedScrollbarSettings())
+    ),
+    []
+  );
+  const [scrollbarCacheEnabled, setScrollbarCacheEnabled] = useState(true);
+  const scrollbarRevisionRef = useRef(0);
+  const scrollbarStorageKey = customizationOptions?.storageKey;
+  const effectiveScrollbar = sharedScrollbar.shared ? sharedScrollbar.value : scrollbarOverride ?? tableOptions.scrollbar;
   const [filterRequest, setFilterRequest] = useState(null);
   const [contextMenuRequest, setContextMenuRequest] = useState(null);
   const [exportNameRequest, setExportNameRequest] = useState(null);
+  const [exportLoadingText, setExportLoadingText] = useState(
+    null
+  );
   const [tooltipRequest, setTooltipRequest] = useState(null);
   const panelOpen = customizationOptions?.open ?? internalPanelOpen;
   const fieldLayout = customizationOptions?.layout ?? internalLayout;
@@ -1940,8 +2118,8 @@ function ReactPivotTableInner(props, ref) {
     [baseFields, fieldOverrides]
   );
   const customizedOptions = useMemo(
-    () => customizationEnabled ? resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
-    [customizationEnabled, fieldLayout, fields]
+    () => pivotLayoutEnabled ? resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
+    [pivotLayoutEnabled, fieldLayout, fields]
   );
   const overriddenIndicators = useMemo(
     () => tableOptions.indicators.map((indicator) => {
@@ -1965,10 +2143,12 @@ function ReactPivotTableInner(props, ref) {
   const options = {
     ...tableOptions,
     ...customizedOptions,
+    scrollbar: effectiveScrollbar,
     debug: resolvedDebug,
     rowHeight: densityOverride == null ? tableOptions.rowHeight : resolveDensityRowHeight(densityOverride),
     indicators: customizedOptions?.indicators ?? overriddenIndicators,
     ui: {
+      onLoadingRequest: (request) => setExportLoadingText(request ? request.text ?? "\u6B63\u5728\u5BFC\u51FA\u2026" : null),
       onExportNameRequest: (request) => {
         setExportNameRequest(request);
       },
@@ -1979,6 +2159,39 @@ function ReactPivotTableInner(props, ref) {
           const fieldKey = request.indicatorKey;
           const enhancedRequest = {
             ...request,
+            scrollbar: effectiveScrollbar,
+            cacheScrollbar: scrollbarCacheEnabled,
+            scrollbarCacheAvailable: Boolean(scrollbarStorageKey),
+            onChangeCacheScrollbar: (enabled) => {
+              setScrollbarCacheEnabled(enabled);
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey)
+                void savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled,
+                  scrollbar: enabled ? effectiveScrollbar : void 0
+                });
+            },
+            onChangeScrollbar: (value) => {
+              setScrollbarOverride(value);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true,
+                  scrollbar: value
+                });
+            },
+            onResetScrollbar: () => {
+              setScrollbarOverride(null);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value: {} });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true
+                });
+            },
             onChangeDensity: (density) => {
               nativeChangeDensity?.(density);
               setDensityOverride(density);
@@ -2116,6 +2329,21 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  useEffect(() => {
+    if (!scrollbarStorageKey) return;
+    let active = true;
+    const revision = scrollbarRevisionRef.current;
+    void loadPivotScrollbarConfig(scrollbarStorageKey).then((stored) => {
+      if (!active || scrollbarRevisionRef.current !== revision || !stored)
+        return;
+      setScrollbarCacheEnabled(stored.enabled);
+      if (stored.enabled && stored.scrollbar)
+        setScrollbarOverride(stored.scrollbar);
+    });
+    return () => {
+      active = false;
+    };
+  }, [scrollbarStorageKey]);
   useEffect(() => {
     const storageKey = customizationOptions?.storageKey;
     if (!storageKey || customizationOptions?.layout !== void 0) return;
@@ -2188,11 +2416,27 @@ function ReactPivotTableInner(props, ref) {
       {
         className: `react-pivot-table${className ? ` ${className}` : ""}`,
         style: {
+          position: "relative",
           width: props.width ?? "100%",
           height: props.height ?? "100%",
           ...style
         },
         children: [
+          exportLoadingText ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "status",
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 10,
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(255,255,255,0.75)"
+              },
+              children: exportLoadingText
+            }
+          ) : null,
           /* @__PURE__ */ jsx(
             PivotTitlebar,
             {
@@ -2285,7 +2529,13 @@ function ReactPivotTableInner(props, ref) {
     ),
     /* @__PURE__ */ jsx(ReactFilterPanel, { request: sharedFilterRequest }),
     /* @__PURE__ */ jsx(PivotContextMenu, { request: contextMenuRequest }),
-    exportNameRequest ? /* @__PURE__ */ jsx(PivotExportNameDialog, { request: exportNameRequest }) : null,
+    exportNameRequest ? /* @__PURE__ */ jsx(
+      PivotExportNameDialog,
+      {
+        request: exportNameRequest,
+        onClose: () => setExportNameRequest(null)
+      }
+    ) : null,
     /* @__PURE__ */ jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }