resizable-pro-table 1.0.0

package/README.md

@@ -0,0 +1,54 @@
+# resizable-pro-table
+
+基于 [Ant Design ProComponents ProTable](https://procomponents.ant.design/components/table) 的可拖拽调整列宽表格组件。
+
+## 依赖
+
+- React 17+
+- antd 5+
+- @ant-design/pro-components 2+
+
+## 安装
+
+```bash
+npm install resizable-pro-table
+# 或
+yarn add resizable-pro-table
+# 或
+pnpm add resizable-pro-table
+```
+
+## 使用
+
+```tsx
+import ResizableProTable from 'resizable-pro-table';
+import 'resizable-pro-table/dist/style.css';
+
+<ResizableProTable<YourDataType>
+  columns={columns}
+  request={async () => ({ data: [], success: true })}
+  columnWidthPersistenceKey="my-table-columns"
+  minColumnWidth={60}
+  defaultColumnWidth={120}
+/>
+```
+
+### Props（在 ProTable 基础上新增）
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| columnWidthPersistenceKey | 用于在 localStorage 持久化列宽的 key，不传则不持久化 | string | - |
+| minColumnWidth | 列最小宽度（px） | number | 60 |
+| defaultColumnWidth | 未设置 width 的列使用的默认宽度（px），用于显示拖拽把手 | number | 120 |
+
+## 开发与构建
+
+```bash
+cd resizable-pro-table
+npm install
+npm run build
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ProTableProps } from '@ant-design/pro-components';
+
+interface ResizableProTableProps<T extends Record<string, any>> extends Omit<ProTableProps<T, any>, 'components'> {
+    /** localStorage key for persisting column widths across page refreshes */
+    columnWidthPersistenceKey?: string;
+    /** Minimum column width in pixels (default: 60) */
+    minColumnWidth?: number;
+    /** Default width for columns without width (default: 120), used for drag handle */
+    defaultColumnWidth?: number;
+}
+declare function ResizableProTable<T extends Record<string, any>>(props: ResizableProTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ResizableProTableProps, ResizableProTable as default };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ProTableProps } from '@ant-design/pro-components';
+
+interface ResizableProTableProps<T extends Record<string, any>> extends Omit<ProTableProps<T, any>, 'components'> {
+    /** localStorage key for persisting column widths across page refreshes */
+    columnWidthPersistenceKey?: string;
+    /** Minimum column width in pixels (default: 60) */
+    minColumnWidth?: number;
+    /** Default width for columns without width (default: 120), used for drag handle */
+    defaultColumnWidth?: number;
+}
+declare function ResizableProTable<T extends Record<string, any>>(props: ResizableProTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ResizableProTableProps, ResizableProTable as default };

package/dist/index.js

@@ -0,0 +1,228 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => ResizableProTable_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ResizableProTable.tsx
+var import_pro_components = require("@ant-design/pro-components");
+
+// src/useResizableColumns.ts
+var import_react2 = require("react");
+
+// src/ResizableTitle.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function findCorrespondingCols(th) {
+  const cellIndex = th.cellIndex;
+  const wrapper = th.closest(".ant-table-wrapper");
+  if (!wrapper) {
+    const table = th.closest("table");
+    if (!table) return [];
+    const col = table.querySelectorAll("colgroup > col")[cellIndex];
+    return col ? [col] : [];
+  }
+  const cols = [];
+  wrapper.querySelectorAll("colgroup").forEach((cg) => {
+    const col = cg.children[cellIndex];
+    if (col) cols.push(col);
+  });
+  return cols;
+}
+var ResizableTitle = ({
+  onResizeEnd,
+  width,
+  minWidth = 60,
+  children,
+  ...restProps
+}) => {
+  const thRef = (0, import_react.useRef)(null);
+  const widthRef = (0, import_react.useRef)(0);
+  const handleMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const th = thRef.current;
+      if (!th) return;
+      const startX = e.clientX;
+      const startWidth = th.getBoundingClientRect().width;
+      const cols = findCorrespondingCols(th);
+      widthRef.current = startWidth;
+      const onMouseMove = (ev) => {
+        const newWidth = Math.max(minWidth, startWidth + (ev.clientX - startX));
+        th.style.width = `${newWidth}px`;
+        cols.forEach((col) => {
+          col.style.width = `${newWidth}px`;
+          col.style.minWidth = `${newWidth}px`;
+        });
+        widthRef.current = newWidth;
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        document.body.classList.remove("resizing-active");
+        onResizeEnd?.(widthRef.current);
+        const suppressClick = (ev) => {
+          ev.stopPropagation();
+          ev.preventDefault();
+        };
+        document.addEventListener("click", suppressClick, true);
+        requestAnimationFrame(() => {
+          document.removeEventListener("click", suppressClick, true);
+        });
+      };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+      document.body.classList.add("resizing-active");
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [minWidth, onResizeEnd]
+  );
+  if (!width || !onResizeEnd) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { ...restProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "th",
+    {
+      ref: thRef,
+      ...restProps,
+      style: { position: "relative", ...restProps.style },
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "resizable-handle",
+            style: {
+              position: "absolute",
+              right: -6,
+              top: 0,
+              bottom: 0,
+              width: 12,
+              cursor: "col-resize",
+              zIndex: 10
+            },
+            onMouseDown: handleMouseDown,
+            onClick: (e) => e.stopPropagation()
+          }
+        )
+      ]
+    }
+  );
+};
+var ResizableTitle_default = ResizableTitle;
+
+// src/useResizableColumns.ts
+function getColumnKey(col) {
+  if (col.dataIndex !== void 0) {
+    return [].concat(col.dataIndex).join(".");
+  }
+  if (col.key !== void 0) {
+    return String(col.key);
+  }
+  if (typeof col.title === "string") {
+    return col.title;
+  }
+  return void 0;
+}
+function safeReadStorage(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function safeWriteStorage(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function useResizableColumns(columns, options) {
+  const { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth = 120 } = options ?? {};
+  const [columnWidths, setColumnWidths] = (0, import_react2.useState)(
+    () => columnWidthPersistenceKey ? safeReadStorage(columnWidthPersistenceKey) : {}
+  );
+  const mergedColumns = (0, import_react2.useMemo)(
+    () => columns.map((col) => {
+      const colKey = getColumnKey(col);
+      const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ?? defaultColumnWidth : col.width;
+      if (colKey === void 0) {
+        return col;
+      }
+      return {
+        ...col,
+        width: effectiveWidth,
+        onHeaderCell: () => ({
+          width: effectiveWidth,
+          minWidth: minColumnWidth,
+          style: { width: effectiveWidth, minWidth: minColumnWidth ?? 60 },
+          onResizeEnd: (finalWidth) => {
+            setColumnWidths((prev) => {
+              const next = { ...prev, [colKey]: finalWidth };
+              if (columnWidthPersistenceKey) {
+                safeWriteStorage(columnWidthPersistenceKey, next);
+              }
+              return next;
+            });
+          }
+        })
+      };
+    }),
+    [columns, columnWidths, minColumnWidth, columnWidthPersistenceKey, defaultColumnWidth]
+  );
+  const components = (0, import_react2.useMemo)(
+    () => ({
+      header: {
+        cell: ResizableTitle_default
+      }
+    }),
+    []
+  );
+  return { mergedColumns, components };
+}
+var useResizableColumns_default = useResizableColumns;
+
+// src/ResizableProTable.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ResizableProTable(props) {
+  const { columns = [], columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth, ...rest } = props;
+  const { mergedColumns, components } = useResizableColumns_default(
+    columns,
+    { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_pro_components.ProTable,
+    {
+      ...rest,
+      columns: mergedColumns,
+      components
+    }
+  );
+}
+var ResizableProTable_default = ResizableProTable;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx"],"sourcesContent":["export { default } from './ResizableProTable';\nexport type { ResizableProTableProps } from './ResizableProTable';\n","import React from 'react';\nimport { ProTable } from '@ant-design/pro-components';\nimport type { ProTableProps, ProColumns } from '@ant-design/pro-components';\nimport useResizableColumns from './useResizableColumns';\n\nexport interface ResizableProTableProps<T extends Record<string, any>>\n  extends Omit<ProTableProps<T, any>, 'components'> {\n  /** localStorage key for persisting column widths across page refreshes */\n  columnWidthPersistenceKey?: string;\n  /** Minimum column width in pixels (default: 60) */\n  minColumnWidth?: number;\n  /** Default width for columns without width (default: 120), used for drag handle */\n  defaultColumnWidth?: number;\n}\n\nfunction ResizableProTable<T extends Record<string, any>>(\n  props: ResizableProTableProps<T>,\n) {\n  const { columns = [], columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth, ...rest } = props;\n\n  const { mergedColumns, components } = useResizableColumns<T>(\n    columns as ProColumns<T>[],\n    { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth },\n  );\n\n  return (\n    <ProTable<T>\n      {...rest}\n      columns={mergedColumns}\n      components={components}\n    />\n  );\n}\n\nexport default ResizableProTable;\n","import { useMemo, useState } from 'react';\nimport type { ProColumns } from '@ant-design/pro-components';\nimport ResizableTitle from './ResizableTitle';\nimport type { ColumnWidthMap } from './types';\n\ninterface UseResizableColumnsOptions {\n  columnWidthPersistenceKey?: string;\n  minColumnWidth?: number;\n  defaultColumnWidth?: number;\n}\n\nfunction getColumnKey<T>(col: ProColumns<T>): string | undefined {\n  if (col.dataIndex !== undefined) {\n    return ([] as string[]).concat(col.dataIndex as string | string[]).join('.');\n  }\n  if (col.key !== undefined) {\n    return String(col.key);\n  }\n  if (typeof col.title === 'string') {\n    return col.title;\n  }\n  return undefined;\n}\n\nfunction safeReadStorage(key: string): ColumnWidthMap {\n  try {\n    const raw = localStorage.getItem(key);\n    return raw ? (JSON.parse(raw) as ColumnWidthMap) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction safeWriteStorage(key: string, value: ColumnWidthMap): void {\n  try {\n    localStorage.setItem(key, JSON.stringify(value));\n  } catch {\n    // quota exceeded or private mode\n  }\n}\n\nfunction useResizableColumns<T>(\n  columns: ProColumns<T>[],\n  options?: UseResizableColumnsOptions,\n) {\n  const { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth = 120 } = options ?? {};\n\n  const [columnWidths, setColumnWidths] = useState<ColumnWidthMap>(() =>\n    columnWidthPersistenceKey ? safeReadStorage(columnWidthPersistenceKey) : {},\n  );\n\n  const mergedColumns = useMemo<ProColumns<T>[]>(\n    () =>\n      columns.map((col) => {\n        const colKey = getColumnKey(col);\n        const effectiveWidth =\n          colKey !== undefined\n            ? (columnWidths[colKey] ?? (col.width as number | undefined) ?? defaultColumnWidth)\n            : (col.width as number | undefined);\n\n        if (colKey === undefined) {\n          return col;\n        }\n\n        return {\n          ...col,\n          width: effectiveWidth,\n          onHeaderCell: () => ({\n            width: effectiveWidth,\n            minWidth: minColumnWidth,\n            style: { width: effectiveWidth, minWidth: minColumnWidth ?? 60 },\n            onResizeEnd: (finalWidth: number) => {\n              setColumnWidths((prev) => {\n                const next = { ...prev, [colKey]: finalWidth };\n                if (columnWidthPersistenceKey) {\n                  safeWriteStorage(columnWidthPersistenceKey, next);\n                }\n                return next;\n              });\n            },\n          }),\n        };\n      }),\n    [columns, columnWidths, minColumnWidth, columnWidthPersistenceKey, defaultColumnWidth],\n  );\n\n  const components = useMemo(\n    () => ({\n      header: {\n        cell: ResizableTitle,\n      },\n    }),\n    [],\n  );\n\n  return { mergedColumns, components };\n}\n\nexport default useResizableColumns;\n","import React, { useCallback, useRef } from 'react';\nimport type { ResizableTitleProps } from './types';\n\n/**\n * Find all <col> elements corresponding to the given <th> by matching cellIndex\n * across all <colgroup>s within the same .ant-table-wrapper.\n * Ant Design may split header and body into separate <table> elements when\n * scroll is enabled, each with its own <colgroup>.\n */\nfunction findCorrespondingCols(th: HTMLTableCellElement): HTMLElement[] {\n  const cellIndex = th.cellIndex;\n  const wrapper = th.closest('.ant-table-wrapper');\n  if (!wrapper) {\n    const table = th.closest('table');\n    if (!table) return [];\n    const col = table.querySelectorAll('colgroup > col')[cellIndex];\n    return col ? [col as HTMLElement] : [];\n  }\n  const cols: HTMLElement[] = [];\n  wrapper.querySelectorAll('colgroup').forEach((cg) => {\n    const col = cg.children[cellIndex] as HTMLElement | undefined;\n    if (col) cols.push(col);\n  });\n  return cols;\n}\n\nconst ResizableTitle: React.FC<ResizableTitleProps> = ({\n  onResizeEnd,\n  width,\n  minWidth = 60,\n  children,\n  ...restProps\n}) => {\n  const thRef = useRef<HTMLTableCellElement>(null);\n  const widthRef = useRef<number>(0);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const th = thRef.current;\n      if (!th) return;\n\n      const startX = e.clientX;\n      const startWidth = th.getBoundingClientRect().width;\n      const cols = findCorrespondingCols(th);\n\n      widthRef.current = startWidth;\n\n      const onMouseMove = (ev: MouseEvent) => {\n        const newWidth = Math.max(minWidth, startWidth + (ev.clientX - startX));\n        th.style.width = `${newWidth}px`;\n        cols.forEach((col) => {\n          col.style.width = `${newWidth}px`;\n          col.style.minWidth = `${newWidth}px`;\n        });\n        widthRef.current = newWidth;\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.userSelect = '';\n        document.body.style.cursor = '';\n        document.body.classList.remove('resizing-active');\n        onResizeEnd?.(widthRef.current);\n\n        const suppressClick = (ev: MouseEvent) => {\n          ev.stopPropagation();\n          ev.preventDefault();\n        };\n        document.addEventListener('click', suppressClick, true);\n        requestAnimationFrame(() => {\n          document.removeEventListener('click', suppressClick, true);\n        });\n      };\n\n      document.body.style.userSelect = 'none';\n      document.body.style.cursor = 'col-resize';\n      document.body.classList.add('resizing-active');\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n    },\n    [minWidth, onResizeEnd],\n  );\n\n  if (!width || !onResizeEnd) {\n    return <th {...restProps}>{children}</th>;\n  }\n\n  return (\n    <th\n      ref={thRef}\n      {...restProps}\n      style={{ position: 'relative', ...restProps.style }}\n    >\n      {children}\n      <span\n        className=\"resizable-handle\"\n        style={{\n          position: 'absolute',\n          right: -6,\n          top: 0,\n          bottom: 0,\n          width: 12,\n          cursor: 'col-resize',\n          zIndex: 10,\n        }}\n        onMouseDown={handleMouseDown}\n        onClick={(e) => e.stopPropagation()}\n      />\n    </th>\n  );\n};\n\nexport default ResizableTitle;\n"],"mappings":"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","names":["import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,205 @@
+// src/ResizableProTable.tsx
+import { ProTable } from "@ant-design/pro-components";
+
+// src/useResizableColumns.ts
+import { useMemo, useState } from "react";
+
+// src/ResizableTitle.tsx
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function findCorrespondingCols(th) {
+  const cellIndex = th.cellIndex;
+  const wrapper = th.closest(".ant-table-wrapper");
+  if (!wrapper) {
+    const table = th.closest("table");
+    if (!table) return [];
+    const col = table.querySelectorAll("colgroup > col")[cellIndex];
+    return col ? [col] : [];
+  }
+  const cols = [];
+  wrapper.querySelectorAll("colgroup").forEach((cg) => {
+    const col = cg.children[cellIndex];
+    if (col) cols.push(col);
+  });
+  return cols;
+}
+var ResizableTitle = ({
+  onResizeEnd,
+  width,
+  minWidth = 60,
+  children,
+  ...restProps
+}) => {
+  const thRef = useRef(null);
+  const widthRef = useRef(0);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const th = thRef.current;
+      if (!th) return;
+      const startX = e.clientX;
+      const startWidth = th.getBoundingClientRect().width;
+      const cols = findCorrespondingCols(th);
+      widthRef.current = startWidth;
+      const onMouseMove = (ev) => {
+        const newWidth = Math.max(minWidth, startWidth + (ev.clientX - startX));
+        th.style.width = `${newWidth}px`;
+        cols.forEach((col) => {
+          col.style.width = `${newWidth}px`;
+          col.style.minWidth = `${newWidth}px`;
+        });
+        widthRef.current = newWidth;
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        document.body.classList.remove("resizing-active");
+        onResizeEnd?.(widthRef.current);
+        const suppressClick = (ev) => {
+          ev.stopPropagation();
+          ev.preventDefault();
+        };
+        document.addEventListener("click", suppressClick, true);
+        requestAnimationFrame(() => {
+          document.removeEventListener("click", suppressClick, true);
+        });
+      };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+      document.body.classList.add("resizing-active");
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [minWidth, onResizeEnd]
+  );
+  if (!width || !onResizeEnd) {
+    return /* @__PURE__ */ jsx("th", { ...restProps, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ref: thRef,
+      ...restProps,
+      style: { position: "relative", ...restProps.style },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "resizable-handle",
+            style: {
+              position: "absolute",
+              right: -6,
+              top: 0,
+              bottom: 0,
+              width: 12,
+              cursor: "col-resize",
+              zIndex: 10
+            },
+            onMouseDown: handleMouseDown,
+            onClick: (e) => e.stopPropagation()
+          }
+        )
+      ]
+    }
+  );
+};
+var ResizableTitle_default = ResizableTitle;
+
+// src/useResizableColumns.ts
+function getColumnKey(col) {
+  if (col.dataIndex !== void 0) {
+    return [].concat(col.dataIndex).join(".");
+  }
+  if (col.key !== void 0) {
+    return String(col.key);
+  }
+  if (typeof col.title === "string") {
+    return col.title;
+  }
+  return void 0;
+}
+function safeReadStorage(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function safeWriteStorage(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function useResizableColumns(columns, options) {
+  const { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth = 120 } = options ?? {};
+  const [columnWidths, setColumnWidths] = useState(
+    () => columnWidthPersistenceKey ? safeReadStorage(columnWidthPersistenceKey) : {}
+  );
+  const mergedColumns = useMemo(
+    () => columns.map((col) => {
+      const colKey = getColumnKey(col);
+      const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ?? defaultColumnWidth : col.width;
+      if (colKey === void 0) {
+        return col;
+      }
+      return {
+        ...col,
+        width: effectiveWidth,
+        onHeaderCell: () => ({
+          width: effectiveWidth,
+          minWidth: minColumnWidth,
+          style: { width: effectiveWidth, minWidth: minColumnWidth ?? 60 },
+          onResizeEnd: (finalWidth) => {
+            setColumnWidths((prev) => {
+              const next = { ...prev, [colKey]: finalWidth };
+              if (columnWidthPersistenceKey) {
+                safeWriteStorage(columnWidthPersistenceKey, next);
+              }
+              return next;
+            });
+          }
+        })
+      };
+    }),
+    [columns, columnWidths, minColumnWidth, columnWidthPersistenceKey, defaultColumnWidth]
+  );
+  const components = useMemo(
+    () => ({
+      header: {
+        cell: ResizableTitle_default
+      }
+    }),
+    []
+  );
+  return { mergedColumns, components };
+}
+var useResizableColumns_default = useResizableColumns;
+
+// src/ResizableProTable.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ResizableProTable(props) {
+  const { columns = [], columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth, ...rest } = props;
+  const { mergedColumns, components } = useResizableColumns_default(
+    columns,
+    { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth }
+  );
+  return /* @__PURE__ */ jsx2(
+    ProTable,
+    {
+      ...rest,
+      columns: mergedColumns,
+      components
+    }
+  );
+}
+var ResizableProTable_default = ResizableProTable;
+export {
+  ResizableProTable_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { ProTable } from '@ant-design/pro-components';\nimport type { ProTableProps, ProColumns } from '@ant-design/pro-components';\nimport useResizableColumns from './useResizableColumns';\n\nexport interface ResizableProTableProps<T extends Record<string, any>>\n  extends Omit<ProTableProps<T, any>, 'components'> {\n  /** localStorage key for persisting column widths across page refreshes */\n  columnWidthPersistenceKey?: string;\n  /** Minimum column width in pixels (default: 60) */\n  minColumnWidth?: number;\n  /** Default width for columns without width (default: 120), used for drag handle */\n  defaultColumnWidth?: number;\n}\n\nfunction ResizableProTable<T extends Record<string, any>>(\n  props: ResizableProTableProps<T>,\n) {\n  const { columns = [], columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth, ...rest } = props;\n\n  const { mergedColumns, components } = useResizableColumns<T>(\n    columns as ProColumns<T>[],\n    { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth },\n  );\n\n  return (\n    <ProTable<T>\n      {...rest}\n      columns={mergedColumns}\n      components={components}\n    />\n  );\n}\n\nexport default ResizableProTable;\n","import { useMemo, useState } from 'react';\nimport type { ProColumns } from '@ant-design/pro-components';\nimport ResizableTitle from './ResizableTitle';\nimport type { ColumnWidthMap } from './types';\n\ninterface UseResizableColumnsOptions {\n  columnWidthPersistenceKey?: string;\n  minColumnWidth?: number;\n  defaultColumnWidth?: number;\n}\n\nfunction getColumnKey<T>(col: ProColumns<T>): string | undefined {\n  if (col.dataIndex !== undefined) {\n    return ([] as string[]).concat(col.dataIndex as string | string[]).join('.');\n  }\n  if (col.key !== undefined) {\n    return String(col.key);\n  }\n  if (typeof col.title === 'string') {\n    return col.title;\n  }\n  return undefined;\n}\n\nfunction safeReadStorage(key: string): ColumnWidthMap {\n  try {\n    const raw = localStorage.getItem(key);\n    return raw ? (JSON.parse(raw) as ColumnWidthMap) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction safeWriteStorage(key: string, value: ColumnWidthMap): void {\n  try {\n    localStorage.setItem(key, JSON.stringify(value));\n  } catch {\n    // quota exceeded or private mode\n  }\n}\n\nfunction useResizableColumns<T>(\n  columns: ProColumns<T>[],\n  options?: UseResizableColumnsOptions,\n) {\n  const { columnWidthPersistenceKey, minColumnWidth, defaultColumnWidth = 120 } = options ?? {};\n\n  const [columnWidths, setColumnWidths] = useState<ColumnWidthMap>(() =>\n    columnWidthPersistenceKey ? safeReadStorage(columnWidthPersistenceKey) : {},\n  );\n\n  const mergedColumns = useMemo<ProColumns<T>[]>(\n    () =>\n      columns.map((col) => {\n        const colKey = getColumnKey(col);\n        const effectiveWidth =\n          colKey !== undefined\n            ? (columnWidths[colKey] ?? (col.width as number | undefined) ?? defaultColumnWidth)\n            : (col.width as number | undefined);\n\n        if (colKey === undefined) {\n          return col;\n        }\n\n        return {\n          ...col,\n          width: effectiveWidth,\n          onHeaderCell: () => ({\n            width: effectiveWidth,\n            minWidth: minColumnWidth,\n            style: { width: effectiveWidth, minWidth: minColumnWidth ?? 60 },\n            onResizeEnd: (finalWidth: number) => {\n              setColumnWidths((prev) => {\n                const next = { ...prev, [colKey]: finalWidth };\n                if (columnWidthPersistenceKey) {\n                  safeWriteStorage(columnWidthPersistenceKey, next);\n                }\n                return next;\n              });\n            },\n          }),\n        };\n      }),\n    [columns, columnWidths, minColumnWidth, columnWidthPersistenceKey, defaultColumnWidth],\n  );\n\n  const components = useMemo(\n    () => ({\n      header: {\n        cell: ResizableTitle,\n      },\n    }),\n    [],\n  );\n\n  return { mergedColumns, components };\n}\n\nexport default useResizableColumns;\n","import React, { useCallback, useRef } from 'react';\nimport type { ResizableTitleProps } from './types';\n\n/**\n * Find all <col> elements corresponding to the given <th> by matching cellIndex\n * across all <colgroup>s within the same .ant-table-wrapper.\n * Ant Design may split header and body into separate <table> elements when\n * scroll is enabled, each with its own <colgroup>.\n */\nfunction findCorrespondingCols(th: HTMLTableCellElement): HTMLElement[] {\n  const cellIndex = th.cellIndex;\n  const wrapper = th.closest('.ant-table-wrapper');\n  if (!wrapper) {\n    const table = th.closest('table');\n    if (!table) return [];\n    const col = table.querySelectorAll('colgroup > col')[cellIndex];\n    return col ? [col as HTMLElement] : [];\n  }\n  const cols: HTMLElement[] = [];\n  wrapper.querySelectorAll('colgroup').forEach((cg) => {\n    const col = cg.children[cellIndex] as HTMLElement | undefined;\n    if (col) cols.push(col);\n  });\n  return cols;\n}\n\nconst ResizableTitle: React.FC<ResizableTitleProps> = ({\n  onResizeEnd,\n  width,\n  minWidth = 60,\n  children,\n  ...restProps\n}) => {\n  const thRef = useRef<HTMLTableCellElement>(null);\n  const widthRef = useRef<number>(0);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const th = thRef.current;\n      if (!th) return;\n\n      const startX = e.clientX;\n      const startWidth = th.getBoundingClientRect().width;\n      const cols = findCorrespondingCols(th);\n\n      widthRef.current = startWidth;\n\n      const onMouseMove = (ev: MouseEvent) => {\n        const newWidth = Math.max(minWidth, startWidth + (ev.clientX - startX));\n        th.style.width = `${newWidth}px`;\n        cols.forEach((col) => {\n          col.style.width = `${newWidth}px`;\n          col.style.minWidth = `${newWidth}px`;\n        });\n        widthRef.current = newWidth;\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.userSelect = '';\n        document.body.style.cursor = '';\n        document.body.classList.remove('resizing-active');\n        onResizeEnd?.(widthRef.current);\n\n        const suppressClick = (ev: MouseEvent) => {\n          ev.stopPropagation();\n          ev.preventDefault();\n        };\n        document.addEventListener('click', suppressClick, true);\n        requestAnimationFrame(() => {\n          document.removeEventListener('click', suppressClick, true);\n        });\n      };\n\n      document.body.style.userSelect = 'none';\n      document.body.style.cursor = 'col-resize';\n      document.body.classList.add('resizing-active');\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n    },\n    [minWidth, onResizeEnd],\n  );\n\n  if (!width || !onResizeEnd) {\n    return <th {...restProps}>{children}</th>;\n  }\n\n  return (\n    <th\n      ref={thRef}\n      {...restProps}\n      style={{ position: 'relative', ...restProps.style }}\n    >\n      {children}\n      <span\n        className=\"resizable-handle\"\n        style={{\n          position: 'absolute',\n          right: -6,\n          top: 0,\n          bottom: 0,\n          width: 12,\n          cursor: 'col-resize',\n          zIndex: 10,\n        }}\n        onMouseDown={handleMouseDown}\n        onClick={(e) => e.stopPropagation()}\n      />\n    </th>\n  );\n};\n\nexport default ResizableTitle;\n"],"mappings":";AACA,SAAS,gBAAgB;;;ACDzB,SAAS,SAAS,gBAAgB;;;ACAlC,SAAgB,aAAa,cAAc;AAwFhC,cAIP,YAJO;AA/EX,SAAS,sBAAsB,IAAyC;AACtE,QAAM,YAAY,GAAG;AACrB,QAAM,UAAU,GAAG,QAAQ,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,QAAQ,GAAG,QAAQ,OAAO;AAChC,QAAI,CAAC,MAAO,QAAO,CAAC;AACpB,UAAM,MAAM,MAAM,iBAAiB,gBAAgB,EAAE,SAAS;AAC9D,WAAO,MAAM,CAAC,GAAkB,IAAI,CAAC;AAAA,EACvC;AACA,QAAM,OAAsB,CAAC;AAC7B,UAAQ,iBAAiB,UAAU,EAAE,QAAQ,CAAC,OAAO;AACnD,UAAM,MAAM,GAAG,SAAS,SAAS;AACjC,QAAI,IAAK,MAAK,KAAK,GAAG;AAAA,EACxB,CAAC;AACD,SAAO;AACT;AAEA,IAAM,iBAAgD,CAAC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,OAA6B,IAAI;AAC/C,QAAM,WAAW,OAAe,CAAC;AAEjC,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,YAAM,KAAK,MAAM;AACjB,UAAI,CAAC,GAAI;AAET,YAAM,SAAS,EAAE;AACjB,YAAM,aAAa,GAAG,sBAAsB,EAAE;AAC9C,YAAM,OAAO,sBAAsB,EAAE;AAErC,eAAS,UAAU;AAEnB,YAAM,cAAc,CAAC,OAAmB;AACtC,cAAM,WAAW,KAAK,IAAI,UAAU,cAAc,GAAG,UAAU,OAAO;AACtE,WAAG,MAAM,QAAQ,GAAG,QAAQ;AAC5B,aAAK,QAAQ,CAAC,QAAQ;AACpB,cAAI,MAAM,QAAQ,GAAG,QAAQ;AAC7B,cAAI,MAAM,WAAW,GAAG,QAAQ;AAAA,QAClC,CAAC;AACD,iBAAS,UAAU;AAAA,MACrB;AAEA,YAAM,YAAY,MAAM;AACtB,iBAAS,oBAAoB,aAAa,WAAW;AACrD,iBAAS,oBAAoB,WAAW,SAAS;AACjD,iBAAS,KAAK,MAAM,aAAa;AACjC,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,UAAU,OAAO,iBAAiB;AAChD,sBAAc,SAAS,OAAO;AAE9B,cAAM,gBAAgB,CAAC,OAAmB;AACxC,aAAG,gBAAgB;AACnB,aAAG,eAAe;AAAA,QACpB;AACA,iBAAS,iBAAiB,SAAS,eAAe,IAAI;AACtD,8BAAsB,MAAM;AAC1B,mBAAS,oBAAoB,SAAS,eAAe,IAAI;AAAA,QAC3D,CAAC;AAAA,MACH;AAEA,eAAS,KAAK,MAAM,aAAa;AACjC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,UAAU,IAAI,iBAAiB;AAC7C,eAAS,iBAAiB,aAAa,WAAW;AAClD,eAAS,iBAAiB,WAAW,SAAS;AAAA,IAChD;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,MAAI,CAAC,SAAS,CAAC,aAAa;AAC1B,WAAO,oBAAC,QAAI,GAAG,WAAY,UAAS;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,OAAO,EAAE,UAAU,YAAY,GAAG,UAAU,MAAM;AAAA,MAEjD;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,OAAO;AAAA,cACP,KAAK;AAAA,cACL,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,YACV;AAAA,YACA,aAAa;AAAA,YACb,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA;AAAA,QACpC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;;;ADzGf,SAAS,aAAgB,KAAwC;AAC/D,MAAI,IAAI,cAAc,QAAW;AAC/B,WAAQ,CAAC,EAAe,OAAO,IAAI,SAA8B,EAAE,KAAK,GAAG;AAAA,EAC7E;AACA,MAAI,IAAI,QAAQ,QAAW;AACzB,WAAO,OAAO,IAAI,GAAG;AAAA,EACvB;AACA,MAAI,OAAO,IAAI,UAAU,UAAU;AACjC,WAAO,IAAI;AAAA,EACb;AACA,SAAO;AACT;AAEA,SAAS,gBAAgB,KAA6B;AACpD,MAAI;AACF,UAAM,MAAM,aAAa,QAAQ,GAAG;AACpC,WAAO,MAAO,KAAK,MAAM,GAAG,IAAuB,CAAC;AAAA,EACtD,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,SAAS,iBAAiB,KAAa,OAA6B;AAClE,MAAI;AACF,iBAAa,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD,QAAQ;AAAA,EAER;AACF;AAEA,SAAS,oBACP,SACA,SACA;AACA,QAAM,EAAE,2BAA2B,gBAAgB,qBAAqB,IAAI,IAAI,WAAW,CAAC;AAE5F,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IAAyB,MAC/D,4BAA4B,gBAAgB,yBAAyB,IAAI,CAAC;AAAA,EAC5E;AAEA,QAAM,gBAAgB;AAAA,IACpB,MACE,QAAQ,IAAI,CAAC,QAAQ;AACnB,YAAM,SAAS,aAAa,GAAG;AAC/B,YAAM,iBACJ,WAAW,SACN,aAAa,MAAM,KAAM,IAAI,SAAgC,qBAC7D,IAAI;AAEX,UAAI,WAAW,QAAW;AACxB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,OAAO;AAAA,QACP,cAAc,OAAO;AAAA,UACnB,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAO,EAAE,OAAO,gBAAgB,UAAU,kBAAkB,GAAG;AAAA,UAC/D,aAAa,CAAC,eAAuB;AACnC,4BAAgB,CAAC,SAAS;AACxB,oBAAM,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,GAAG,WAAW;AAC7C,kBAAI,2BAA2B;AAC7B,iCAAiB,2BAA2B,IAAI;AAAA,cAClD;AACA,qBAAO;AAAA,YACT,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,SAAS,cAAc,gBAAgB,2BAA2B,kBAAkB;AAAA,EACvF;AAEA,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,eAAe,WAAW;AACrC;AAEA,IAAO,8BAAQ;;;ADxEX,gBAAAA,YAAA;AAXJ,SAAS,kBACP,OACA;AACA,QAAM,EAAE,UAAU,CAAC,GAAG,2BAA2B,gBAAgB,oBAAoB,GAAG,KAAK,IAAI;AAEjG,QAAM,EAAE,eAAe,WAAW,IAAI;AAAA,IACpC;AAAA,IACA,EAAE,2BAA2B,gBAAgB,mBAAmB;AAAA,EAClE;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,4BAAQ;","names":["jsx"]}

package/dist/style.css

@@ -0,0 +1,36 @@
+/* Make header cells the positioning parent for the handle */
+.ant-table-thead > tr > th {
+  position: relative;
+  overflow: visible !important;
+}
+.ant-table-wrapper .ant-table-thead,
+.ant-table .ant-table-thead {
+  overflow: visible !important;
+}
+/* Custom drag handle */
+.resizable-handle {
+  position: absolute;
+  right: -6px;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  cursor: col-resize;
+  z-index: 10;
+  pointer-events: auto;
+}
+.resizable-handle::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 15%;
+  height: 70%;
+  width: 2px;
+  background: rgba(0, 0, 0, 0.08);
+  transition: background 0.2s;
+}
+.resizable-handle:hover::after {
+  background: #1677ff;
+}
+.resizing-active .resizable-handle::after {
+  background: #1677ff;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "resizable-pro-table",
+  "version": "1.0.0",
+  "description": "ProTable with resizable columns for Ant Design",
+  "author": "yinzhimin",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup && lessc src/ResizableProTable.less dist/style.css",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "antd": ">=5.0.0",
+    "@ant-design/pro-components": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@ant-design/pro-components": "^2.4.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "antd": "^5.4.0",
+    "less": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "ant-design",
+    "pro-table",
+    "resizable",
+    "column-resize",
+    "table"
+  ]
+}