resizable-pro-table 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -16
- package/dist/index.d.mts +44 -8
- package/dist/index.d.ts +44 -8
- package/dist/index.js +49 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +43 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# resizable-pro-table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
为 Ant Design [ProTable](https://procomponents.ant.design/components/table) 和原生 [Table](https://ant.design/components/table) 提供可拖拽调整列宽能力的组件库。
|
|
4
4
|
|
|
5
5
|
## 依赖
|
|
6
6
|
|
|
7
7
|
- React 17+
|
|
8
|
-
- antd
|
|
8
|
+
- antd 4+
|
|
9
9
|
- @ant-design/pro-components 2+
|
|
10
10
|
|
|
11
11
|
## 安装
|
|
@@ -20,34 +20,64 @@ pnpm add resizable-pro-table
|
|
|
20
20
|
|
|
21
21
|
## 使用
|
|
22
22
|
|
|
23
|
+
### ResizableProTable(ProTable 版)
|
|
24
|
+
|
|
23
25
|
```tsx
|
|
24
26
|
import ResizableProTable from 'resizable-pro-table';
|
|
25
27
|
|
|
26
28
|
<ResizableProTable<YourDataType>
|
|
27
29
|
columns={columns}
|
|
28
30
|
request={async () => ({ data: [], success: true })}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
resizableConfig={{
|
|
32
|
+
persistenceKey: 'my-table-columns',
|
|
33
|
+
minWidth: 60,
|
|
34
|
+
maxWidth: 400,
|
|
35
|
+
defaultWidth: 120,
|
|
36
|
+
}}
|
|
32
37
|
/>
|
|
33
38
|
```
|
|
34
39
|
|
|
35
|
-
###
|
|
40
|
+
### ResizableTable(antd 原生 Table 版)
|
|
36
41
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
```tsx
|
|
43
|
+
import { ResizableTable } from 'resizable-pro-table';
|
|
44
|
+
|
|
45
|
+
<ResizableTable<YourDataType>
|
|
46
|
+
columns={columns}
|
|
47
|
+
dataSource={data}
|
|
48
|
+
resizableConfig={{
|
|
49
|
+
minWidth: 60,
|
|
50
|
+
maxWidth: 400,
|
|
51
|
+
}}
|
|
52
|
+
/>
|
|
53
|
+
```
|
|
42
54
|
|
|
43
|
-
|
|
55
|
+
### useResizableColumns(自定义集成)
|
|
44
56
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
57
|
+
如需集成到自己的表格组件,可直接使用底层 Hook:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useResizableColumns } from 'resizable-pro-table';
|
|
61
|
+
|
|
62
|
+
const { mergedColumns, components } = useResizableColumns(columns, {
|
|
63
|
+
minWidth: 80,
|
|
64
|
+
maxWidth: 300,
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
<Table columns={mergedColumns} components={components} dataSource={data} />
|
|
49
68
|
```
|
|
50
69
|
|
|
70
|
+
## resizableConfig
|
|
71
|
+
|
|
72
|
+
所有组件均通过 `resizableConfig` 属性统一配置拖拽行为:
|
|
73
|
+
|
|
74
|
+
| 字段 | 说明 | 类型 | 默认值 |
|
|
75
|
+
|------|------|------|--------|
|
|
76
|
+
| `persistenceKey` | 用于在 localStorage 持久化列宽的 key,不传则不持久化 | `string` | - |
|
|
77
|
+
| `minWidth` | 列最小宽度(px) | `number` | `60` |
|
|
78
|
+
| `maxWidth` | 列最大宽度(px),不传则不限制 | `number` | - |
|
|
79
|
+
| `defaultWidth` | 未设置 `width` 的列的默认初始宽度(px) | `number` | `120` |
|
|
80
|
+
|
|
51
81
|
## License
|
|
52
82
|
|
|
53
83
|
MIT
|
package/dist/index.d.mts
CHANGED
|
@@ -1,14 +1,50 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ProTableProps } from '@ant-design/pro-components';
|
|
2
|
+
import { ProTableProps, ProColumns } from '@ant-design/pro-components';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { TableProps, ColumnType } from 'antd/es/table';
|
|
5
|
+
|
|
6
|
+
type ColumnWidthMap = Record<string, number>;
|
|
7
|
+
interface ResizableConfig {
|
|
8
|
+
/** localStorage key,用于跨刷新持久化列宽 */
|
|
9
|
+
persistenceKey?: string;
|
|
10
|
+
/** 拖拽最小列宽(px),默认 60 */
|
|
11
|
+
minWidth?: number;
|
|
12
|
+
/** 拖拽最大列宽(px),无默认值表示不限制 */
|
|
13
|
+
maxWidth?: number;
|
|
14
|
+
/** 无 width 列的默认初始宽度(px),默认 120 */
|
|
15
|
+
defaultWidth?: number;
|
|
16
|
+
}
|
|
17
|
+
interface ResizableTitleProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
18
|
+
onResizeEnd?: (width: number) => void;
|
|
19
|
+
width?: number;
|
|
20
|
+
minWidth?: number;
|
|
21
|
+
maxWidth?: number;
|
|
22
|
+
}
|
|
3
23
|
|
|
4
24
|
interface ResizableProTableProps<T extends Record<string, any>> extends Omit<ProTableProps<T, any>, 'components'> {
|
|
5
|
-
|
|
6
|
-
columnWidthPersistenceKey?: string;
|
|
7
|
-
/** Minimum column width in pixels (default: 60) */
|
|
8
|
-
minColumnWidth?: number;
|
|
9
|
-
/** Default width for columns without width (default: 120), used for drag handle */
|
|
10
|
-
defaultColumnWidth?: number;
|
|
25
|
+
resizableConfig?: ResizableConfig;
|
|
11
26
|
}
|
|
12
27
|
declare function ResizableProTable<T extends Record<string, any>>(props: ResizableProTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
13
28
|
|
|
14
|
-
|
|
29
|
+
interface ResizableTableProps<T extends object> extends Omit<TableProps<T>, 'components'> {
|
|
30
|
+
resizableConfig?: ResizableConfig;
|
|
31
|
+
}
|
|
32
|
+
declare function ResizableTable<T extends object>(props: ResizableTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare const ResizableTitle: React.FC<ResizableTitleProps>;
|
|
35
|
+
|
|
36
|
+
type Components = {
|
|
37
|
+
header: {
|
|
38
|
+
cell: typeof ResizableTitle;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
declare function useResizableColumns<T>(columns: ProColumns<T>[], resizableConfig?: ResizableConfig): {
|
|
42
|
+
mergedColumns: ProColumns<T>[];
|
|
43
|
+
components: Components;
|
|
44
|
+
};
|
|
45
|
+
declare function useResizableColumns<T>(columns: ColumnType<T>[], resizableConfig?: ResizableConfig): {
|
|
46
|
+
mergedColumns: ColumnType<T>[];
|
|
47
|
+
components: Components;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export { type ColumnWidthMap, type ResizableConfig, ResizableProTable, type ResizableProTableProps, ResizableTable, type ResizableTableProps, type ResizableTitleProps, ResizableProTable as default, useResizableColumns };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,50 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ProTableProps } from '@ant-design/pro-components';
|
|
2
|
+
import { ProTableProps, ProColumns } from '@ant-design/pro-components';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { TableProps, ColumnType } from 'antd/es/table';
|
|
5
|
+
|
|
6
|
+
type ColumnWidthMap = Record<string, number>;
|
|
7
|
+
interface ResizableConfig {
|
|
8
|
+
/** localStorage key,用于跨刷新持久化列宽 */
|
|
9
|
+
persistenceKey?: string;
|
|
10
|
+
/** 拖拽最小列宽(px),默认 60 */
|
|
11
|
+
minWidth?: number;
|
|
12
|
+
/** 拖拽最大列宽(px),无默认值表示不限制 */
|
|
13
|
+
maxWidth?: number;
|
|
14
|
+
/** 无 width 列的默认初始宽度(px),默认 120 */
|
|
15
|
+
defaultWidth?: number;
|
|
16
|
+
}
|
|
17
|
+
interface ResizableTitleProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
18
|
+
onResizeEnd?: (width: number) => void;
|
|
19
|
+
width?: number;
|
|
20
|
+
minWidth?: number;
|
|
21
|
+
maxWidth?: number;
|
|
22
|
+
}
|
|
3
23
|
|
|
4
24
|
interface ResizableProTableProps<T extends Record<string, any>> extends Omit<ProTableProps<T, any>, 'components'> {
|
|
5
|
-
|
|
6
|
-
columnWidthPersistenceKey?: string;
|
|
7
|
-
/** Minimum column width in pixels (default: 60) */
|
|
8
|
-
minColumnWidth?: number;
|
|
9
|
-
/** Default width for columns without width (default: 120), used for drag handle */
|
|
10
|
-
defaultColumnWidth?: number;
|
|
25
|
+
resizableConfig?: ResizableConfig;
|
|
11
26
|
}
|
|
12
27
|
declare function ResizableProTable<T extends Record<string, any>>(props: ResizableProTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
13
28
|
|
|
14
|
-
|
|
29
|
+
interface ResizableTableProps<T extends object> extends Omit<TableProps<T>, 'components'> {
|
|
30
|
+
resizableConfig?: ResizableConfig;
|
|
31
|
+
}
|
|
32
|
+
declare function ResizableTable<T extends object>(props: ResizableTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare const ResizableTitle: React.FC<ResizableTitleProps>;
|
|
35
|
+
|
|
36
|
+
type Components = {
|
|
37
|
+
header: {
|
|
38
|
+
cell: typeof ResizableTitle;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
declare function useResizableColumns<T>(columns: ProColumns<T>[], resizableConfig?: ResizableConfig): {
|
|
42
|
+
mergedColumns: ProColumns<T>[];
|
|
43
|
+
components: Components;
|
|
44
|
+
};
|
|
45
|
+
declare function useResizableColumns<T>(columns: ColumnType<T>[], resizableConfig?: ResizableConfig): {
|
|
46
|
+
mergedColumns: ColumnType<T>[];
|
|
47
|
+
components: Components;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export { type ColumnWidthMap, type ResizableConfig, ResizableProTable, type ResizableProTableProps, ResizableTable, type ResizableTableProps, type ResizableTitleProps, ResizableProTable as default, useResizableColumns };
|
package/dist/index.js
CHANGED
|
@@ -20,7 +20,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
|
|
23
|
+
ResizableProTable: () => ResizableProTable_default,
|
|
24
|
+
ResizableTable: () => ResizableTable_default,
|
|
25
|
+
default: () => ResizableProTable_default,
|
|
26
|
+
useResizableColumns: () => useResizableColumns_default
|
|
24
27
|
});
|
|
25
28
|
module.exports = __toCommonJS(index_exports);
|
|
26
29
|
|
|
@@ -78,6 +81,7 @@ var ResizableTitle = ({
|
|
|
78
81
|
onResizeEnd,
|
|
79
82
|
width,
|
|
80
83
|
minWidth = 60,
|
|
84
|
+
maxWidth,
|
|
81
85
|
children,
|
|
82
86
|
...restProps
|
|
83
87
|
}) => {
|
|
@@ -96,7 +100,11 @@ var ResizableTitle = ({
|
|
|
96
100
|
const cols = findCorrespondingCols(th);
|
|
97
101
|
widthRef.current = startWidth;
|
|
98
102
|
const onMouseMove = (ev) => {
|
|
99
|
-
const
|
|
103
|
+
const rawWidth = startWidth + (ev.clientX - startX);
|
|
104
|
+
const newWidth = Math.max(
|
|
105
|
+
minWidth,
|
|
106
|
+
maxWidth !== void 0 ? Math.min(maxWidth, rawWidth) : rawWidth
|
|
107
|
+
);
|
|
100
108
|
th.style.width = `${newWidth}px`;
|
|
101
109
|
cols.forEach((col) => {
|
|
102
110
|
col.style.width = `${newWidth}px`;
|
|
@@ -126,7 +134,7 @@ var ResizableTitle = ({
|
|
|
126
134
|
document.addEventListener("mousemove", onMouseMove);
|
|
127
135
|
document.addEventListener("mouseup", onMouseUp);
|
|
128
136
|
},
|
|
129
|
-
[minWidth, onResizeEnd]
|
|
137
|
+
[minWidth, maxWidth, onResizeEnd]
|
|
130
138
|
);
|
|
131
139
|
if (!width || !onResizeEnd) {
|
|
132
140
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { ...restProps, children });
|
|
@@ -190,15 +198,15 @@ function safeWriteStorage(key, value) {
|
|
|
190
198
|
} catch {
|
|
191
199
|
}
|
|
192
200
|
}
|
|
193
|
-
function useResizableColumns(columns,
|
|
194
|
-
const {
|
|
201
|
+
function useResizableColumns(columns, resizableConfig) {
|
|
202
|
+
const { persistenceKey, minWidth, maxWidth, defaultWidth = 120 } = resizableConfig ?? {};
|
|
195
203
|
const [columnWidths, setColumnWidths] = (0, import_react2.useState)(
|
|
196
|
-
() =>
|
|
204
|
+
() => persistenceKey ? safeReadStorage(persistenceKey) : {}
|
|
197
205
|
);
|
|
198
206
|
const mergedColumns = (0, import_react2.useMemo)(
|
|
199
207
|
() => columns.map((col) => {
|
|
200
208
|
const colKey = getColumnKey(col);
|
|
201
|
-
const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ??
|
|
209
|
+
const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ?? defaultWidth : col.width;
|
|
202
210
|
if (colKey === void 0) {
|
|
203
211
|
return col;
|
|
204
212
|
}
|
|
@@ -207,13 +215,14 @@ function useResizableColumns(columns, options) {
|
|
|
207
215
|
width: effectiveWidth,
|
|
208
216
|
onHeaderCell: () => ({
|
|
209
217
|
width: effectiveWidth,
|
|
210
|
-
minWidth
|
|
211
|
-
|
|
218
|
+
minWidth,
|
|
219
|
+
maxWidth,
|
|
220
|
+
style: { width: effectiveWidth, minWidth: minWidth ?? 60 },
|
|
212
221
|
onResizeEnd: (finalWidth) => {
|
|
213
222
|
setColumnWidths((prev) => {
|
|
214
223
|
const next = { ...prev, [colKey]: finalWidth };
|
|
215
|
-
if (
|
|
216
|
-
safeWriteStorage(
|
|
224
|
+
if (persistenceKey) {
|
|
225
|
+
safeWriteStorage(persistenceKey, next);
|
|
217
226
|
}
|
|
218
227
|
return next;
|
|
219
228
|
});
|
|
@@ -221,7 +230,7 @@ function useResizableColumns(columns, options) {
|
|
|
221
230
|
})
|
|
222
231
|
};
|
|
223
232
|
}),
|
|
224
|
-
[columns, columnWidths,
|
|
233
|
+
[columns, columnWidths, minWidth, maxWidth, persistenceKey, defaultWidth]
|
|
225
234
|
);
|
|
226
235
|
const components = (0, import_react2.useMemo)(
|
|
227
236
|
() => ({
|
|
@@ -238,10 +247,10 @@ var useResizableColumns_default = useResizableColumns;
|
|
|
238
247
|
// src/ResizableProTable.tsx
|
|
239
248
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
240
249
|
function ResizableProTable(props) {
|
|
241
|
-
const { columns = [],
|
|
250
|
+
const { columns = [], resizableConfig, ...rest } = props;
|
|
242
251
|
const { mergedColumns, components } = useResizableColumns_default(
|
|
243
252
|
columns,
|
|
244
|
-
|
|
253
|
+
resizableConfig
|
|
245
254
|
);
|
|
246
255
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
247
256
|
import_pro_components.ProTable,
|
|
@@ -253,4 +262,30 @@ function ResizableProTable(props) {
|
|
|
253
262
|
);
|
|
254
263
|
}
|
|
255
264
|
var ResizableProTable_default = ResizableProTable;
|
|
265
|
+
|
|
266
|
+
// src/ResizableTable.tsx
|
|
267
|
+
var import_antd = require("antd");
|
|
268
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
269
|
+
function ResizableTable(props) {
|
|
270
|
+
const { columns = [], resizableConfig, ...rest } = props;
|
|
271
|
+
const { mergedColumns, components } = useResizableColumns_default(
|
|
272
|
+
columns,
|
|
273
|
+
resizableConfig
|
|
274
|
+
);
|
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
276
|
+
import_antd.Table,
|
|
277
|
+
{
|
|
278
|
+
...rest,
|
|
279
|
+
columns: mergedColumns,
|
|
280
|
+
components
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
var ResizableTable_default = ResizableTable;
|
|
285
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
286
|
+
0 && (module.exports = {
|
|
287
|
+
ResizableProTable,
|
|
288
|
+
ResizableTable,
|
|
289
|
+
useResizableColumns
|
|
290
|
+
});
|
|
256
291
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","#style-inject:#style-inject","../src/style.css","../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx"],"sourcesContent":["import './style.css';\nexport { default } from './ResizableProTable';\nexport type { ResizableProTableProps } from './ResizableProTable';\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".ant-table-thead > tr > th {\\n position: relative;\\n overflow: visible !important;\\n}\\n.ant-table-wrapper .ant-table-thead,\\n.ant-table .ant-table-thead {\\n overflow: visible !important;\\n}\\n.resizable-handle {\\n position: absolute;\\n right: -6px;\\n top: 0;\\n bottom: 0;\\n width: 12px;\\n cursor: col-resize;\\n z-index: 10;\\n pointer-events: auto;\\n}\\n.resizable-handle::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 5px;\\n top: 15%;\\n height: 70%;\\n width: 2px;\\n background: rgba(0, 0, 0, 0.08);\\n transition: background 0.2s;\\n}\\n.resizable-handle:hover::after {\\n background: #1677ff;\\n}\\n.resizable-handle--active::after {\\n background: #1677ff;\\n}\\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 handleRef = useRef<HTMLSpanElement>(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 handle = handleRef.current;\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 handle?.classList.remove('resizable-handle--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 handle?.classList.add('resizable-handle--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 ref={handleRef}\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"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","#style-inject:#style-inject","../src/style.css","../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx","../src/ResizableTable.tsx"],"sourcesContent":["import './style.css';\n\nexport { default } from './ResizableProTable';\nexport { default as ResizableProTable } from './ResizableProTable';\nexport type { ResizableProTableProps } from './ResizableProTable';\n\nexport { default as ResizableTable } from './ResizableTable';\nexport type { ResizableTableProps } from './ResizableTable';\n\nexport { default as useResizableColumns } from './useResizableColumns';\nexport type { ResizableConfig, ColumnWidthMap, ResizableTitleProps } from './types';\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".ant-table-thead > tr > th {\\n position: relative;\\n overflow: visible !important;\\n}\\n.ant-table-wrapper .ant-table-thead,\\n.ant-table .ant-table-thead {\\n overflow: visible !important;\\n}\\n.resizable-handle {\\n position: absolute;\\n right: -6px;\\n top: 0;\\n bottom: 0;\\n width: 12px;\\n cursor: col-resize;\\n z-index: 10;\\n pointer-events: auto;\\n}\\n.resizable-handle::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 5px;\\n top: 15%;\\n height: 70%;\\n width: 2px;\\n background: rgba(0, 0, 0, 0.08);\\n transition: background 0.2s;\\n}\\n.resizable-handle:hover::after {\\n background: #1677ff;\\n}\\n.resizable-handle--active::after {\\n background: #1677ff;\\n}\\n\")","import { ProTable } from '@ant-design/pro-components';\nimport type { ProTableProps, ProColumns } from '@ant-design/pro-components';\nimport useResizableColumns from './useResizableColumns';\nimport type { ResizableConfig } from './types';\n\nexport interface ResizableProTableProps<T extends Record<string, any>>\n extends Omit<ProTableProps<T, any>, 'components'> {\n resizableConfig?: ResizableConfig;\n}\n\nfunction ResizableProTable<T extends Record<string, any>>(\n props: ResizableProTableProps<T>,\n) {\n const { columns = [], resizableConfig, ...rest } = props;\n\n const { mergedColumns, components } = useResizableColumns<T>(\n columns as ProColumns<T>[],\n resizableConfig,\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 { ColumnType } from 'antd/es/table';\nimport type { ProColumns } from '@ant-design/pro-components';\nimport ResizableTitle from './ResizableTitle';\nimport type { ColumnWidthMap, ResizableConfig } from './types';\n\ntype Components = { header: { cell: typeof ResizableTitle } };\n\nfunction getColumnKey<T>(col: ColumnType<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 resizableConfig?: ResizableConfig,\n): { mergedColumns: ProColumns<T>[]; components: Components };\nfunction useResizableColumns<T>(\n columns: ColumnType<T>[],\n resizableConfig?: ResizableConfig,\n): { mergedColumns: ColumnType<T>[]; components: Components };\nfunction useResizableColumns<T>(\n columns: any[],\n resizableConfig?: ResizableConfig,\n) {\n const { persistenceKey, minWidth, maxWidth, defaultWidth = 120 } = resizableConfig ?? {};\n\n const [columnWidths, setColumnWidths] = useState<ColumnWidthMap>(() =>\n persistenceKey ? safeReadStorage(persistenceKey) : {},\n );\n\n const mergedColumns = useMemo(\n () =>\n columns.map((col) => {\n const colKey = getColumnKey(col);\n const effectiveWidth =\n colKey !== undefined\n ? (columnWidths[colKey] ?? (col.width as number | undefined) ?? defaultWidth)\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,\n maxWidth,\n style: { width: effectiveWidth, minWidth: minWidth ?? 60 },\n onResizeEnd: (finalWidth: number) => {\n setColumnWidths((prev) => {\n const next = { ...prev, [colKey]: finalWidth };\n if (persistenceKey) {\n safeWriteStorage(persistenceKey, next);\n }\n return next;\n });\n },\n }),\n };\n }),\n [columns, columnWidths, minWidth, maxWidth, persistenceKey, defaultWidth],\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 maxWidth,\n children,\n ...restProps\n}) => {\n const thRef = useRef<HTMLTableCellElement>(null);\n const handleRef = useRef<HTMLSpanElement>(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 handle = handleRef.current;\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 rawWidth = startWidth + (ev.clientX - startX);\n const newWidth = Math.max(\n minWidth,\n maxWidth !== undefined ? Math.min(maxWidth, rawWidth) : rawWidth,\n );\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 handle?.classList.remove('resizable-handle--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 handle?.classList.add('resizable-handle--active');\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n },\n [minWidth, maxWidth, 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 ref={handleRef}\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","import { Table } from 'antd';\nimport type { TableProps, ColumnType } from 'antd/es/table';\nimport useResizableColumns from './useResizableColumns';\nimport type { ResizableConfig } from './types';\n\nexport interface ResizableTableProps<T extends object>\n extends Omit<TableProps<T>, 'components'> {\n resizableConfig?: ResizableConfig;\n}\n\nfunction ResizableTable<T extends object>(props: ResizableTableProps<T>) {\n const { columns = [], resizableConfig, ...rest } = props;\n\n const { mergedColumns, components } = useResizableColumns<T>(\n columns as ColumnType<T>[],\n resizableConfig,\n );\n\n return (\n <Table<T>\n {...rest}\n columns={mergedColumns}\n components={components}\n />\n );\n}\n\nexport default ResizableTable;\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -52,6 +52,7 @@ var ResizableTitle = ({
|
|
|
52
52
|
onResizeEnd,
|
|
53
53
|
width,
|
|
54
54
|
minWidth = 60,
|
|
55
|
+
maxWidth,
|
|
55
56
|
children,
|
|
56
57
|
...restProps
|
|
57
58
|
}) => {
|
|
@@ -70,7 +71,11 @@ var ResizableTitle = ({
|
|
|
70
71
|
const cols = findCorrespondingCols(th);
|
|
71
72
|
widthRef.current = startWidth;
|
|
72
73
|
const onMouseMove = (ev) => {
|
|
73
|
-
const
|
|
74
|
+
const rawWidth = startWidth + (ev.clientX - startX);
|
|
75
|
+
const newWidth = Math.max(
|
|
76
|
+
minWidth,
|
|
77
|
+
maxWidth !== void 0 ? Math.min(maxWidth, rawWidth) : rawWidth
|
|
78
|
+
);
|
|
74
79
|
th.style.width = `${newWidth}px`;
|
|
75
80
|
cols.forEach((col) => {
|
|
76
81
|
col.style.width = `${newWidth}px`;
|
|
@@ -100,7 +105,7 @@ var ResizableTitle = ({
|
|
|
100
105
|
document.addEventListener("mousemove", onMouseMove);
|
|
101
106
|
document.addEventListener("mouseup", onMouseUp);
|
|
102
107
|
},
|
|
103
|
-
[minWidth, onResizeEnd]
|
|
108
|
+
[minWidth, maxWidth, onResizeEnd]
|
|
104
109
|
);
|
|
105
110
|
if (!width || !onResizeEnd) {
|
|
106
111
|
return /* @__PURE__ */ jsx("th", { ...restProps, children });
|
|
@@ -164,15 +169,15 @@ function safeWriteStorage(key, value) {
|
|
|
164
169
|
} catch {
|
|
165
170
|
}
|
|
166
171
|
}
|
|
167
|
-
function useResizableColumns(columns,
|
|
168
|
-
const {
|
|
172
|
+
function useResizableColumns(columns, resizableConfig) {
|
|
173
|
+
const { persistenceKey, minWidth, maxWidth, defaultWidth = 120 } = resizableConfig ?? {};
|
|
169
174
|
const [columnWidths, setColumnWidths] = useState(
|
|
170
|
-
() =>
|
|
175
|
+
() => persistenceKey ? safeReadStorage(persistenceKey) : {}
|
|
171
176
|
);
|
|
172
177
|
const mergedColumns = useMemo(
|
|
173
178
|
() => columns.map((col) => {
|
|
174
179
|
const colKey = getColumnKey(col);
|
|
175
|
-
const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ??
|
|
180
|
+
const effectiveWidth = colKey !== void 0 ? columnWidths[colKey] ?? col.width ?? defaultWidth : col.width;
|
|
176
181
|
if (colKey === void 0) {
|
|
177
182
|
return col;
|
|
178
183
|
}
|
|
@@ -181,13 +186,14 @@ function useResizableColumns(columns, options) {
|
|
|
181
186
|
width: effectiveWidth,
|
|
182
187
|
onHeaderCell: () => ({
|
|
183
188
|
width: effectiveWidth,
|
|
184
|
-
minWidth
|
|
185
|
-
|
|
189
|
+
minWidth,
|
|
190
|
+
maxWidth,
|
|
191
|
+
style: { width: effectiveWidth, minWidth: minWidth ?? 60 },
|
|
186
192
|
onResizeEnd: (finalWidth) => {
|
|
187
193
|
setColumnWidths((prev) => {
|
|
188
194
|
const next = { ...prev, [colKey]: finalWidth };
|
|
189
|
-
if (
|
|
190
|
-
safeWriteStorage(
|
|
195
|
+
if (persistenceKey) {
|
|
196
|
+
safeWriteStorage(persistenceKey, next);
|
|
191
197
|
}
|
|
192
198
|
return next;
|
|
193
199
|
});
|
|
@@ -195,7 +201,7 @@ function useResizableColumns(columns, options) {
|
|
|
195
201
|
})
|
|
196
202
|
};
|
|
197
203
|
}),
|
|
198
|
-
[columns, columnWidths,
|
|
204
|
+
[columns, columnWidths, minWidth, maxWidth, persistenceKey, defaultWidth]
|
|
199
205
|
);
|
|
200
206
|
const components = useMemo(
|
|
201
207
|
() => ({
|
|
@@ -212,10 +218,10 @@ var useResizableColumns_default = useResizableColumns;
|
|
|
212
218
|
// src/ResizableProTable.tsx
|
|
213
219
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
214
220
|
function ResizableProTable(props) {
|
|
215
|
-
const { columns = [],
|
|
221
|
+
const { columns = [], resizableConfig, ...rest } = props;
|
|
216
222
|
const { mergedColumns, components } = useResizableColumns_default(
|
|
217
223
|
columns,
|
|
218
|
-
|
|
224
|
+
resizableConfig
|
|
219
225
|
);
|
|
220
226
|
return /* @__PURE__ */ jsx2(
|
|
221
227
|
ProTable,
|
|
@@ -227,7 +233,30 @@ function ResizableProTable(props) {
|
|
|
227
233
|
);
|
|
228
234
|
}
|
|
229
235
|
var ResizableProTable_default = ResizableProTable;
|
|
236
|
+
|
|
237
|
+
// src/ResizableTable.tsx
|
|
238
|
+
import { Table } from "antd";
|
|
239
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
240
|
+
function ResizableTable(props) {
|
|
241
|
+
const { columns = [], resizableConfig, ...rest } = props;
|
|
242
|
+
const { mergedColumns, components } = useResizableColumns_default(
|
|
243
|
+
columns,
|
|
244
|
+
resizableConfig
|
|
245
|
+
);
|
|
246
|
+
return /* @__PURE__ */ jsx3(
|
|
247
|
+
Table,
|
|
248
|
+
{
|
|
249
|
+
...rest,
|
|
250
|
+
columns: mergedColumns,
|
|
251
|
+
components
|
|
252
|
+
}
|
|
253
|
+
);
|
|
254
|
+
}
|
|
255
|
+
var ResizableTable_default = ResizableTable;
|
|
230
256
|
export {
|
|
231
|
-
ResizableProTable_default as
|
|
257
|
+
ResizableProTable_default as ResizableProTable,
|
|
258
|
+
ResizableTable_default as ResizableTable,
|
|
259
|
+
ResizableProTable_default as default,
|
|
260
|
+
useResizableColumns_default as useResizableColumns
|
|
232
261
|
};
|
|
233
262
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["#style-inject:#style-inject","../src/style.css","../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx"],"sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".ant-table-thead > tr > th {\\n position: relative;\\n overflow: visible !important;\\n}\\n.ant-table-wrapper .ant-table-thead,\\n.ant-table .ant-table-thead {\\n overflow: visible !important;\\n}\\n.resizable-handle {\\n position: absolute;\\n right: -6px;\\n top: 0;\\n bottom: 0;\\n width: 12px;\\n cursor: col-resize;\\n z-index: 10;\\n pointer-events: auto;\\n}\\n.resizable-handle::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 5px;\\n top: 15%;\\n height: 70%;\\n width: 2px;\\n background: rgba(0, 0, 0, 0.08);\\n transition: background 0.2s;\\n}\\n.resizable-handle:hover::after {\\n background: #1677ff;\\n}\\n.resizable-handle--active::after {\\n background: #1677ff;\\n}\\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 handleRef = useRef<HTMLSpanElement>(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 handle = handleRef.current;\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 handle?.classList.remove('resizable-handle--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 handle?.classList.add('resizable-handle--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 ref={handleRef}\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":";AACyB,SAAR,YAA6B,KAAK,EAAE,SAAS,IAAI,CAAC,GAAG;AAC1D,MAAI,CAAC,OAAO,OAAO,aAAa,YAAa;AAE7C,QAAM,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACrE,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,OAAO;AAEb,MAAI,aAAa,OAAO;AACtB,QAAI,KAAK,YAAY;AACnB,WAAK,aAAa,OAAO,KAAK,UAAU;AAAA,IAC1C,OAAO;AACL,WAAK,YAAY,KAAK;AAAA,IACxB;AAAA,EACF,OAAO;AACL,SAAK,YAAY,KAAK;AAAA,EACxB;AAEA,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;;;ACvB8B,YAAY,4qBAA8qB;;;ACCluB,SAAS,gBAAgB;;;ACDzB,SAAS,SAAS,gBAAgB;;;ACAlC,SAAgB,aAAa,cAAc;AA0FhC,cAIP,YAJO;AAjFX,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,YAAY,OAAwB,IAAI;AAC9C,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,UAAU;AACzB,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,gBAAQ,UAAU,OAAO,0BAA0B;AACnD,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,cAAQ,UAAU,IAAI,0BAA0B;AAChD,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,KAAK;AAAA,YACL,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;;;AD5Gf,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"]}
|
|
1
|
+
{"version":3,"sources":["#style-inject:#style-inject","../src/style.css","../src/ResizableProTable.tsx","../src/useResizableColumns.ts","../src/ResizableTitle.tsx","../src/ResizableTable.tsx"],"sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".ant-table-thead > tr > th {\\n position: relative;\\n overflow: visible !important;\\n}\\n.ant-table-wrapper .ant-table-thead,\\n.ant-table .ant-table-thead {\\n overflow: visible !important;\\n}\\n.resizable-handle {\\n position: absolute;\\n right: -6px;\\n top: 0;\\n bottom: 0;\\n width: 12px;\\n cursor: col-resize;\\n z-index: 10;\\n pointer-events: auto;\\n}\\n.resizable-handle::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 5px;\\n top: 15%;\\n height: 70%;\\n width: 2px;\\n background: rgba(0, 0, 0, 0.08);\\n transition: background 0.2s;\\n}\\n.resizable-handle:hover::after {\\n background: #1677ff;\\n}\\n.resizable-handle--active::after {\\n background: #1677ff;\\n}\\n\")","import { ProTable } from '@ant-design/pro-components';\nimport type { ProTableProps, ProColumns } from '@ant-design/pro-components';\nimport useResizableColumns from './useResizableColumns';\nimport type { ResizableConfig } from './types';\n\nexport interface ResizableProTableProps<T extends Record<string, any>>\n extends Omit<ProTableProps<T, any>, 'components'> {\n resizableConfig?: ResizableConfig;\n}\n\nfunction ResizableProTable<T extends Record<string, any>>(\n props: ResizableProTableProps<T>,\n) {\n const { columns = [], resizableConfig, ...rest } = props;\n\n const { mergedColumns, components } = useResizableColumns<T>(\n columns as ProColumns<T>[],\n resizableConfig,\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 { ColumnType } from 'antd/es/table';\nimport type { ProColumns } from '@ant-design/pro-components';\nimport ResizableTitle from './ResizableTitle';\nimport type { ColumnWidthMap, ResizableConfig } from './types';\n\ntype Components = { header: { cell: typeof ResizableTitle } };\n\nfunction getColumnKey<T>(col: ColumnType<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 resizableConfig?: ResizableConfig,\n): { mergedColumns: ProColumns<T>[]; components: Components };\nfunction useResizableColumns<T>(\n columns: ColumnType<T>[],\n resizableConfig?: ResizableConfig,\n): { mergedColumns: ColumnType<T>[]; components: Components };\nfunction useResizableColumns<T>(\n columns: any[],\n resizableConfig?: ResizableConfig,\n) {\n const { persistenceKey, minWidth, maxWidth, defaultWidth = 120 } = resizableConfig ?? {};\n\n const [columnWidths, setColumnWidths] = useState<ColumnWidthMap>(() =>\n persistenceKey ? safeReadStorage(persistenceKey) : {},\n );\n\n const mergedColumns = useMemo(\n () =>\n columns.map((col) => {\n const colKey = getColumnKey(col);\n const effectiveWidth =\n colKey !== undefined\n ? (columnWidths[colKey] ?? (col.width as number | undefined) ?? defaultWidth)\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,\n maxWidth,\n style: { width: effectiveWidth, minWidth: minWidth ?? 60 },\n onResizeEnd: (finalWidth: number) => {\n setColumnWidths((prev) => {\n const next = { ...prev, [colKey]: finalWidth };\n if (persistenceKey) {\n safeWriteStorage(persistenceKey, next);\n }\n return next;\n });\n },\n }),\n };\n }),\n [columns, columnWidths, minWidth, maxWidth, persistenceKey, defaultWidth],\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 maxWidth,\n children,\n ...restProps\n}) => {\n const thRef = useRef<HTMLTableCellElement>(null);\n const handleRef = useRef<HTMLSpanElement>(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 handle = handleRef.current;\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 rawWidth = startWidth + (ev.clientX - startX);\n const newWidth = Math.max(\n minWidth,\n maxWidth !== undefined ? Math.min(maxWidth, rawWidth) : rawWidth,\n );\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 handle?.classList.remove('resizable-handle--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 handle?.classList.add('resizable-handle--active');\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n },\n [minWidth, maxWidth, 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 ref={handleRef}\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","import { Table } from 'antd';\nimport type { TableProps, ColumnType } from 'antd/es/table';\nimport useResizableColumns from './useResizableColumns';\nimport type { ResizableConfig } from './types';\n\nexport interface ResizableTableProps<T extends object>\n extends Omit<TableProps<T>, 'components'> {\n resizableConfig?: ResizableConfig;\n}\n\nfunction ResizableTable<T extends object>(props: ResizableTableProps<T>) {\n const { columns = [], resizableConfig, ...rest } = props;\n\n const { mergedColumns, components } = useResizableColumns<T>(\n columns as ColumnType<T>[],\n resizableConfig,\n );\n\n return (\n <Table<T>\n {...rest}\n columns={mergedColumns}\n components={components}\n />\n );\n}\n\nexport default ResizableTable;\n"],"mappings":"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","names":["jsx","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "resizable-pro-table",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "ProTable with resizable columns for Ant Design",
|
|
5
5
|
"author": "yinzhimin",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": ">=17.0.0",
|
|
28
28
|
"react-dom": ">=17.0.0",
|
|
29
|
-
"antd": ">=
|
|
29
|
+
"antd": ">=4.0.0",
|
|
30
30
|
"@ant-design/pro-components": ">=2.0.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|