@canvas-components/react-list-table 0.3.28 → 0.3.30

package/dist/index.js

@@ -1,6 +1,6 @@
-import { createContext, forwardRef, useMemo, useRef, useState, useImperativeHandle, useContext, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, useLayoutEffect, useId, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
-import { ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
+import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
 import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
 export { EXPAND_COLUMN, ROW_SELECTION_COLUMN, SELECTION_COLUMN, getListTableStoredPageSize } from '@canvas-components/list-table';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -327,7 +327,8 @@ function buildCacheMenuItems(request) {
       ["alignment", "\u5BF9\u9F50"],
       ["dataFormat", "\u683C\u5F0F"],
       ["density", "\u8868\u683C\u5BC6\u5EA6"],
-      ["zoom", "\u7F29\u653E"]
+      ["zoom", "\u7F29\u653E"],
+      ["scrollbar", "\u6EDA\u52A8\u6761"]
     ];
     for (const [category, label] of categories)
       items.push({
@@ -375,6 +376,24 @@ var SELECTION_CHART_TYPES = [
   { value: "gauge", label: "\u4EEA\u8868\u76D8" }
 ];
 var COLORS = ["#1677ff", "#13c2c2", "#fa8c16", "#722ed1", "#eb2f96"];
+function isSameSelectionChartData(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  if (left.labels.length !== right.labels.length || left.keys?.length !== right.keys?.length || left.series.length !== right.series.length) {
+    return false;
+  }
+  if (left.labels.some((label, index) => label !== right.labels[index])) {
+    return false;
+  }
+  if (left.keys?.some((key, index) => key !== right.keys?.[index])) {
+    return false;
+  }
+  return left.series.every(
+    (series, index) => series.name === right.series[index]?.name && series.data.length === right.series[index]?.data.length && series.data.every(
+      (value, valueIndex) => value === right.series[index]?.data[valueIndex]
+    )
+  );
+}
 function createSelectionChartOption(data, chartType, seriesIndex = 0) {
   const activeSeries = data.series[Math.min(seriesIndex, data.series.length - 1)];
   if (["pie", "donut", "rose", "half-donut"].includes(chartType)) {
@@ -387,6 +406,7 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
         name: activeSeries.name,
         data: data.labels.map((name, index) => ({
           name,
+          key: data.keys?.[index],
           value: Math.max(activeSeries.data[index] ?? 0, 0)
         })),
         radius: chartType === "pie" || chartType === "rose" ? "62%" : ["28%", "62%"],
@@ -408,6 +428,7 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
       ...series.flatMap((item) => item.data.slice(0, labels.length))
     );
     const option2 = {
+      categoryKeys: data.keys?.slice(0, labels.length),
       color: COLORS,
       radar: {
         indicator: labels.map((name) => ({
@@ -455,6 +476,7 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
   const area = chartType.includes("area");
   const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
   const option = {
+    categoryKeys: data.keys,
     grid: {
       show: true,
       left: 20,
@@ -516,29 +538,48 @@ function resolveBumpRanks(data) {
   return ranks;
 }
 function ChartDialog(props) {
+  const [data, setData] = useState(props.data);
   const [chartType, setChartType] = useState("line");
   const [seriesIndex, setSeriesIndex] = useState(0);
   const [ready, setReady] = useState(false);
   const chartHostRef = useRef(null);
   const chartRef = useRef(null);
   const chartConfig = useMemo(() => {
-    if (!props.data) return null;
-    return createSelectionChartOption(props.data, chartType, seriesIndex);
-  }, [chartType, props.data, seriesIndex]);
+    if (!data) return null;
+    return createSelectionChartOption(data, chartType, seriesIndex);
+  }, [chartType, data, seriesIndex]);
+  useEffect(() => {
+    if (!props.getData) return;
+    const timer = globalThis.setInterval(() => {
+      const next = props.getData?.() ?? null;
+      setData(
+        (current) => isSameSelectionChartData(current, next) ? current : next
+      );
+    }, 500);
+    return () => globalThis.clearInterval(timer);
+  }, [props.getData]);
+  useEffect(() => {
+    if (!data && chartRef.current) {
+      chartRef.current.destroy();
+      chartRef.current = null;
+    }
+  }, [data]);
   useEffect(() => {
     if (!ready || !chartConfig || !chartHostRef.current) return;
     let chart = chartRef.current;
     if (!chart) {
       chart = new CanvasChart(chartHostRef.current, {
         type: chartConfig.type,
-        option: chartConfig.option
+        option: chartConfig.option,
+        animation: { duration: 720, easing: "linear" }
       });
       chart.mount();
       chartRef.current = chart;
     } else {
       chart.updateOptions({
         type: chartConfig.type,
-        option: chartConfig.option
+        option: chartConfig.option,
+        animation: { duration: 720, easing: "linear" }
       });
     }
   }, [chartConfig, ready]);
@@ -563,7 +604,7 @@ function ChartDialog(props) {
       onCancel: props.onClose,
       afterOpenChange: setReady,
       bodyStyle: { padding: "12px 20px 20px", display: "flex" },
-      children: props.data ? /* @__PURE__ */ jsxs(
+      children: data ? /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
@@ -598,7 +639,7 @@ function ChartDialog(props) {
                 ]
               }
             ),
-            props.data.series.length > 1 && [
+            data.series.length > 1 && [
               "pie",
               "donut",
               "rose",
@@ -620,7 +661,7 @@ function ChartDialog(props) {
                     {
                       value: seriesIndex,
                       allowClear: false,
-                      options: props.data.series.map((series, index) => ({
+                      options: data.series.map((series, index) => ({
                         value: index,
                         label: series.name
                       })),
@@ -674,9 +715,90 @@ 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, style: { width: "100%" }, children: "\u914D\u7F6E\u6EDA\u52A8\u6761\u5C5E\u6027" })
+    }
+  );
+}
+function ResetMenu(props) {
+  const { request } = props;
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u91CD\u7F6E",
+      items: [
+        {
+          key: "reset-filter",
+          label: "\u91CD\u7F6E\u7B5B\u9009",
+          onClick: request.onResetFilter
+        },
+        { key: "reset-sort", label: "\u91CD\u7F6E\u6392\u5E8F", onClick: request.onResetSort },
+        {
+          key: "reset-header",
+          label: "\u91CD\u7F6E\u8868\u5934\u914D\u7F6E",
+          onClick: request.onResetHeader
+        },
+        {
+          key: "reset-grouping",
+          label: "\u91CD\u7F6E\u5206\u7EC4",
+          onClick: request.onResetGrouping
+        },
+        {
+          key: "reset-summary",
+          label: "\u91CD\u7F6E\u6C47\u603B",
+          onClick: request.onResetSummary
+        },
+        {
+          key: "reset-alignment",
+          label: "\u91CD\u7F6E\u5BF9\u9F50",
+          onClick: request.onResetAlignment
+        },
+        {
+          key: "reset-data-format",
+          label: "\u91CD\u7F6E\u683C\u5F0F",
+          onClick: request.onResetDataFormat
+        },
+        {
+          key: "reset-scrollbar",
+          label: "\u91CD\u7F6E\u6EDA\u52A8\u914D\u7F6E",
+          onClick: () => {
+            request.onResetScrollbar?.();
+            request.onClose();
+          }
+        }
+      ]
+    }
+  );
+}
 function ReactTableContextMenuView(props) {
   const { request } = props;
-  const [menuOpen, setMenuOpen] = useState(true);
+  const [closedRequest, setClosedRequest] = useState(null);
+  const menuOpen = request !== null && closedRequest !== request;
+  const setMenuOpen = (open) => {
+    setClosedRequest(open ? null : request);
+  };
   const [conditionalEditor, setConditionalEditor] = useState(null);
   const conditionalDialog = conditionalEditor ? /* @__PURE__ */ jsx(
     ConditionalFormatDialog,
@@ -689,6 +811,31 @@ function ReactTableContextMenuView(props) {
     }
   ) : null;
   const [moreFormatRequest, setMoreFormatRequest] = useState(null);
+  const [scrollbarSettingsRequest, setScrollbarSettingsRequest] = useState(null);
+  const [scrollbarPositionRequest, setScrollbarPositionRequest] = useState(null);
+  const scrollbarDialog = scrollbarSettingsRequest ? /* @__PURE__ */ jsx(
+    ReactScrollbarSettingsDialog,
+    {
+      value: scrollbarSettingsRequest.scrollbar,
+      onConfirm: (value) => {
+        scrollbarSettingsRequest.onChangeScrollbar?.({
+          ...scrollbarSettingsRequest.scrollbar,
+          ...value
+        });
+        setScrollbarSettingsRequest(null);
+      },
+      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;
   const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
   const [chartRequest, setChartRequest] = useState(null);
   const [columnEditor, setColumnEditor] = useState(null);
@@ -707,6 +854,8 @@ function ReactTableContextMenuView(props) {
   ) : null });
   if (!request) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
+      scrollbarDialog,
+      scrollbarPositionDialog,
       conditionalDialog,
       columnDialogs,
       moreFormatRequest ? /* @__PURE__ */ jsx(
@@ -730,6 +879,7 @@ function ReactTableContextMenuView(props) {
         ChartDialog,
         {
           data: chartRequest.data,
+          getData: chartRequest.request.onCreateChart,
           onClose: () => {
             chartRequest.request.onClose();
             setChartRequest(null);
@@ -738,11 +888,64 @@ function ReactTableContextMenuView(props) {
       ) : null
     ] });
   }
+  const openScrollbarSettings = () => {
+    setScrollbarSettingsRequest(request);
+    request.onClose();
+  };
+  if (request.scrollbarArea) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      scrollbarDialog,
+      scrollbarPositionDialog,
+      /* @__PURE__ */ jsxs(
+        ReactPopup,
+        {
+          constrainHeight: true,
+          open: menuOpen,
+          anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
+          minWidth: 260,
+          onOpenChange: (open) => {
+            setMenuOpen(open);
+            if (!open) request.onClose();
+          },
+          surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
+          children: [
+            /* @__PURE__ */ jsx(
+              ScrollbarModeMenu,
+              {
+                request,
+                onOpenSettings: openScrollbarSettings
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MenuAction,
+              {
+                label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+                onClick: () => {
+                  setScrollbarPositionRequest(request);
+                  request.onClose();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(ResetMenu, { request }),
+            buildCacheMenuItems(request).length > 0 ? /* @__PURE__ */ jsx(
+              MenuSubmenu,
+              {
+                label: "\u7F13\u5B58\u5230\u672C\u5730",
+                items: buildCacheMenuItems(request)
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
   const surfaceStyle = {
     ...CONTEXT_MENU_SURFACE_STYLE,
     width: 260
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scrollbarDialog,
+    scrollbarPositionDialog,
     conditionalDialog,
     columnDialogs,
     /* @__PURE__ */ jsx(
@@ -830,7 +1033,10 @@ function ReactTableContextMenuView(props) {
             {
               label: "\u521B\u5EFA\u56FE\u8868",
               onClick: request.onCreateChart ? () => {
-                setChartRequest({ request, data: request.onCreateChart?.() ?? null });
+                setChartRequest({
+                  request,
+                  data: request.onCreateChart?.() ?? null
+                });
                 setMenuOpen(false);
               } : void 0
             }
@@ -1070,47 +1276,22 @@ function ReactTableContextMenuView(props) {
               ]
             }
           ),
+          /* @__PURE__ */ jsx(ResetMenu, { request }),
           /* @__PURE__ */ jsx(
-            MenuSubmenu,
+            ScrollbarModeMenu,
             {
-              label: "\u91CD\u7F6E",
-              items: [
-                {
-                  key: "reset-filter",
-                  label: "\u91CD\u7F6E\u7B5B\u9009",
-                  onClick: request.onResetFilter
-                },
-                {
-                  key: "reset-sort",
-                  label: "\u91CD\u7F6E\u6392\u5E8F",
-                  onClick: request.onResetSort
-                },
-                {
-                  key: "reset-header",
-                  label: "\u91CD\u7F6E\u8868\u5934\u914D\u7F6E",
-                  onClick: request.onResetHeader
-                },
-                {
-                  key: "reset-grouping",
-                  label: "\u91CD\u7F6E\u5206\u7EC4",
-                  onClick: request.onResetGrouping
-                },
-                {
-                  key: "reset-summary",
-                  label: "\u91CD\u7F6E\u6C47\u603B",
-                  onClick: request.onResetSummary
-                },
-                {
-                  key: "reset-alignment",
-                  label: "\u91CD\u7F6E\u5BF9\u9F50",
-                  onClick: request.onResetAlignment
-                },
-                {
-                  key: "reset-data-format",
-                  label: "\u91CD\u7F6E\u683C\u5F0F",
-                  onClick: request.onResetDataFormat
-                }
-              ]
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
+              }
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1181,6 +1362,7 @@ function ReactTableContextMenuView(props) {
       ChartDialog,
       {
         data: chartRequest.data,
+        getData: chartRequest.request.onCreateChart,
         onClose: () => {
           chartRequest.request.onClose();
           setChartRequest(null);
@@ -1609,6 +1791,7 @@ function ColumnEditorDialog(props) {
     minWidth: item?.minWidth ?? Math.min(40, item?.width ?? 160),
     maxWidth: item?.maxWidth ?? Math.max(2e3, item?.width ?? 160),
     fixed: item?.fixed,
+    sortOrder: item && (item.sortable === false || item.children?.length) ? void 0 : item ? request.sortState?.find((entry) => entry.key === item.key)?.order ?? null : null,
     order: item?.order ?? (parentItem?.children?.length ?? request.columns?.length ?? 0) + 1
   }));
   const [error, setError] = useState(null);
@@ -1715,6 +1898,25 @@ function ColumnEditorDialog(props) {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: "\u6392\u5E8F\u65B9\u5F0F" }),
+          /* @__PURE__ */ jsx(
+            ReactSelect,
+            {
+              value: draft.sortOrder ?? "default",
+              allowClear: false,
+              disabled: item?.sortable === false || Boolean(item?.children?.length),
+              options: [
+                { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
+                { label: "\u5347\u5E8F", value: "ascend" },
+                { label: "\u964D\u5E8F", value: "descend" }
+              ],
+              onChange: (value) => update({
+                sortOrder: value === "ascend" || value === "descend" ? value : null
+              })
+            }
+          )
+        ] }),
         isUserColumn ? /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
           /* @__PURE__ */ jsx("span", { children: "\u56FA\u5B9A\u4F4D\u7F6E" }),
           /* @__PURE__ */ jsx(
@@ -1744,6 +1946,7 @@ function ColumnVisibilityMenu(props) {
   const [open, setOpen] = useState(false);
   const [deleteConfirmKey, setDeleteConfirmKey] = useState(null);
   const closeTimerRef = useRef(null);
+  const keepOpenAfterToggleRef = useRef(false);
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
@@ -1751,13 +1954,19 @@ function ColumnVisibilityMenu(props) {
     }
   };
   const scheduleClose = () => {
-    if (deleteConfirmKey) return;
+    if (deleteConfirmKey || keepOpenAfterToggleRef.current) return;
     clearCloseTimer();
     closeTimerRef.current = window.setTimeout(() => {
       setOpen(false);
       closeTimerRef.current = null;
     }, 120);
   };
+  const handleToggle = (columnKey, visible) => {
+    clearCloseTimer();
+    keepOpenAfterToggleRef.current = true;
+    setOpen(true);
+    onToggle(columnKey, visible);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1810,7 +2019,10 @@ function ColumnVisibilityMenu(props) {
             placement: "rightTop",
             offset: 2,
             minWidth: 300,
-            onOpenChange: setOpen,
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen) keepOpenAfterToggleRef.current = false;
+              setOpen(nextOpen);
+            },
             surfaceClassName: "canvas-react-scrollbar",
             surfaceStyle: {
               ...CONTEXT_MENU_SURFACE_STYLE,
@@ -1842,7 +2054,7 @@ function ColumnVisibilityMenu(props) {
                     ColumnVisibilityItem,
                     {
                       item: column,
-                      onToggle,
+                      onToggle: handleToggle,
                       onAddChild,
                       onEdit,
                       onDelete,
@@ -1876,6 +2088,7 @@ function ColumnVisibilityItem(props) {
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
+  const keepOpenAfterToggleRef = useRef(false);
   const hasChildren = !!item.children?.length;
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
@@ -1884,13 +2097,18 @@ function ColumnVisibilityItem(props) {
     }
   };
   const scheduleClose = () => {
-    if (deleteConfirmKey) return;
+    if (deleteConfirmKey || keepOpenAfterToggleRef.current) return;
     clearCloseTimer();
     closeTimerRef.current = window.setTimeout(() => {
       setOpen(false);
       closeTimerRef.current = null;
     }, 120);
   };
+  const handleToggle = (columnKey, visible) => {
+    clearCloseTimer();
+    keepOpenAfterToggleRef.current = true;
+    onToggle(columnKey, visible);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1926,7 +2144,7 @@ function ColumnVisibilityItem(props) {
             disabled: item.disabled,
             indeterminate: !!item.indeterminate,
             onChange: (event) => {
-              onToggle(item.key, !!event.target.checked);
+              handleToggle(item.key, !!event.target.checked);
             },
             children: [
               item.title,
@@ -1998,7 +2216,10 @@ function ColumnVisibilityItem(props) {
             placement: "rightTop",
             offset: 2,
             minWidth: 300,
-            onOpenChange: setOpen,
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen) keepOpenAfterToggleRef.current = false;
+              setOpen(nextOpen);
+            },
             surfaceClassName: "canvas-react-scrollbar",
             surfaceStyle: {
               ...CONTEXT_MENU_SURFACE_STYLE,
@@ -2030,7 +2251,7 @@ function ColumnVisibilityItem(props) {
                     ColumnVisibilityItem,
                     {
                       item: child,
-                      onToggle,
+                      onToggle: handleToggle,
                       onAddChild,
                       onEdit,
                       onDelete,
@@ -3328,36 +3549,193 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+var sortOptions = [
+  { value: "default", label: "\u9ED8\u8BA4" },
+  { value: "ascend", label: "\u5347\u5E8F" },
+  { value: "descend", label: "\u964D\u5E8F" }
+];
+var summaryOptions = [
+  { value: "original", label: "\u539F\u6C47\u603B" },
+  { value: "none", label: "\u65E0\u6C47\u603B" },
+  { value: "title", label: "\u6807\u9898" },
+  { value: "sum", label: "\u6C42\u548C" },
+  { value: "avg", label: "\u5E73\u5747\u503C" },
+  { value: "count", label: "\u8BA1\u6570" },
+  { value: "unionCount", label: "\u53BB\u91CD\u8BA1\u6570" },
+  { value: "rowCount", label: "\u884C\u6570" },
+  { value: "mergedRowCount", label: "\u5408\u5E76\u884C\u6570" },
+  { value: "min", label: "\u6700\u5C0F\u503C" },
+  { value: "max", label: "\u6700\u5927\u503C" }
+];
+var roundingOptions = [
+  { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
+  { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
+  { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" },
+  { value: "truncate", label: "\u622A\u65AD" }
+];
+var booleanOptions = [
+  { value: "yes", label: "\u662F" },
+  { value: "no", label: "\u5426" }
+];
+function createExportDialogRows(columns) {
+  return columns.map((column) => ({
+    key: column.key,
+    title: column.title,
+    sortOrder: column.sortOrder,
+    sortIndex: column.sortIndex,
+    sortPriority: column.sortPriority,
+    summaryType: column.summary.type,
+    showTypePrefix: column.summary.showTypePrefix ? "yes" : "no",
+    precision: column.summary.precision,
+    roundingMode: column.summary.roundingMode,
+    preserveTrailingZeros: column.summary.preserveTrailingZeros ? "yes" : "no"
+  }));
+}
+function buildExportDialogSettings(rows, selectedKeys, includeSummary) {
+  const selected = new Set(selectedKeys.map(String));
+  return {
+    columnKeys: rows.filter((row) => selected.has(row.key)).map((row) => row.key),
+    sortState: rows.filter((row) => selected.has(row.key) && row.sortOrder !== "default").sort(
+      (a, b) => (a.sortIndex ?? Number.MAX_SAFE_INTEGER) - (b.sortIndex ?? Number.MAX_SAFE_INTEGER)
+    ).map((row) => ({
+      key: row.key,
+      order: row.sortOrder,
+      ...row.sortPriority != null ? { priority: row.sortPriority } : {}
+    })),
+    summaries: Object.fromEntries(
+      rows.map((row) => [
+        row.key,
+        {
+          type: row.summaryType,
+          showTypePrefix: row.showTypePrefix === "yes",
+          precision: row.precision,
+          roundingMode: row.roundingMode,
+          preserveTrailingZeros: row.preserveTrailingZeros === "yes"
+        }
+      ])
+    ),
+    includeSummary
+  };
+}
 function ReactListTableExportNameDialog({
-  request
+  request,
+  onClose,
+  renderTable
 }) {
+  const tableId = useId();
   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 [invalid, setInvalid] = useState(false);
+  const [rows, setRows] = useState(() => createExportDialogRows(request.columns ?? []));
+  const [selectedKeys, setSelectedKeys] = useState(
+    () => (request.columns ?? []).filter((column) => column.selected !== false).map((column) => column.key)
+  );
+  const [includeSummary, setIncludeSummary] = useState(request.includeSummary ?? false);
+  const [error, setError] = useState("");
+  const columns = useMemo(
+    () => [
+      {
+        key: "position",
+        dataIndex: "key",
+        title: "\u5217\u987A\u5E8F\uFF08\u62D6\u52A8\u884C\u6392\u5E8F\uFF09",
+        width: 160,
+        render: (_value, _row, index) => String(index + 1),
+        headerAlign: "center",
+        align: "center"
+      },
+      ROW_SELECTION_COLUMN,
+      { key: "title", dataIndex: "title", title: "\u5217\u540D\u79F0", width: 190 },
+      {
+        key: "sortOrder",
+        dataIndex: "sortOrder",
+        title: "\u6570\u636E\u6392\u5E8F",
+        width: 120,
+        editable: true,
+        formItemProps: { valueType: "select", clickCount: 1, options: sortOptions },
+        render: (value) => sortOptions.find((option) => option.value === value)?.label ?? "\u9ED8\u8BA4"
+      },
+      ...includeSummary ? [{
+        key: "summary-group",
+        dataIndex: "summaryType",
+        title: "\u6C47\u603B",
+        children: [
+          {
+            key: "summaryType",
+            dataIndex: "summaryType",
+            title: "\u6C47\u603B\u65B9\u5F0F",
+            width: 135,
+            editable: true,
+            formItemProps: { valueType: "select", clickCount: 1, options: summaryOptions.filter((option) => option.value !== "original" || request.columns?.some((column) => column.summary.type === "original")) },
+            render: (value) => summaryOptions.find((option) => option.value === value)?.label ?? "\u65E0\u6C47\u603B"
+          },
+          {
+            key: "showTypePrefix",
+            dataIndex: "showTypePrefix",
+            title: "\u6C47\u603B\u524D\u7F00",
+            width: 115,
+            editable: true,
+            formItemProps: { valueType: "select", clickCount: 1, options: booleanOptions },
+            render: (value) => value === "yes" ? "\u662F" : "\u5426"
+          },
+          {
+            key: "precision",
+            dataIndex: "precision",
+            title: "\u6C47\u603B\u5C0F\u6570\u4F4D\u6570",
+            width: 135,
+            editable: true,
+            formItemProps: { valueType: "number", clickCount: 1, min: 0, max: 20 }
+          },
+          {
+            key: "roundingMode",
+            dataIndex: "roundingMode",
+            title: "\u53D6\u6574\u65B9\u5F0F",
+            width: 130,
+            editable: true,
+            formItemProps: { valueType: "select", clickCount: 1, options: roundingOptions },
+            render: (value) => roundingOptions.find((option) => option.value === value)?.label ?? "\u56DB\u820D\u4E94\u5165"
+          },
+          {
+            key: "preserveTrailingZeros",
+            dataIndex: "preserveTrailingZeros",
+            title: "\u4FDD\u7559\u65E0\u6548\u96F6",
+            width: 125,
+            editable: true,
+            formItemProps: { valueType: "select", clickCount: 1, options: booleanOptions },
+            render: (value) => value === "yes" ? "\u662F" : "\u5426"
+          }
+        ]
+      }] : []
+    ],
+    [includeSummary, request.columns]
+  );
   const confirm = () => {
-    if (!fileName.trim()) {
-      setInvalid(true);
-      return;
-    }
-    request.onConfirm(`${fileName.trim()}${extension}`);
+    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");
+    request.onConfirm(
+      `${fileName.trim()}${extension}`,
+      request.columns ? buildExportDialogSettings(rows, selectedKeys, includeSummary) : void 0
+    );
+    onClose?.();
   };
   return /* @__PURE__ */ jsxs(
     ReactModal,
     {
       open: true,
       title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: 420,
+      width: request.columns ? 1180 : 420,
       fullscreenable: false,
-      onCancel: request.onCancel,
       onOk: confirm,
       okText: "\u5BFC\u51FA",
       cancelText: "\u53D6\u6D88",
+      onCancel: () => {
+        onClose?.();
+        request.onCancel();
+      },
       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__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
             /* @__PURE__ */ jsx(
               ReactInput,
               {
@@ -3367,15 +3745,72 @@ function ReactListTableExportNameDialog({
                 onFocus: (event) => event.target.select(),
                 onChange: (event) => {
                   setFileName(event.target.value);
-                  setInvalid(false);
+                  setError("");
                 },
                 onPressEnter: confirm
               }
             ),
-            /* @__PURE__ */ jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
+            /* @__PURE__ */ jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", children: extension })
           ] })
         ] }),
-        invalid ? /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0" }) : null
+        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" }),
+            /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+              /* @__PURE__ */ jsx(
+                ReactCheckbox,
+                {
+                  checked: includeSummary,
+                  "aria-label": "\u5BFC\u51FA\u6C47\u603B\u884C",
+                  onChange: (event) => setIncludeSummary(event.target.checked)
+                }
+              ),
+              "\u5BFC\u51FA\u6C47\u603B\u884C"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
+            tableId,
+            columns,
+            dataSource: rows,
+            rowKey: "key",
+            rowHeight: 42,
+            headerRowHeight: 38,
+            toolbar: false,
+            contextMenu: false,
+            pagination: false,
+            resizable: true,
+            draggable: true,
+            rowSelection: {
+              type: "checkbox",
+              selectedRowKeys: selectedKeys,
+              selectRowByClick: false,
+              columnWidth: 54,
+              onChange: (keys) => {
+                setSelectedKeys(keys);
+                setError("");
+              }
+            },
+            rowDrag: {
+              enabled: true,
+              droppable: true,
+              allowSelfDrop: true,
+              mode: "move",
+              onDrop: ({ rows: dragged, insertIndex, source }) => {
+                if (source.tableId !== tableId || insertIndex == null) return;
+                const draggedKeys = new Set(dragged.map((row) => row.key));
+                setRows((current) => {
+                  const moved = current.filter((row) => draggedKeys.has(row.key));
+                  const preceding = current.slice(0, insertIndex).filter((row) => !draggedKeys.has(row.key)).length;
+                  const remaining = current.filter((row) => !draggedKeys.has(row.key));
+                  remaining.splice(preceding, 0, ...moved);
+                  return remaining;
+                });
+              }
+            },
+            style: { width: "100%", height: "100%" }
+          }) })
+        ] }) : null,
+        error ? /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: error }) : null
       ]
     }
   );
@@ -4709,7 +5144,7 @@ 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-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  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);
@@ -4824,7 +5259,10 @@ function ReactTableToolbar(props) {
           ToolButton,
           {
             label: "\u5217\u8BBE\u7F6E",
-            onClick: () => setSettingOpen((v) => !v),
+            onClick: () => {
+              if (!settingOpen) props.onColumnSettingsOpen();
+              setSettingOpen((v) => !v);
+            },
             children: /* @__PURE__ */ jsx(SettingOutlined, {})
           }
         ),
@@ -4832,7 +5270,7 @@ function ReactTableToolbar(props) {
           "div",
           {
             className: "react-list-table-column-setting",
-            style: { width: config.columnSettingWidth },
+            style: { width: config.columnSettingWidth ?? 430 },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-setting-head", children: [
                 /* @__PURE__ */ jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
@@ -4912,6 +5350,29 @@ function ReactTableToolbar(props) {
                           }
                         }
                       ),
+                      /* @__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,
                         {
@@ -4977,7 +5438,8 @@ function flattenColumns(columns, parentKey = "root", level = 0) {
       fixed: column.fixed,
       level,
       isGroup: Boolean(column.children?.length),
-      disableHide: column.disableHide === true
+      disableHide: column.disableHide === true,
+      sortable: column.allowSort !== false && column.sorter !== false
     };
     return column.children?.length ? [current, ...flattenColumns(column.children, key, level + 1)] : [current];
   });
@@ -5046,6 +5508,7 @@ function useReactListTableState(options) {
     }),
     [options.ui]
   );
+  const appliedOptionsRef = useRef(null);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -5055,11 +5518,13 @@ function useReactListTableState(options) {
       ...options,
       ui: uiOptions
     });
+    appliedOptionsRef.current = { options, uiOptions };
     table.mount();
     tableRef.current = table;
     return () => {
       table.destroy();
       tableRef.current = null;
+      appliedOptionsRef.current = null;
       setEditorRequest(null);
       setPaginationConfig(null);
       setTooltipRequest(null);
@@ -5074,6 +5539,10 @@ function useReactListTableState(options) {
     };
   }, []);
   useEffect(() => {
+    if (appliedOptionsRef.current?.options === options && appliedOptionsRef.current.uiOptions === uiOptions) {
+      return;
+    }
+    appliedOptionsRef.current = { options, uiOptions };
     tableRef.current?.updateOptions({
       ...options,
       ui: uiOptions
@@ -5093,6 +5562,9 @@ function useReactListTableState(options) {
     imagePreviewRequest,
     dangerConfirmRequest,
     exportNameRequest,
+    closeExportNameRequest: () => {
+      setExportNameRequest(null);
+    },
     closeDangerConfirmRequest: () => {
       setDangerConfirmRequest(null);
       options.ui?.onDangerConfirmRequest?.(null);
@@ -5154,6 +5626,70 @@ function resolveReactListTableDebugOptions(debug, inheritedEnabled) {
     enabled: true
   };
 }
+
+// src/components/column-manager-state.ts
+function applyColumnManagerState(columns, visibility, orders, config, parentKey = "root") {
+  const order = orders.get(parentKey);
+  const sortedColumns = order ? applyManagedColumnOrder(columns, order) : columns;
+  return sortedColumns.map((column) => {
+    const key = resolveColumnKey(column);
+    const managedConfig = config.get(key);
+    return {
+      ...column,
+      hidden: visibility.has(key) ? visibility.get(key) === false : column.hidden ?? column.initialHide,
+      width: managedConfig?.width ?? column.width,
+      minWidth: column.minWidth,
+      maxWidth: column.maxWidth,
+      fixed: managedConfig?.fixed === null ? void 0 : managedConfig?.fixed ?? column.fixed,
+      children: column.children ? applyColumnManagerState(
+        column.children,
+        visibility,
+        orders,
+        config,
+        key
+      ) : void 0
+    };
+  });
+}
+function applyManagedColumnOrder(columns, orderedKeys) {
+  const managedKeySet = new Set(orderedKeys);
+  const managedSlots = columns.map(
+    (column, index) => managedKeySet.has(resolveColumnKey(column)) ? index : -1
+  ).filter((index) => index >= 0);
+  const columnByKey = new Map(
+    columns.map((column) => [resolveColumnKey(column), column])
+  );
+  const next = [...columns];
+  orderedKeys.forEach((key, index) => {
+    const slot = managedSlots[index];
+    const column = columnByKey.get(key);
+    if (slot != null && column) {
+      next[slot] = column;
+    }
+  });
+  return next;
+}
+function resolveColumnKey(column) {
+  return String(column.key ?? column.dataIndex);
+}
+function getColumnSettingsSignature(columns) {
+  return JSON.stringify(
+    columns.map((column) => ({
+      key: resolveColumnKey(column),
+      title: String(
+        column.settingTitle ?? (typeof column.title === "string" ? column.title : "")
+      ),
+      dataIndex: column.dataIndex,
+      userDefined: column.userDefined,
+      hidden: column.hidden,
+      width: column.width,
+      minWidth: column.minWidth,
+      maxWidth: column.maxWidth,
+      fixed: column.fixed,
+      children: column.children ? getColumnSettingsSignature(column.children) : void 0
+    }))
+  );
+}
 function ReactListTableInner(props, ref) {
   const {
     className,
@@ -5166,6 +5702,7 @@ function ReactListTableInner(props, ref) {
     onChange,
     rowKey,
     columns,
+    showCollapsedColumnIcon,
     dataSource,
     loading,
     onRow,
@@ -5173,6 +5710,7 @@ function ReactListTableInner(props, ref) {
     styles,
     striped,
     highlightMode,
+    keyboardNavigation,
     contextMenu,
     grouping,
     rowHeight,
@@ -5207,13 +5745,31 @@ function ReactListTableInner(props, ref) {
   );
   const shellRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [scrollbarOverride, setScrollbarOverride] = useState(null);
+  const [sharedScrollbar, setSharedScrollbar] = useState(
+    getSharedScrollbarSettings
+  );
+  useEffect(
+    () => subscribeSharedScrollbarSettings(
+      () => setSharedScrollbar(getSharedScrollbarSettings())
+    ),
+    []
+  );
+  const effectiveScrollbar = sharedScrollbar.shared ? sharedScrollbar.value : scrollbarOverride ?? scrollbar;
   const [densityOverride, setDensityOverride] = useState(null);
   const [columnVisibility, setColumnVisibility] = useState(() => /* @__PURE__ */ new Map());
   const [columnOrders, setColumnOrders] = useState(
     () => /* @__PURE__ */ new Map()
   );
   const [columnConfig, setColumnConfig] = useState(() => /* @__PURE__ */ new Map());
+  const restoredColumnTreeRef = useRef(null);
+  const [restoredColumnTree, setRestoredColumnTree] = useState(
+    restoredColumnTreeRef.current
+  );
   const [columnConfigRevision, setColumnConfigRevision] = useState(0);
+  const [toolbarSortState, setToolbarSortState] = useState(
+    []
+  );
   const [columnSettingsCacheOverride, setColumnSettingsCacheOverride] = useState(null);
   const resolvedColumnSettingsCache = (columnSettingsCacheOverride?.storageKey === storageKey ? columnSettingsCacheOverride?.value : void 0) ?? cacheColumnSettings ?? true;
   const [cachePreferencesOverride, setCachePreferencesOverride] = useState();
@@ -5221,12 +5777,19 @@ function ReactListTableInner(props, ref) {
   const [columnConfigResetRevision, setColumnConfigResetRevision] = useState(0);
   const resolvedColumns = useMemo(
     () => applyColumnManagerState(
-      columns,
+      restoredColumnTree?.sourceColumns === columns && restoredColumnTree.storageKey === storageKey ? restoredColumnTree.columns : columns,
       columnVisibility,
       columnOrders,
       columnConfig
     ),
-    [columns, columnVisibility, columnOrders, columnConfig]
+    [
+      columns,
+      storageKey,
+      restoredColumnTree,
+      columnVisibility,
+      columnOrders,
+      columnConfig
+    ]
   );
   const resolvedRowHeight = densityOverride ?? rowHeight;
   const resolvedHeaderRowHeight = resolveDensityLinkedHeight(
@@ -5248,6 +5811,7 @@ function ReactListTableInner(props, ref) {
       onChange,
       rowKey,
       columns: resolvedColumns,
+      showCollapsedColumnIcon,
       dataSource,
       loading,
       onRow,
@@ -5255,6 +5819,7 @@ function ReactListTableInner(props, ref) {
       styles,
       striped,
       highlightMode,
+      keyboardNavigation,
       contextMenu,
       grouping,
       rowHeight: resolvedRowHeight,
@@ -5267,7 +5832,7 @@ function ReactListTableInner(props, ref) {
       rowSelection,
       expandable,
       pagination,
-      scrollbar,
+      scrollbar: effectiveScrollbar,
       carouselScroll,
       stretchColumns,
       resizable,
@@ -5292,6 +5857,24 @@ function ReactListTableInner(props, ref) {
       ui: {
         ...nextOptions.ui,
         onDensityChange: setDensityOverride,
+        onScrollbarChange: setScrollbarOverride,
+        onColumnSettingsChange: (restoredColumns) => {
+          const signature = getColumnSettingsSignature(restoredColumns);
+          const current = restoredColumnTreeRef.current;
+          if (current?.sourceColumns === columns && current.storageKey === storageKey && current.signature === signature)
+            return;
+          const next = {
+            sourceColumns: columns,
+            storageKey,
+            columns: restoredColumns,
+            signature
+          };
+          restoredColumnTreeRef.current = next;
+          setRestoredColumnTree(next);
+          setColumnVisibility(/* @__PURE__ */ new Map());
+          setColumnOrders(/* @__PURE__ */ new Map());
+          setColumnConfig(/* @__PURE__ */ new Map());
+        },
         onColumnSettingsCacheChange: (value) => setColumnSettingsCacheOverride(
           (current) => current?.storageKey === storageKey && current?.value === value ? current : { storageKey, value }
         ),
@@ -5310,6 +5893,7 @@ function ReactListTableInner(props, ref) {
     onChange,
     rowKey,
     resolvedColumns,
+    showCollapsedColumnIcon,
     dataSource,
     loading,
     onRow,
@@ -5317,6 +5901,7 @@ function ReactListTableInner(props, ref) {
     styles,
     striped,
     highlightMode,
+    keyboardNavigation,
     contextMenu,
     grouping,
     resolvedRowHeight,
@@ -5329,7 +5914,7 @@ function ReactListTableInner(props, ref) {
     rowSelection,
     expandable,
     pagination,
-    scrollbar,
+    effectiveScrollbar,
     carouselScroll,
     stretchColumns,
     resizable,
@@ -5358,6 +5943,7 @@ function ReactListTableInner(props, ref) {
     imagePreviewRequest,
     dangerConfirmRequest,
     exportNameRequest,
+    closeExportNameRequest,
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
@@ -5410,6 +5996,12 @@ function ReactListTableInner(props, ref) {
               columnSettingsCacheAvailable: Boolean(storageKey),
               onColumnSettingsCacheChange: (enabled) => tableRef.current?.setColumnSettingsCache(enabled),
               columns: resolvedColumns,
+              sortState: toolbarSortState,
+              onColumnSettingsOpen: () => setToolbarSortState(tableRef.current?.getSortState() ?? []),
+              onColumnSortChange: (columnKey, order) => {
+                tableRef.current?.setSortOrder(columnKey, order);
+                setToolbarSortState(tableRef.current?.getSortState() ?? []);
+              },
               density: resolvedRowHeight ?? 32,
               hostRef: shellRef,
               onFullscreenChange: setIsFullscreen,
@@ -5473,6 +6065,8 @@ function ReactListTableInner(props, ref) {
                   setColumnVisibility(/* @__PURE__ */ new Map());
                   setColumnOrders(/* @__PURE__ */ new Map());
                   setColumnConfig(/* @__PURE__ */ new Map());
+                  restoredColumnTreeRef.current = null;
+                  setRestoredColumnTree(null);
                   setColumnConfigResetRevision((current) => current + 1);
                   setColumnConfigRevision((current) => current + 1);
                 });
@@ -5530,16 +6124,43 @@ function ReactListTableInner(props, ref) {
       /* @__PURE__ */ jsx(ReactTableFixedPopupView, { request: fixedPopupRequest }),
       portalContainer
     ) : null,
-    headerContextMenuRequest ? createPortal(
-      /* @__PURE__ */ jsx(ReactTableContextMenuView, { request: headerContextMenuRequest }),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        ReactTableContextMenuView,
+        {
+          request: headerContextMenuRequest ? {
+            ...headerContextMenuRequest,
+            scrollbar: effectiveScrollbar,
+            onChangeScrollbar: (value) => {
+              headerContextMenuRequest.onChangeScrollbar?.(value);
+              setScrollbarOverride(value);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value });
+            },
+            onResetScrollbar: () => {
+              headerContextMenuRequest.onResetScrollbar?.();
+              setScrollbarOverride(null);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value: {} });
+            }
+          } : null
+        }
+      ),
       portalContainer
-    ) : null,
+    ),
     searchRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactListTableSearchDialog, { request: searchRequest }),
       portalContainer
     ) : null,
     exportNameRequest ? createPortal(
-      /* @__PURE__ */ jsx(ReactListTableExportNameDialog, { request: exportNameRequest }),
+      /* @__PURE__ */ jsx(
+        ReactListTableExportNameDialog,
+        {
+          request: exportNameRequest,
+          onClose: closeExportNameRequest,
+          renderTable: (tableProps) => /* @__PURE__ */ jsx(ReactListTable, { ...tableProps })
+        }
+      ),
       portalContainer
     ) : null,
     dangerConfirmRequest ? createPortal(
@@ -5570,50 +6191,6 @@ function ReactListTableInner(props, ref) {
     ) : null
   ] });
 }
-function applyColumnManagerState(columns, visibility, orders, config, parentKey = "root") {
-  const order = orders.get(parentKey);
-  const sortedColumns = order ? applyManagedColumnOrder(columns, order) : columns;
-  return sortedColumns.map((column) => {
-    const key = resolveColumnKey(column);
-    const managedConfig = config.get(key);
-    return {
-      ...column,
-      hidden: visibility.has(key) ? visibility.get(key) === false : column.hidden ?? column.initialHide,
-      width: managedConfig?.width ?? column.width,
-      minWidth: column.minWidth,
-      maxWidth: column.maxWidth,
-      fixed: managedConfig?.fixed === null ? void 0 : managedConfig?.fixed ?? column.fixed,
-      children: column.children ? applyColumnManagerState(
-        column.children,
-        visibility,
-        orders,
-        config,
-        key
-      ) : void 0
-    };
-  });
-}
-function applyManagedColumnOrder(columns, orderedKeys) {
-  const managedKeySet = new Set(orderedKeys);
-  const managedSlots = columns.map(
-    (column, index) => managedKeySet.has(resolveColumnKey(column)) ? index : -1
-  ).filter((index) => index >= 0);
-  const columnByKey = new Map(
-    columns.map((column) => [resolveColumnKey(column), column])
-  );
-  const next = [...columns];
-  orderedKeys.forEach((key, index) => {
-    const slot = managedSlots[index];
-    const column = columnByKey.get(key);
-    if (slot != null && column) {
-      next[slot] = column;
-    }
-  });
-  return next;
-}
-function resolveColumnKey(column) {
-  return String(column.key ?? column.dataIndex);
-}
 var ReactListTable = forwardRef(
   ReactListTableInner
 );
@@ -5621,6 +6198,6 @@ ReactListTable.EXPAND_COLUMN = EXPAND_COLUMN;
 ReactListTable.SELECTION_COLUMN = SELECTION_COLUMN;
 ReactListTable.ROW_SELECTION_COLUMN = ROW_SELECTION_COLUMN;
 
-export { ReactListTable, ReactListTableDebugProvider };
+export { ReactListTable, ReactListTableDebugProvider, ReactListTableExportNameDialog };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map