{"id":22824683,"url":"https://github.com/hemengke1997/use-antd-resizable-header","last_synced_at":"2025-05-15T09:09:22.224Z","repository":{"id":37428218,"uuid":"383839916","full_name":"hemengke1997/use-antd-resizable-header","owner":"hemengke1997","description":"antd table 表格头列拖拽 hook / React Hook makes antd Table Header resizable.","archived":false,"fork":false,"pushed_at":"2025-01-07T06:02:02.000Z","size":7619,"stargazers_count":259,"open_issues_count":20,"forks_count":55,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-14T01:58:14.771Z","etag":null,"topics":["ant-design","drag","react-hook","resizable-columns","resizable-header","table"],"latest_commit_sha":null,"homepage":"https://hemengke1997.github.io/use-antd-resizable-header/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hemengke1997.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-07T15:12:17.000Z","updated_at":"2025-05-09T09:26:21.000Z","dependencies_parsed_at":"2024-12-19T18:11:48.754Z","dependency_job_id":"0ab384e4-50a3-4ae9-a6e0-0c0ec71de8a3","html_url":"https://github.com/hemengke1997/use-antd-resizable-header","commit_stats":{"total_commits":229,"total_committers":6,"mean_commits":"38.166666666666664","dds":"0.43231441048034935","last_synced_commit":"2d9d6e40531013754f714440b9ef022f4750602b"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemengke1997%2Fuse-antd-resizable-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemengke1997%2Fuse-antd-resizable-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemengke1997%2Fuse-antd-resizable-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemengke1997%2Fuse-antd-resizable-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hemengke1997","download_url":"https://codeload.github.com/hemengke1997/use-antd-resizable-header/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254099831,"owners_count":22014775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","drag","react-hook","resizable-columns","resizable-header","table"],"created_at":"2024-12-12T17:08:01.239Z","updated_at":"2025-05-15T09:09:17.209Z","avatar_url":"https://github.com/hemengke1997.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","React Hooks"],"sub_categories":["[Jul 29, 2025](/content/2025/07/29/README.md)","Themes"],"readme":"# use-antd-resizable-header\n\n\u003e antd 表格头拖拽 Hook，兼容 Table ProTable\n\n## 预览\n\n![preview](./screenshots/new_preview.gif)\n\n## 在线地址\n\n[Demo](https://hemengke1997.github.io/use-antd-resizable-header/)\n\n[Stackblitz](https://stackblitz.com/edit/use-antd-resizable-header-demo?file=src%2FApp.tsx)\n\n## 安装\n\n```sh\nnpm i use-antd-resizable-header\n```\n\n## 升级最新版本注意事项\n\n[CHANGELOG](./docs/3.md)\n\n## API\n\n### Properties\n\n| Name             | Type                  | Default   | Description                                      |\n| ---------------- | --------------------- | --------- | ------------------------------------------------ |\n| columns          | ResizableColumnType[] | undefined | antd table 的 columns                            |\n| defaultWidth     | number                | 120       | 某一列不能拖动，设置该列的最小展示宽度，默认 120 |\n| minConstraints   | number                | 60        | 拖动最小宽度 默认 defaultWidth/2                 |\n| maxConstraints   | number                | Infinity  | 拖动最大宽度 默认无穷                            |\n| columnsState     | ColumnsStateType      | undefined | 列状态的配置，可以用来操作列拖拽宽度             |\n| onResizeStart    | Function              | undefined | 开始拖拽时触发                                   |\n| onResizeEnd      | Function              | undefined | 结束拖拽时触发                                   |\n| debounceWaitTime | number                | 1000      | 窗口resize时重新渲染的防抖时间，单位 ms          |\n\n### Return\n\n| Name             | Description                             |\n| ---------------- | --------------------------------------- |\n| resizableColumns | 拖拽 columns，用在 Table columns        |\n| components       | 拖拽 components， 用在 Table components |\n| tableWidth       | 表格宽度，用在 Table width              |\n| resetColumns     | 重置                                    |\n| refresh          | 刷新组件                                |\n\n## 注意事项\n\n- **默认拖动颜色为`#000`，可通过`global`或设置 css 变量`--resizable-line-background`设置颜色**\n- **至少一列不能拖动（width 不设置即可），[请保持至少一列的自适应](https://ant-design.antgroup.com/components/table-cn#table-demo-fixed-columns)**\n- **若 column 未传入`dataIndex`，请传入一个唯一的`key`，否则按照将按照 column 的序号 index 计算唯一 key**\n- **若 column 有副作用，请把依赖项传入 useMemo deps 中**\n\n## Example\n\n### Antd Table\n\n```tsx\nimport { useMemo } from 'react'\nimport { Table, type TableColumnsType } from 'antd'\nimport { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'\nimport 'use-antd-resizable-header/dist/style.css'\n\n\ntype Columns = ResizableColumnsType\u003cTableColumnsType\u003e\n\nfunction App() {\n  const columns: Columns = []\n\n  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({\n    columns: useMemo(() =\u003e columns, []),\n    // 保存拖拽宽度至本地localStorage\n    columnsState: {\n      persistenceKey: 'localKey',\n      persistenceType: 'localStorage',\n    },\n  });\n\n  return (\n    \u003c\u003e\n      \u003cTable\n        columns={resizableColumns}\n        components={components}\n        scroll={{ x: tableWidth }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### ProTable\n\n```tsx\nimport { useMemo } from 'react'\nimport { type ProColumns, ProTable } from '@ant-design/pro-components'\nimport { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'\nimport 'use-antd-resizable-header/dist/style.css'\n\ntype Columns = ResizableColumnsType\u003cProColumns[]\u003e\n\n\nfunction App() {\n  const columns: Columns = []\n\n  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({\n    columns: useMemo(() =\u003e columns, []),\n  });\n\n  return (\n    \u003c\u003e\n      \u003cProTable\n        columns={resizableColumns}\n        components={components}\n        scroll={{ x: tableWidth }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## 修改拖拽背景颜色\n\n```css\n--resizable-line-background: red;\n```\n\n\n## 为什么需要 React.useMemo ?\n\n### 如果不使用 useMemo\n\n#### 组件 render =\u003e columns 引用变化 =\u003e use-antd-resiable-header render =\u003e 组件 render =\u003e columns 引用变化···\n\n## 不使用 useMemo\n\n可以采用其他阻止 render 的方案，如: `columns` 是 prop 或 组件外常量\n\n## Table 特殊处理\n\n### filter 按钮溢出隐藏了\n\n#### 解决方案\n\n```css\n.ant-table-filter-trigger {\n  margin-inline: 0;\n}\n```\n\n## ProTable 特殊处理\n\n### fixed\n\n[ProTable 默认会给 fixed 列添加宽度](https://github.com/ant-design/pro-components/blob/master/packages/table/src/utils/genProColumnToColumn.tsx#L115-L116)，所以可能会造成 `至少一列宽度为0` 的条件无法满足。\n\n#### 解决方案\n\n1. 手动给 fixed 列添加宽度，然后不设置其余某一个非 fixed 列宽度\n2. 不设置 fixed 列宽度（默认 200），然后其余某一列也不设置宽度\n\n## 本地开发\n\n```bash\n# 开发调试工具库\npnpm i\n\npnpm run dev\n\n# 预览调试 playground\ncd playground\n\npnpm i\n\npnpm run dev\n```\n\n## MIT\n\n[LICENSE](https://github.com/hemengke1997/use-antd-resizable-header/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemengke1997%2Fuse-antd-resizable-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhemengke1997%2Fuse-antd-resizable-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemengke1997%2Fuse-antd-resizable-header/lists"}