@canvas-components/react-list-table 0.3.36 → 0.3.38

package/dist/index.cjs

@@ -3573,6 +3573,37 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function readExportCache(storageKey) {
+  if (!storageKey) return null;
+  try {
+    const value = JSON.parse(localStorage.getItem(`canvas-table-export:${storageKey}`) ?? "null");
+    if (value?.version !== 1 || !Array.isArray(value.rows) || !Array.isArray(value.selectedKeys) || !value.selectedKeys.every((key) => typeof key === "string") || typeof value.includeSummary !== "boolean") return null;
+    if (!value.rows.every((row) => row && typeof row.key === "string" && ["default", "ascend", "descend"].includes(row.sortOrder) && summaryOptions.some((option) => option.value === row.summaryType) && roundingOptions.some((option) => option.value === row.roundingMode) && ["yes", "no"].includes(row.showTypePrefix) && ["yes", "no"].includes(row.preserveTrailingZeros) && (row.precision == null || Number.isInteger(row.precision) && row.precision >= 0 && row.precision <= 20) && (row.sortIndex == null || Number.isFinite(row.sortIndex)) && (row.sortPriority == null || Number.isFinite(row.sortPriority)))) return null;
+    return value;
+  } catch {
+    return null;
+  }
+}
+function writeExportCache(storageKey, value) {
+  if (!storageKey) return;
+  try {
+    const key = `canvas-table-export:${storageKey}`;
+    if (value) localStorage.setItem(key, JSON.stringify(value));
+    else localStorage.removeItem(key);
+  } catch {
+  }
+}
+function restoreExportRows(columns, cache) {
+  const current = new Map(createExportDialogRows(columns).map((row) => [row.key, row]));
+  const rows = [];
+  cache?.rows.forEach((saved) => {
+    const row = current.get(saved.key);
+    if (!row) return;
+    rows.push({ ...saved, key: row.key, title: row.title });
+    current.delete(saved.key);
+  });
+  return [...rows, ...current.values()];
+}
 var sortOptions = [
   { value: "default", label: "\u9ED8\u8BA4" },
   { value: "ascend", label: "\u5347\u5E8F" },
@@ -3644,18 +3675,34 @@ function buildExportDialogSettings(rows, selectedKeys, includeSummary) {
 function ReactListTableExportNameDialog({
   request,
   onClose,
-  renderTable
+  renderTable,
+  storageKey
 }) {
   const tableId = react.useId();
+  const tableHostRef = react.useRef(null);
+  const [tableWidth, setTableWidth] = react.useState(0);
+  react.useEffect(() => {
+    const host = tableHostRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const update = () => setTableWidth(host.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
   const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/i)?.[0] ?? "";
   const [fileName, setFileName] = react.useState(
     extension ? request.fileName.slice(0, -extension.length) : request.fileName
   );
-  const [rows, setRows] = react.useState(() => createExportDialogRows(request.columns ?? []));
+  const [cached] = react.useState(() => readExportCache(storageKey));
+  const [cacheEnabled, setCacheEnabled] = react.useState(Boolean(storageKey));
+  const [rows, setRows] = react.useState(() => restoreExportRows(request.columns ?? [], cached));
   const [selectedKeys, setSelectedKeys] = react.useState(
-    () => (request.columns ?? []).filter((column) => column.selected !== false).map((column) => column.key)
+    () => (request.columns ?? []).filter((column) => cached?.rows.some((row) => row.key === column.key) ? cached.selectedKeys.includes(column.key) : column.selected !== false).map((column) => column.key)
+  );
+  const [includeSummary, setIncludeSummary] = react.useState(
+    () => cached?.includeSummary ?? (request.includeSummary === true || (request.columns?.some((column) => column.summary.type !== "none") ?? false))
   );
-  const [includeSummary, setIncludeSummary] = react.useState(request.includeSummary ?? false);
   const [error, setError] = react.useState("");
   const columns = react.useMemo(
     () => [
@@ -3733,9 +3780,16 @@ function ReactListTableExportNameDialog({
     ],
     [includeSummary, request.columns]
   );
+  const fittedColumns = react.useMemo(
+    () => fitExportDialogColumns(columns, tableWidth),
+    [columns, tableWidth]
+  );
   const confirm = () => {
     if (!fileName.trim()) return setError("\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0");
     if (request.columns && !selectedKeys.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
+    if (request.columns && cacheEnabled) {
+      writeExportCache(storageKey, { version: 1, rows, selectedKeys: selectedKeys.map(String), includeSummary });
+    }
     request.onConfirm(
       `${fileName.trim()}${extension}`,
       request.columns ? buildExportDialogSettings(rows, selectedKeys, includeSummary) : void 0
@@ -3747,7 +3801,7 @@ function ReactListTableExportNameDialog({
     {
       open: true,
       title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: request.columns ? 1180 : 420,
+      width: request.columns ? includeSummary ? 1320 : 1180 : 420,
       fullscreenable: false,
       onOk: confirm,
       okText: "\u5BFC\u51FA",
@@ -3780,6 +3834,27 @@ function ReactListTableExportNameDialog({
         request.columns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 8 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: "\u5BFC\u51FA\u8868\u683C\u5217" }),
+            storageKey ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 6 },
+                title: "\u5BFC\u51FA\u65F6\u4FDD\u5B58\u914D\u7F6E\uFF0C\u4E0B\u6B21\u6253\u5F00\u81EA\u52A8\u6062\u590D\uFF1B\u53D6\u6D88\u52FE\u9009\u6E05\u9664\u7F13\u5B58",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.ReactCheckbox,
+                    {
+                      checked: cacheEnabled,
+                      "aria-label": "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E",
+                      onChange: (event) => {
+                        setCacheEnabled(event.target.checked);
+                        if (!event.target.checked) writeExportCache(storageKey, null);
+                      }
+                    }
+                  ),
+                  "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E"
+                ]
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactComponents.ReactCheckbox,
@@ -3792,9 +3867,9 @@ function ReactListTableExportNameDialog({
               "\u5BFC\u51FA\u6C47\u603B\u884C"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tableHostRef, style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
             tableId,
-            columns,
+            columns: fittedColumns,
             dataSource: rows,
             rowKey: "key",
             rowHeight: 42,
@@ -3839,6 +3914,17 @@ function ReactListTableExportNameDialog({
     }
   );
 }
+function fitExportDialogColumns(columns, availableWidth) {
+  if (availableWidth <= 0) return columns;
+  const totalWidth = (items) => items.reduce((sum, column) => sum + (column.key === listTable.ROW_SELECTION_COLUMN.key ? 0 : column.children?.length ? totalWidth(column.children) : Number(column.width) || 160), 0);
+  const ratio = Math.min(1, Math.max(availableWidth - 54 - 32, 1) / totalWidth(columns));
+  const fit = (items) => items.map((column) => {
+    if (column.key === listTable.ROW_SELECTION_COLUMN.key) return column;
+    if (column.children?.length) return { ...column, children: fit(column.children) };
+    return { ...column, width: Math.max(1, Math.floor((Number(column.width) || 160) * ratio)), minWidth: 1 };
+  });
+  return fit(columns);
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -5003,14 +5089,18 @@ function SortableList(props) {
   );
   react.useEffect(() => {
     if (!dragState) return;
-    const handleMove = (event) => {
+    const scrollContainer = props.scrollContainerRef?.current;
+    let frameId = 0;
+    let lastTime = null;
+    const updateTarget = () => {
       const current = dragRef.current;
       if (!current) return;
       const target = resolveClosestSortableItem({
         items,
         parentKey: current.source.parentKey,
         layouts: current.layouts,
-        overlayCenterY: event.clientY - current.offsetY + current.height / 2
+        // 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
+        overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
       });
       if (target) {
         current.target = target;
@@ -5018,12 +5108,44 @@ function SortableList(props) {
       setDragState({
         sourceKey: current.source.key,
         targetKey: current.target.key,
-        pointerY: event.clientY
+        pointerY: current.pointerY
       });
     };
-    const handleEnd = () => {
+    const handleMove = (event) => {
+      const current = dragRef.current;
+      if (!current || event.pointerId !== current.pointerId) return;
+      current.pointerY = event.clientY;
+      updateTarget();
+    };
+    const tick = (time) => {
+      const current = dragRef.current;
+      if (!current) return;
+      const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
+      lastTime = time;
+      if (scrollContainer) {
+        const rect = scrollContainer.getBoundingClientRect();
+        const top = rect.top + scrollContainer.clientTop;
+        const height = scrollContainer.clientHeight;
+        const edge = Math.min(40, height / 2);
+        const bottom = top + height;
+        const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
+        if (direction) {
+          scrollContainer.scrollTop = Math.max(
+            0,
+            Math.min(
+              scrollContainer.scrollHeight - height,
+              scrollContainer.scrollTop + direction * elapsed * 0.5
+            )
+          );
+          updateTarget();
+        }
+      }
+      frameId = requestAnimationFrame(tick);
+    };
+    const finish = (commit) => {
       const current = dragRef.current;
-      if (current && current.source.key !== current.target.key) {
+      cancelAnimationFrame(frameId);
+      if (commit && current && current.source.key !== current.target.key) {
         const siblings = items.filter(
           (item) => item.parentKey === current.source.parentKey
         );
@@ -5041,15 +5163,30 @@ function SortableList(props) {
       document.body.classList.remove("react-list-table-sorting");
       document.body.style.removeProperty("user-select");
     };
+    const handleEnd = (event) => {
+      if (event.pointerId !== dragRef.current?.pointerId) return;
+      handleMove(event);
+      finish(true);
+    };
+    const handleCancel = (event) => {
+      if (event.pointerId === dragRef.current?.pointerId) finish(false);
+    };
+    const handleBlur = () => finish(false);
+    frameId = requestAnimationFrame(tick);
+    scrollContainer?.addEventListener("scroll", updateTarget);
     window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleEnd, { once: true });
-    window.addEventListener("pointercancel", handleEnd, { once: true });
+    window.addEventListener("pointerup", handleEnd);
+    window.addEventListener("pointercancel", handleCancel);
+    window.addEventListener("blur", handleBlur);
     return () => {
+      cancelAnimationFrame(frameId);
+      scrollContainer?.removeEventListener("scroll", updateTarget);
       window.removeEventListener("pointermove", handleMove);
       window.removeEventListener("pointerup", handleEnd);
-      window.removeEventListener("pointercancel", handleEnd);
+      window.removeEventListener("pointercancel", handleCancel);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [dragState != null, items, onOrderChange]);
+  }, [dragState != null, items, onOrderChange, props.scrollContainerRef]);
   const sourceIndex = dragState ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
   const targetIndex = dragState ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, children: [
@@ -5068,7 +5205,7 @@ function SortableList(props) {
           style,
           children: props.renderItem(item, {
             onPointerDown: (event) => {
-              if (event.button !== 0) return;
+              if (event.button !== 0 || dragRef.current) return;
               const row = event.currentTarget.closest(
                 "[data-sortable-key]"
               );
@@ -5081,7 +5218,10 @@ function SortableList(props) {
                 offsetY: event.clientY - rect.top,
                 width: rect.width,
                 left: rect.left,
-                height: rect.height
+                height: rect.height,
+                pointerId: event.pointerId,
+                pointerY: event.clientY,
+                rootTop: rootRef.current?.getBoundingClientRect().top ?? 0
               };
               setDragState({
                 sourceKey: item.key,
@@ -5168,13 +5308,14 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
 }
 
 // src/features/toolbar/style.css
-styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
+styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  touch-action: none;\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = react.useState(false);
   const [settingOpen, setSettingOpen] = react.useState(false);
   const [isFullscreen, setIsFullscreen] = react.useState(false);
   const rootRef = react.useRef(null);
+  const columnSettingsBodyRef = react.useRef(null);
   const hasToolbar = toolbar !== void 0 && toolbar !== false;
   react.useEffect(() => {
     const close = (event) => {
@@ -5313,116 +5454,124 @@ function ReactTableToolbar(props) {
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
                 /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "react-list-table-column-setting-body canvas-react-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx(
-                SortableList,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  items: flattenColumns(props.columns),
-                  onOrderChange: props.onColumnOrderChange,
-                  renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "span",
-                      {
-                        className: "react-list-table-column-main",
-                        style: { paddingLeft: column.level * 16 },
-                        children: [
+                  ref: columnSettingsBodyRef,
+                  className: "react-list-table-column-setting-body canvas-react-scrollbar",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SortableList,
+                    {
+                      scrollContainerRef: columnSettingsBodyRef,
+                      items: flattenColumns(props.columns),
+                      onOrderChange: props.onColumnOrderChange,
+                      renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: "react-list-table-column-main",
+                            style: { paddingLeft: column.level * 16 },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  className: "react-list-table-column-drag",
+                                  ...handleProps,
+                                  onClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                  },
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(HolderOutlined, {})
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  checked: !column.hidden,
+                                  disabled: column.disableHide,
+                                  onChange: (event) => props.onColumnVisibilityChange(
+                                    column.key,
+                                    event.target.checked
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "react-list-table-column-label", children: column.label })
+                            ]
+                          }
+                        ),
+                        !column.isGroup ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "react-list-table-column-actions", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
-                            "span",
+                            reactComponents.ReactNumberInput,
                             {
-                              className: "react-list-table-column-drag",
-                              ...handleProps,
-                              onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                              },
-                              children: /* @__PURE__ */ jsxRuntime.jsx(HolderOutlined, {})
+                              className: "react-list-table-column-width-input",
+                              min: column.minWidth,
+                              max: column.maxWidth,
+                              value: column.width,
+                              allowClear: false,
+                              "aria-label": `${column.label}\u5217\u5BBD`,
+                              style: { width: 80, height: 24 },
+                              onChange: (width) => {
+                                if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
+                                  props.onColumnWidthChange(
+                                    column.key,
+                                    width
+                                  );
+                                }
+                              }
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsx(
-                            "input",
+                            reactComponents.ReactSelect,
                             {
-                              type: "checkbox",
-                              checked: !column.hidden,
-                              disabled: column.disableHide,
-                              onChange: (event) => props.onColumnVisibilityChange(
+                              className: "react-list-table-column-sort-input",
+                              value: props.sortState.find(
+                                (item) => item.key === column.key
+                              )?.order ?? "default",
+                              options: [
+                                { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
+                                { label: "\u5347\u5E8F", value: "ascend" },
+                                { label: "\u964D\u5E8F", value: "descend" }
+                              ],
+                              disabled: !column.sortable,
+                              allowClear: false,
+                              showSearch: false,
+                              style: { width: "100%", height: 24 },
+                              "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
+                              onChange: (value) => props.onColumnSortChange(
                                 column.key,
-                                event.target.checked
+                                value === "ascend" || value === "descend" ? value : null
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "react-list-table-column-label", children: column.label })
-                        ]
-                      }
-                    ),
-                    !column.isGroup ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "react-list-table-column-actions", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.ReactNumberInput,
-                        {
-                          className: "react-list-table-column-width-input",
-                          min: column.minWidth,
-                          max: column.maxWidth,
-                          value: column.width,
-                          allowClear: false,
-                          "aria-label": `${column.label}\u5217\u5BBD`,
-                          style: { width: 80, height: 24 },
-                          onChange: (width) => {
-                            if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
-                              props.onColumnWidthChange(
-                                column.key,
-                                width
-                              );
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactComponents.ReactSelect,
+                            {
+                              className: "react-list-table-column-fixed-input",
+                              value: column.fixed ?? "none",
+                              options: [
+                                { label: "\u4E0D\u56FA\u5B9A", value: "none" },
+                                { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
+                                { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
+                              ],
+                              allowClear: false,
+                              showSearch: false,
+                              style: { width: "100%", height: 24 },
+                              "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
+                              onChange: (value) => {
+                                props.onColumnFixedChange(
+                                  column.key,
+                                  value === "left" || value === "right" ? value : void 0
+                                );
+                              }
                             }
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.ReactSelect,
-                        {
-                          className: "react-list-table-column-sort-input",
-                          value: props.sortState.find(
-                            (item) => item.key === column.key
-                          )?.order ?? "default",
-                          options: [
-                            { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
-                            { label: "\u5347\u5E8F", value: "ascend" },
-                            { label: "\u964D\u5E8F", value: "descend" }
-                          ],
-                          disabled: !column.sortable,
-                          allowClear: false,
-                          showSearch: false,
-                          style: { width: "100%", height: 24 },
-                          "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
-                          onChange: (value) => props.onColumnSortChange(
-                            column.key,
-                            value === "ascend" || value === "descend" ? value : null
                           )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.ReactSelect,
-                        {
-                          className: "react-list-table-column-fixed-input",
-                          value: column.fixed ?? "none",
-                          options: [
-                            { label: "\u4E0D\u56FA\u5B9A", value: "none" },
-                            { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
-                            { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
-                          ],
-                          allowClear: false,
-                          showSearch: false,
-                          style: { width: "100%", height: 24 },
-                          "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
-                          onChange: (value) => {
-                            props.onColumnFixedChange(
-                              column.key,
-                              value === "left" || value === "right" ? value : void 0
-                            );
-                          }
-                        }
-                      )
-                    ] }) : null
-                  ] })
+                        ] }) : null
+                      ] })
+                    }
+                  )
                 }
-              ) })
+              )
             ]
           }
         ) : null
@@ -6203,6 +6352,7 @@ function ReactListTableInner(props, ref) {
         ReactListTableExportNameDialog,
         {
           request: exportNameRequest,
+          storageKey: storageKey ? `list:${storageKey}` : void 0,
           onClose: closeExportNameRequest,
           renderTable: (tableProps) => /* @__PURE__ */ jsxRuntime.jsx(ReactListTable, { ...tableProps })
         }

package/dist/index.d.cts

@@ -111,9 +111,11 @@ interface ExportDialogRow {
     preserveTrailingZeros: "yes" | "no";
 }
 /** 使用 ReactListTable 承载大量导出列的弹窗。 */
-declare function ReactListTableExportNameDialog({ request, onClose, renderTable, }: {
+declare function ReactListTableExportNameDialog({ request, onClose, renderTable, storageKey, }: {
     request: ListTableExportNameRequest;
     onClose?: () => void;
+    /** 用于隔离不同表格的导出配置缓存。 */
+    storageKey?: string;
     renderTable: (props: ReactListTableProps<ExportDialogRow>) => ReactNode;
 }): react.JSX.Element;
 

package/dist/index.d.ts

@@ -111,9 +111,11 @@ interface ExportDialogRow {
     preserveTrailingZeros: "yes" | "no";
 }
 /** 使用 ReactListTable 承载大量导出列的弹窗。 */
-declare function ReactListTableExportNameDialog({ request, onClose, renderTable, }: {
+declare function ReactListTableExportNameDialog({ request, onClose, renderTable, storageKey, }: {
     request: ListTableExportNameRequest;
     onClose?: () => void;
+    /** 用于隔离不同表格的导出配置缓存。 */
+    storageKey?: string;
     renderTable: (props: ReactListTableProps<ExportDialogRow>) => ReactNode;
 }): react.JSX.Element;
 

package/dist/index.js

@@ -3572,6 +3572,37 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function readExportCache(storageKey) {
+  if (!storageKey) return null;
+  try {
+    const value = JSON.parse(localStorage.getItem(`canvas-table-export:${storageKey}`) ?? "null");
+    if (value?.version !== 1 || !Array.isArray(value.rows) || !Array.isArray(value.selectedKeys) || !value.selectedKeys.every((key) => typeof key === "string") || typeof value.includeSummary !== "boolean") return null;
+    if (!value.rows.every((row) => row && typeof row.key === "string" && ["default", "ascend", "descend"].includes(row.sortOrder) && summaryOptions.some((option) => option.value === row.summaryType) && roundingOptions.some((option) => option.value === row.roundingMode) && ["yes", "no"].includes(row.showTypePrefix) && ["yes", "no"].includes(row.preserveTrailingZeros) && (row.precision == null || Number.isInteger(row.precision) && row.precision >= 0 && row.precision <= 20) && (row.sortIndex == null || Number.isFinite(row.sortIndex)) && (row.sortPriority == null || Number.isFinite(row.sortPriority)))) return null;
+    return value;
+  } catch {
+    return null;
+  }
+}
+function writeExportCache(storageKey, value) {
+  if (!storageKey) return;
+  try {
+    const key = `canvas-table-export:${storageKey}`;
+    if (value) localStorage.setItem(key, JSON.stringify(value));
+    else localStorage.removeItem(key);
+  } catch {
+  }
+}
+function restoreExportRows(columns, cache) {
+  const current = new Map(createExportDialogRows(columns).map((row) => [row.key, row]));
+  const rows = [];
+  cache?.rows.forEach((saved) => {
+    const row = current.get(saved.key);
+    if (!row) return;
+    rows.push({ ...saved, key: row.key, title: row.title });
+    current.delete(saved.key);
+  });
+  return [...rows, ...current.values()];
+}
 var sortOptions = [
   { value: "default", label: "\u9ED8\u8BA4" },
   { value: "ascend", label: "\u5347\u5E8F" },
@@ -3643,18 +3674,34 @@ function buildExportDialogSettings(rows, selectedKeys, includeSummary) {
 function ReactListTableExportNameDialog({
   request,
   onClose,
-  renderTable
+  renderTable,
+  storageKey
 }) {
   const tableId = useId();
+  const tableHostRef = useRef(null);
+  const [tableWidth, setTableWidth] = useState(0);
+  useEffect(() => {
+    const host = tableHostRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const update = () => setTableWidth(host.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
   const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/i)?.[0] ?? "";
   const [fileName, setFileName] = useState(
     extension ? request.fileName.slice(0, -extension.length) : request.fileName
   );
-  const [rows, setRows] = useState(() => createExportDialogRows(request.columns ?? []));
+  const [cached] = useState(() => readExportCache(storageKey));
+  const [cacheEnabled, setCacheEnabled] = useState(Boolean(storageKey));
+  const [rows, setRows] = useState(() => restoreExportRows(request.columns ?? [], cached));
   const [selectedKeys, setSelectedKeys] = useState(
-    () => (request.columns ?? []).filter((column) => column.selected !== false).map((column) => column.key)
+    () => (request.columns ?? []).filter((column) => cached?.rows.some((row) => row.key === column.key) ? cached.selectedKeys.includes(column.key) : column.selected !== false).map((column) => column.key)
+  );
+  const [includeSummary, setIncludeSummary] = useState(
+    () => cached?.includeSummary ?? (request.includeSummary === true || (request.columns?.some((column) => column.summary.type !== "none") ?? false))
   );
-  const [includeSummary, setIncludeSummary] = useState(request.includeSummary ?? false);
   const [error, setError] = useState("");
   const columns = useMemo(
     () => [
@@ -3732,9 +3779,16 @@ function ReactListTableExportNameDialog({
     ],
     [includeSummary, request.columns]
   );
+  const fittedColumns = useMemo(
+    () => fitExportDialogColumns(columns, tableWidth),
+    [columns, tableWidth]
+  );
   const confirm = () => {
     if (!fileName.trim()) return setError("\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0");
     if (request.columns && !selectedKeys.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
+    if (request.columns && cacheEnabled) {
+      writeExportCache(storageKey, { version: 1, rows, selectedKeys: selectedKeys.map(String), includeSummary });
+    }
     request.onConfirm(
       `${fileName.trim()}${extension}`,
       request.columns ? buildExportDialogSettings(rows, selectedKeys, includeSummary) : void 0
@@ -3746,7 +3800,7 @@ function ReactListTableExportNameDialog({
     {
       open: true,
       title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: request.columns ? 1180 : 420,
+      width: request.columns ? includeSummary ? 1320 : 1180 : 420,
       fullscreenable: false,
       onOk: confirm,
       okText: "\u5BFC\u51FA",
@@ -3779,6 +3833,27 @@ function ReactListTableExportNameDialog({
         request.columns ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 8 }, children: [
             /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: "\u5BFC\u51FA\u8868\u683C\u5217" }),
+            storageKey ? /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 6 },
+                title: "\u5BFC\u51FA\u65F6\u4FDD\u5B58\u914D\u7F6E\uFF0C\u4E0B\u6B21\u6253\u5F00\u81EA\u52A8\u6062\u590D\uFF1B\u53D6\u6D88\u52FE\u9009\u6E05\u9664\u7F13\u5B58",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ReactCheckbox,
+                    {
+                      checked: cacheEnabled,
+                      "aria-label": "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E",
+                      onChange: (event) => {
+                        setCacheEnabled(event.target.checked);
+                        if (!event.target.checked) writeExportCache(storageKey, null);
+                      }
+                    }
+                  ),
+                  "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E"
+                ]
+              }
+            ) : null,
             /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
               /* @__PURE__ */ jsx(
                 ReactCheckbox,
@@ -3791,9 +3866,9 @@ function ReactListTableExportNameDialog({
               "\u5BFC\u51FA\u6C47\u603B\u884C"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
+          /* @__PURE__ */ jsx("div", { ref: tableHostRef, style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
             tableId,
-            columns,
+            columns: fittedColumns,
             dataSource: rows,
             rowKey: "key",
             rowHeight: 42,
@@ -3838,6 +3913,17 @@ function ReactListTableExportNameDialog({
     }
   );
 }
+function fitExportDialogColumns(columns, availableWidth) {
+  if (availableWidth <= 0) return columns;
+  const totalWidth = (items) => items.reduce((sum, column) => sum + (column.key === ROW_SELECTION_COLUMN.key ? 0 : column.children?.length ? totalWidth(column.children) : Number(column.width) || 160), 0);
+  const ratio = Math.min(1, Math.max(availableWidth - 54 - 32, 1) / totalWidth(columns));
+  const fit = (items) => items.map((column) => {
+    if (column.key === ROW_SELECTION_COLUMN.key) return column;
+    if (column.children?.length) return { ...column, children: fit(column.children) };
+    return { ...column, width: Math.max(1, Math.floor((Number(column.width) || 160) * ratio)), minWidth: 1 };
+  });
+  return fit(columns);
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -5002,14 +5088,18 @@ function SortableList(props) {
   );
   useEffect(() => {
     if (!dragState) return;
-    const handleMove = (event) => {
+    const scrollContainer = props.scrollContainerRef?.current;
+    let frameId = 0;
+    let lastTime = null;
+    const updateTarget = () => {
       const current = dragRef.current;
       if (!current) return;
       const target = resolveClosestSortableItem({
         items,
         parentKey: current.source.parentKey,
         layouts: current.layouts,
-        overlayCenterY: event.clientY - current.offsetY + current.height / 2
+        // 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
+        overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
       });
       if (target) {
         current.target = target;
@@ -5017,12 +5107,44 @@ function SortableList(props) {
       setDragState({
         sourceKey: current.source.key,
         targetKey: current.target.key,
-        pointerY: event.clientY
+        pointerY: current.pointerY
       });
     };
-    const handleEnd = () => {
+    const handleMove = (event) => {
+      const current = dragRef.current;
+      if (!current || event.pointerId !== current.pointerId) return;
+      current.pointerY = event.clientY;
+      updateTarget();
+    };
+    const tick = (time) => {
+      const current = dragRef.current;
+      if (!current) return;
+      const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
+      lastTime = time;
+      if (scrollContainer) {
+        const rect = scrollContainer.getBoundingClientRect();
+        const top = rect.top + scrollContainer.clientTop;
+        const height = scrollContainer.clientHeight;
+        const edge = Math.min(40, height / 2);
+        const bottom = top + height;
+        const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
+        if (direction) {
+          scrollContainer.scrollTop = Math.max(
+            0,
+            Math.min(
+              scrollContainer.scrollHeight - height,
+              scrollContainer.scrollTop + direction * elapsed * 0.5
+            )
+          );
+          updateTarget();
+        }
+      }
+      frameId = requestAnimationFrame(tick);
+    };
+    const finish = (commit) => {
       const current = dragRef.current;
-      if (current && current.source.key !== current.target.key) {
+      cancelAnimationFrame(frameId);
+      if (commit && current && current.source.key !== current.target.key) {
         const siblings = items.filter(
           (item) => item.parentKey === current.source.parentKey
         );
@@ -5040,15 +5162,30 @@ function SortableList(props) {
       document.body.classList.remove("react-list-table-sorting");
       document.body.style.removeProperty("user-select");
     };
+    const handleEnd = (event) => {
+      if (event.pointerId !== dragRef.current?.pointerId) return;
+      handleMove(event);
+      finish(true);
+    };
+    const handleCancel = (event) => {
+      if (event.pointerId === dragRef.current?.pointerId) finish(false);
+    };
+    const handleBlur = () => finish(false);
+    frameId = requestAnimationFrame(tick);
+    scrollContainer?.addEventListener("scroll", updateTarget);
     window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleEnd, { once: true });
-    window.addEventListener("pointercancel", handleEnd, { once: true });
+    window.addEventListener("pointerup", handleEnd);
+    window.addEventListener("pointercancel", handleCancel);
+    window.addEventListener("blur", handleBlur);
     return () => {
+      cancelAnimationFrame(frameId);
+      scrollContainer?.removeEventListener("scroll", updateTarget);
       window.removeEventListener("pointermove", handleMove);
       window.removeEventListener("pointerup", handleEnd);
-      window.removeEventListener("pointercancel", handleEnd);
+      window.removeEventListener("pointercancel", handleCancel);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [dragState != null, items, onOrderChange]);
+  }, [dragState != null, items, onOrderChange, props.scrollContainerRef]);
   const sourceIndex = dragState ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
   const targetIndex = dragState ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, children: [
@@ -5067,7 +5204,7 @@ function SortableList(props) {
           style,
           children: props.renderItem(item, {
             onPointerDown: (event) => {
-              if (event.button !== 0) return;
+              if (event.button !== 0 || dragRef.current) return;
               const row = event.currentTarget.closest(
                 "[data-sortable-key]"
               );
@@ -5080,7 +5217,10 @@ function SortableList(props) {
                 offsetY: event.clientY - rect.top,
                 width: rect.width,
                 left: rect.left,
-                height: rect.height
+                height: rect.height,
+                pointerId: event.pointerId,
+                pointerY: event.clientY,
+                rootTop: rootRef.current?.getBoundingClientRect().top ?? 0
               };
               setDragState({
                 sourceKey: item.key,
@@ -5167,13 +5307,14 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
 }
 
 // src/features/toolbar/style.css
-styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
+styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  touch-action: none;\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = useState(false);
   const [settingOpen, setSettingOpen] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const rootRef = useRef(null);
+  const columnSettingsBodyRef = useRef(null);
   const hasToolbar = toolbar !== void 0 && toolbar !== false;
   useEffect(() => {
     const close = (event) => {
@@ -5312,116 +5453,124 @@ function ReactTableToolbar(props) {
                 /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
                 /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "react-list-table-column-setting-body canvas-react-scrollbar", children: /* @__PURE__ */ jsx(
-                SortableList,
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  items: flattenColumns(props.columns),
-                  onOrderChange: props.onColumnOrderChange,
-                  renderItem: (column, handleProps) => /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-item", children: [
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        className: "react-list-table-column-main",
-                        style: { paddingLeft: column.level * 16 },
-                        children: [
+                  ref: columnSettingsBodyRef,
+                  className: "react-list-table-column-setting-body canvas-react-scrollbar",
+                  children: /* @__PURE__ */ jsx(
+                    SortableList,
+                    {
+                      scrollContainerRef: columnSettingsBodyRef,
+                      items: flattenColumns(props.columns),
+                      onOrderChange: props.onColumnOrderChange,
+                      renderItem: (column, handleProps) => /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-item", children: [
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "react-list-table-column-main",
+                            style: { paddingLeft: column.level * 16 },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "react-list-table-column-drag",
+                                  ...handleProps,
+                                  onClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                  },
+                                  children: /* @__PURE__ */ jsx(HolderOutlined, {})
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  checked: !column.hidden,
+                                  disabled: column.disableHide,
+                                  onChange: (event) => props.onColumnVisibilityChange(
+                                    column.key,
+                                    event.target.checked
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("span", { className: "react-list-table-column-label", children: column.label })
+                            ]
+                          }
+                        ),
+                        !column.isGroup ? /* @__PURE__ */ jsxs("span", { className: "react-list-table-column-actions", children: [
                           /* @__PURE__ */ jsx(
-                            "span",
+                            ReactNumberInput,
                             {
-                              className: "react-list-table-column-drag",
-                              ...handleProps,
-                              onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                              },
-                              children: /* @__PURE__ */ jsx(HolderOutlined, {})
+                              className: "react-list-table-column-width-input",
+                              min: column.minWidth,
+                              max: column.maxWidth,
+                              value: column.width,
+                              allowClear: false,
+                              "aria-label": `${column.label}\u5217\u5BBD`,
+                              style: { width: 80, height: 24 },
+                              onChange: (width) => {
+                                if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
+                                  props.onColumnWidthChange(
+                                    column.key,
+                                    width
+                                  );
+                                }
+                              }
                             }
                           ),
                           /* @__PURE__ */ jsx(
-                            "input",
+                            ReactSelect,
                             {
-                              type: "checkbox",
-                              checked: !column.hidden,
-                              disabled: column.disableHide,
-                              onChange: (event) => props.onColumnVisibilityChange(
+                              className: "react-list-table-column-sort-input",
+                              value: props.sortState.find(
+                                (item) => item.key === column.key
+                              )?.order ?? "default",
+                              options: [
+                                { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
+                                { label: "\u5347\u5E8F", value: "ascend" },
+                                { label: "\u964D\u5E8F", value: "descend" }
+                              ],
+                              disabled: !column.sortable,
+                              allowClear: false,
+                              showSearch: false,
+                              style: { width: "100%", height: 24 },
+                              "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
+                              onChange: (value) => props.onColumnSortChange(
                                 column.key,
-                                event.target.checked
+                                value === "ascend" || value === "descend" ? value : null
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx("span", { className: "react-list-table-column-label", children: column.label })
-                        ]
-                      }
-                    ),
-                    !column.isGroup ? /* @__PURE__ */ jsxs("span", { className: "react-list-table-column-actions", children: [
-                      /* @__PURE__ */ jsx(
-                        ReactNumberInput,
-                        {
-                          className: "react-list-table-column-width-input",
-                          min: column.minWidth,
-                          max: column.maxWidth,
-                          value: column.width,
-                          allowClear: false,
-                          "aria-label": `${column.label}\u5217\u5BBD`,
-                          style: { width: 80, height: 24 },
-                          onChange: (width) => {
-                            if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
-                              props.onColumnWidthChange(
-                                column.key,
-                                width
-                              );
+                          /* @__PURE__ */ jsx(
+                            ReactSelect,
+                            {
+                              className: "react-list-table-column-fixed-input",
+                              value: column.fixed ?? "none",
+                              options: [
+                                { label: "\u4E0D\u56FA\u5B9A", value: "none" },
+                                { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
+                                { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
+                              ],
+                              allowClear: false,
+                              showSearch: false,
+                              style: { width: "100%", height: 24 },
+                              "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
+                              onChange: (value) => {
+                                props.onColumnFixedChange(
+                                  column.key,
+                                  value === "left" || value === "right" ? value : void 0
+                                );
+                              }
                             }
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        ReactSelect,
-                        {
-                          className: "react-list-table-column-sort-input",
-                          value: props.sortState.find(
-                            (item) => item.key === column.key
-                          )?.order ?? "default",
-                          options: [
-                            { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
-                            { label: "\u5347\u5E8F", value: "ascend" },
-                            { label: "\u964D\u5E8F", value: "descend" }
-                          ],
-                          disabled: !column.sortable,
-                          allowClear: false,
-                          showSearch: false,
-                          style: { width: "100%", height: 24 },
-                          "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
-                          onChange: (value) => props.onColumnSortChange(
-                            column.key,
-                            value === "ascend" || value === "descend" ? value : null
                           )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        ReactSelect,
-                        {
-                          className: "react-list-table-column-fixed-input",
-                          value: column.fixed ?? "none",
-                          options: [
-                            { label: "\u4E0D\u56FA\u5B9A", value: "none" },
-                            { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
-                            { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
-                          ],
-                          allowClear: false,
-                          showSearch: false,
-                          style: { width: "100%", height: 24 },
-                          "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
-                          onChange: (value) => {
-                            props.onColumnFixedChange(
-                              column.key,
-                              value === "left" || value === "right" ? value : void 0
-                            );
-                          }
-                        }
-                      )
-                    ] }) : null
-                  ] })
+                        ] }) : null
+                      ] })
+                    }
+                  )
                 }
-              ) })
+              )
             ]
           }
         ) : null
@@ -6202,6 +6351,7 @@ function ReactListTableInner(props, ref) {
         ReactListTableExportNameDialog,
         {
           request: exportNameRequest,
+          storageKey: storageKey ? `list:${storageKey}` : void 0,
           onClose: closeExportNameRequest,
           renderTable: (tableProps) => /* @__PURE__ */ jsx(ReactListTable, { ...tableProps })
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/react-list-table",
-  "version": "0.3.36",
+  "version": "0.3.38",
   "description": "React adapter for the list table core engine.",
   "license": "MIT",
   "type": "module",
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@canvas-components/chart": "0.3.7",
-    "@canvas-components/react-components": "0.3.16",
-    "@canvas-components/list-table": "0.3.32"
+    "@canvas-components/list-table": "0.3.32",
+    "@canvas-components/react-components": "0.3.16"
   },
   "peerDependencies": {
     "react": ">=16.8.0",