@canvas-components/react-list-table 0.2.1 → 0.2.3

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef } from 'react';
-import { ListTableOptions, ListTableQueryChange, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
+import { ListTableOptions, ListTableQueryChange, ListTableExportXlsxOptions, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
 
 interface ReactListTableScrollConfig {
     x?: number | string | true;
@@ -30,8 +30,14 @@ interface ReactListTableToolbarOptions {
     showColumnSetting?: boolean;
     /** 列设置弹层宽度，数字值按像素处理。 */
     columnSettingWidth?: number | string;
+    /** 列设置标题栏中位于重置按钮前的扩展内容。 */
+    columnSettingHeaderExtra?: ReactNode;
     showExport?: boolean;
+    /** 默认导出行为使用的文件名和汇总行配置。 */
+    exportOptions?: ListTableExportXlsxOptions;
     onRefresh?: () => void;
+    /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
+    onDensityChange?: (density: 32 | 40 | 48) => void;
     /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
     onExport?: () => void;
     /** 自定义全屏节点，默认使用表格根容器。 */
@@ -43,7 +49,7 @@ interface ReactListTableToolbarOptions {
  */
 interface ReactListTableRef<RecordType = Record<string, unknown>> {
     validate: () => Promise<RecordType[]>;
-    exportXlsx: () => void;
+    exportXlsx: (options?: ListTableExportXlsxOptions) => void;
     scrollTo: (options: ListTableScrollToOptions) => void;
     getDebugSnapshot: () => ReturnType<ListTable<RecordType>["getDebugSnapshot"]>;
     resetSorter: () => void;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef } from 'react';
-import { ListTableOptions, ListTableQueryChange, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
+import { ListTableOptions, ListTableQueryChange, ListTableExportXlsxOptions, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
 
 interface ReactListTableScrollConfig {
     x?: number | string | true;
@@ -30,8 +30,14 @@ interface ReactListTableToolbarOptions {
     showColumnSetting?: boolean;
     /** 列设置弹层宽度，数字值按像素处理。 */
     columnSettingWidth?: number | string;
+    /** 列设置标题栏中位于重置按钮前的扩展内容。 */
+    columnSettingHeaderExtra?: ReactNode;
     showExport?: boolean;
+    /** 默认导出行为使用的文件名和汇总行配置。 */
+    exportOptions?: ListTableExportXlsxOptions;
     onRefresh?: () => void;
+    /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
+    onDensityChange?: (density: 32 | 40 | 48) => void;
     /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
     onExport?: () => void;
     /** 自定义全屏节点，默认使用表格根容器。 */
@@ -43,7 +49,7 @@ interface ReactListTableToolbarOptions {
  */
 interface ReactListTableRef<RecordType = Record<string, unknown>> {
     validate: () => Promise<RecordType[]>;
-    exportXlsx: () => void;
+    exportXlsx: (options?: ListTableExportXlsxOptions) => void;
     scrollTo: (options: ListTableScrollToOptions) => void;
     getDebugSnapshot: () => ReturnType<ListTable<RecordType>["getDebugSnapshot"]>;
     resetSorter: () => void;

package/dist/index.js

@@ -162,6 +162,8 @@ function ReactTableContextMenuView(props) {
           }
         ),
         /* @__PURE__ */ jsx(SummaryMenu, { request }),
+        /* @__PURE__ */ jsx(AlignmentMenu, { request }),
+        /* @__PURE__ */ jsx(DataFormatMenu, { request }),
         /* @__PURE__ */ jsx(
           MenuSubmenu,
           {
@@ -215,13 +217,7 @@ function ReactTableContextMenuView(props) {
             onChange: request.onChangeDensity
           }
         ),
-        /* @__PURE__ */ jsx(
-          ZoomMenu,
-          {
-            value: request.zoom ?? 1,
-            onChange: request.onChangeZoom
-          }
-        ),
+        /* @__PURE__ */ jsx(ZoomMenu, { value: request.zoom ?? 1, onChange: request.onChangeZoom }),
         request.columns?.length && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(MenuDivider, {}),
           /* @__PURE__ */ jsx(
@@ -522,11 +518,11 @@ function ZoomMenu(props) {
             anchorRef: triggerRef,
             placement: "rightTop",
             offset: 2,
-            minWidth: 220,
+            minWidth: 280,
             onOpenChange: setOpen,
             surfaceStyle: {
               ...CONTEXT_MENU_SURFACE_STYLE,
-              width: 220
+              width: 280
             },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -555,45 +551,58 @@ function ZoomMenu(props) {
                       children: "\u8868\u683C\u7F29\u653E\uFF0850% - 200%\uFF09"
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { style: { padding: "0 8px 4px" }, children: /* @__PURE__ */ jsx(
-                    ReactInputNumber,
-                    {
-                      value: percent,
-                      min: CONTEXT_MENU_ZOOM_MIN,
-                      max: CONTEXT_MENU_ZOOM_MAX,
-                      step: CONTEXT_MENU_ZOOM_STEP,
-                      precision: 0,
-                      addonAfter: "%",
-                      onChange: (next) => {
-                        if (next == null || !Number.isFinite(next)) {
-                          return;
-                        }
-                        onChange(Math.round(next) / 100);
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    "button",
+                  /* @__PURE__ */ jsxs(
+                    "div",
                     {
-                      type: "button",
-                      disabled: percent === 100,
-                      onClick: () => {
-                        onChange(1);
-                      },
-                      className: "react-list-table-menu-action",
                       style: {
-                        display: "block",
-                        width: "100%",
-                        height: 32,
-                        padding: "0 8px",
-                        border: "none",
-                        borderRadius: 8,
-                        background: "transparent",
-                        color: percent === 100 ? "#9ca3af" : "#374151",
-                        textAlign: "left",
-                        cursor: percent === 100 ? "not-allowed" : "pointer"
+                        display: "flex",
+                        alignItems: "stretch",
+                        gap: 6,
+                        padding: "0 8px 4px"
                       },
-                      children: "\u91CD\u7F6E\u7F29\u653E"
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ReactInputNumber,
+                          {
+                            value: percent,
+                            min: CONTEXT_MENU_ZOOM_MIN,
+                            max: CONTEXT_MENU_ZOOM_MAX,
+                            step: CONTEXT_MENU_ZOOM_STEP,
+                            precision: 0,
+                            addonAfter: "%",
+                            style: { flex: "1 1 auto", minWidth: 0 },
+                            onChange: (next) => {
+                              if (next == null || !Number.isFinite(next)) {
+                                return;
+                              }
+                              onChange(Math.round(next) / 100);
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: percent === 100,
+                            onClick: () => {
+                              onChange(1);
+                            },
+                            className: "react-list-table-menu-action",
+                            style: {
+                              flex: "0 0 52px",
+                              height: 32,
+                              padding: 0,
+                              border: "1px solid #d1d5db",
+                              borderRadius: 6,
+                              background: "#ffffff",
+                              color: percent === 100 ? "#9ca3af" : "#374151",
+                              textAlign: "center",
+                              cursor: percent === 100 ? "not-allowed" : "pointer"
+                            },
+                            children: "\u91CD\u7F6E"
+                          }
+                        )
+                      ]
                     }
                   )
                 ]
@@ -1059,6 +1068,129 @@ function SummaryMenu(props) {
     }
   );
 }
+function AlignmentMenu(props) {
+  const { request } = props;
+  if (!request.alignment || !request.onChangeAlignment) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u5BF9\u9F50\u65B9\u5F0F",
+      items: [],
+      footer: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 10, padding: "4px 8px" }, children: [
+        /* @__PURE__ */ jsx(
+          AlignmentGroup,
+          {
+            label: "\u8868\u5934",
+            horizontal: request.alignment.headerHorizontal,
+            vertical: request.alignment.headerVertical,
+            onHorizontalChange: (value) => request.onChangeAlignment?.("header", "horizontal", value),
+            onVerticalChange: (value) => request.onChangeAlignment?.("header", "vertical", value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AlignmentGroup,
+          {
+            label: "\u8868\u4F53",
+            horizontal: request.alignment.bodyHorizontal,
+            vertical: request.alignment.bodyVertical,
+            onHorizontalChange: (value) => request.onChangeAlignment?.("body", "horizontal", value),
+            onVerticalChange: (value) => request.onChangeAlignment?.("body", "vertical", value)
+          }
+        )
+      ] })
+    }
+  );
+}
+function AlignmentGroup(props) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ jsx("strong", { style: { color: "#374151", fontSize: 13 }, children: props.label }),
+    /* @__PURE__ */ jsx(
+      AlignmentSegment,
+      {
+        label: "\u6C34\u5E73",
+        value: props.horizontal,
+        options: [
+          { label: "\u5DE6", value: "left" },
+          { label: "\u4E2D", value: "center" },
+          { label: "\u53F3", value: "right" }
+        ],
+        onChange: props.onHorizontalChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AlignmentSegment,
+      {
+        label: "\u5782\u76F4",
+        value: props.vertical,
+        options: [
+          { label: "\u4E0A", value: "top" },
+          { label: "\u4E2D", value: "middle" },
+          { label: "\u4E0B", value: "bottom" }
+        ],
+        onChange: props.onVerticalChange
+      }
+    )
+  ] });
+}
+function AlignmentSegment(props) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "40px repeat(3, 1fr)",
+        gap: 4,
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 12 }, children: props.label }),
+        props.options.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "react-list-table-menu-action",
+            style: {
+              height: 28,
+              border: "1px solid #d1d5db",
+              borderRadius: 4,
+              background: props.value === option.value ? "#e8f3ff" : "#ffffff",
+              color: props.value === option.value ? "#1677ff" : "#374151",
+              cursor: "pointer"
+            },
+            onClick: () => props.onChange(option.value),
+            children: option.label
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+}
+function DataFormatMenu(props) {
+  const { request } = props;
+  if (!request.onChangeDataFormat) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u6570\u636E\u683C\u5F0F",
+      items: [
+        { key: "default", label: "\u9ED8\u8BA4", value: "default" },
+        { key: "number", label: "\u666E\u901A\u6570\u5B57", value: "number" },
+        { key: "thousands", label: "\u5343\u4F4D\u5206\u9694", value: "thousands" },
+        { key: "money", label: "\u91D1\u989D\uFF08\u4E24\u4F4D\u5C0F\u6570\uFF09", value: "money" }
+      ].map((item) => ({
+        key: `data-format-${item.key}`,
+        label: item.label,
+        selected: request.dataFormat === item.value,
+        onClick: () => request.onChangeDataFormat?.(item.value)
+      }))
+    }
+  );
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -2299,7 +2431,15 @@ function ReactTableToolbar(props) {
           children: isFullscreen ? /* @__PURE__ */ jsx(FullscreenExitOutlined, {}) : /* @__PURE__ */ jsx(FullscreenOutlined, {})
         }
       ) : null,
-      config.showRefresh !== false ? /* @__PURE__ */ jsx(ToolButton, { label: "\u5237\u65B0", iconSize: 14, onClick: () => config.onRefresh?.(), children: /* @__PURE__ */ jsx(ReloadOutlined, {}) }) : null,
+      config.showRefresh !== false ? /* @__PURE__ */ jsx(
+        ToolButton,
+        {
+          label: "\u5237\u65B0",
+          iconSize: 14,
+          onClick: () => config.onRefresh?.(),
+          children: /* @__PURE__ */ jsx(ReloadOutlined, {})
+        }
+      ) : null,
       config.showExport ? /* @__PURE__ */ jsx(
         ToolButton,
         {
@@ -2309,14 +2449,21 @@ function ReactTableToolbar(props) {
             if (config.onExport) {
               config.onExport();
             } else {
-              props.onExport();
+              props.onExport(config.exportOptions);
             }
           },
           children: /* @__PURE__ */ jsx(ExportOutlined, {})
         }
       ) : null,
       config.showDensity !== false ? /* @__PURE__ */ jsxs("div", { className: "react-list-table-tool-wrap", children: [
-        /* @__PURE__ */ jsx(ToolButton, { label: "\u8868\u683C\u5BC6\u5EA6", onClick: () => setDensityOpen((v) => !v), children: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}) }),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            label: "\u8868\u683C\u5BC6\u5EA6",
+            onClick: () => setDensityOpen((v) => !v),
+            children: /* @__PURE__ */ jsx(ColumnHeightOutlined, {})
+          }
+        ),
         densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [48, 40, 32].map((height) => /* @__PURE__ */ jsx(
           "button",
           {
@@ -2332,7 +2479,14 @@ function ReactTableToolbar(props) {
         )) }) : null
       ] }) : null,
       config.showColumnSetting !== false ? /* @__PURE__ */ jsxs("div", { className: "react-list-table-tool-wrap", children: [
-        /* @__PURE__ */ jsx(ToolButton, { label: "\u5217\u8BBE\u7F6E", onClick: () => setSettingOpen((v) => !v), children: /* @__PURE__ */ jsx(SettingOutlined, {}) }),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            label: "\u5217\u8BBE\u7F6E",
+            onClick: () => setSettingOpen((v) => !v),
+            children: /* @__PURE__ */ jsx(SettingOutlined, {})
+          }
+        ),
         settingOpen ? /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2341,6 +2495,7 @@ function ReactTableToolbar(props) {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-setting-head", children: [
                 /* @__PURE__ */ jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
+                /* @__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", children: /* @__PURE__ */ jsx(
@@ -2372,6 +2527,7 @@ function ReactTableToolbar(props) {
                             {
                               type: "checkbox",
                               checked: !column.hidden,
+                              disabled: column.disableHide,
                               onChange: (event) => props.onColumnVisibilityChange(
                                 column.key,
                                 event.target.checked
@@ -2395,7 +2551,10 @@ function ReactTableToolbar(props) {
                           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);
+                              props.onColumnWidthChange(
+                                column.key,
+                                width
+                              );
                             }
                           }
                         }
@@ -2434,12 +2593,26 @@ function ReactTableToolbar(props) {
   ] });
 }
 function ToolButton(props) {
-  return /* @__PURE__ */ jsx("button", { type: "button", className: "react-list-table-tool", style: { fontSize: props.iconSize ?? 16 }, title: props.label, "aria-label": props.label, onClick: props.onClick, children: props.children });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "react-list-table-tool",
+      style: { fontSize: props.iconSize ?? 16 },
+      title: props.label,
+      "aria-label": props.label,
+      onClick: props.onClick,
+      children: props.children
+    }
+  );
 }
 function flattenColumns(columns, parentKey = "root", level = 0) {
   return columns.flatMap((column) => {
+    if (column.hideInSetting) {
+      return [];
+    }
     const key = String(column.key ?? column.dataIndex);
-    const label = typeof column.title === "string" ? column.title : key;
+    const label = column.settingTitle ?? (typeof column.title === "string" ? column.title : key);
     const current = {
       key,
       label,
@@ -2450,7 +2623,8 @@ function flattenColumns(columns, parentKey = "root", level = 0) {
       maxWidth: typeof column.maxWidth === "number" ? column.maxWidth : void 0,
       fixed: column.fixed,
       level,
-      isGroup: Boolean(column.children?.length)
+      isGroup: Boolean(column.children?.length),
+      disableHide: column.disableHide === true
     };
     return column.children?.length ? [current, ...flattenColumns(column.children, key, level + 1)] : [current];
   });
@@ -2596,6 +2770,7 @@ function ReactListTableInner(props, ref) {
     rowKey,
     columns,
     dataSource,
+    onRow,
     theme,
     striped,
     highlightMode,
@@ -2650,6 +2825,7 @@ function ReactListTableInner(props, ref) {
       rowKey,
       columns: resolvedColumns,
       dataSource,
+      onRow,
       theme,
       striped,
       highlightMode,
@@ -2682,6 +2858,7 @@ function ReactListTableInner(props, ref) {
       rowKey,
       resolvedColumns,
       dataSource,
+      onRow,
       theme,
       striped,
       highlightMode,
@@ -2724,8 +2901,8 @@ function ReactListTableInner(props, ref) {
     ref,
     () => ({
       validate: () => tableRef.current?.validate() ?? Promise.resolve([]),
-      exportXlsx: () => {
-        tableRef.current?.exportXlsx();
+      exportXlsx: (options2) => {
+        tableRef.current?.exportXlsx(options2);
       },
       scrollTo: (options2) => {
         tableRef.current?.scrollTo(options2);
@@ -2762,8 +2939,13 @@ function ReactListTableInner(props, ref) {
               columns: resolvedColumns,
               density: resolvedRowHeight === "auto" ? 40 : resolvedRowHeight ?? 40,
               hostRef: shellRef,
-              onExport: () => tableRef.current?.exportXlsx(),
-              onDensityChange: setDensityOverride,
+              onExport: (options2) => tableRef.current?.exportXlsx(options2),
+              onDensityChange: (density) => {
+                setDensityOverride(density);
+                if (toolbar) {
+                  toolbar.onDensityChange?.(density);
+                }
+              },
               onColumnVisibilityChange: (columnKey, visible) => {
                 setColumnVisibility((current) => {
                   const next = new Map(current);
@@ -2880,15 +3062,13 @@ function ReactListTableInner(props, ref) {
 }
 function applyColumnManagerState(columns, visibility, orders, config, parentKey = "root") {
   const order = orders.get(parentKey);
-  const sortedColumns = order ? [...columns].sort(
-    (left, right) => order.indexOf(resolveColumnKey(left)) - order.indexOf(resolveColumnKey(right))
-  ) : columns;
+  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,
+      hidden: visibility.has(key) ? visibility.get(key) === false : column.hidden ?? column.initialHide,
       width: managedConfig?.width ?? column.width,
       minWidth: column.minWidth,
       maxWidth: column.maxWidth,
@@ -2903,6 +3083,24 @@ function applyColumnManagerState(columns, visibility, orders, config, parentKey
     };
   });
 }
+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);
 }