3.1.0 • Published 10 months ago

use-antd-resizable-header v3.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

use-antd-resizable-header

antd 表格头拖拽 Hook,兼容 Table ProTable

预览

preview

在线地址

Demo

Stackblitz

安装

npm i use-antd-resizable-header

升级最新版本注意事项

CHANGELOG

API

Properties

NameTypeDefaultDescription
columnsResizableColumnType[]undefinedantd table 的 columns
defaultWidthnumber120某一列不能拖动,设置该列的最小展示宽度,默认 120
minConstraintsnumber60拖动最小宽度 默认 defaultWidth/2
maxConstraintsnumberInfinity拖动最大宽度 默认无穷
columnsStateColumnsStateTypeundefined列状态的配置,可以用来操作列拖拽宽度
onResizeStartFunctionundefined开始拖拽时触发
onResizeEndFunctionundefined结束拖拽时触发
debounceWaitTimenumber1000窗口resize时重新渲染的防抖时间,单位 ms

Return

NameDescription
resizableColumns拖拽 columns,用在 Table columns
components拖拽 components, 用在 Table components
tableWidth表格宽度,用在 Table width
resetColumns重置
refresh刷新组件

注意事项

  • 默认拖动颜色为#000,可通过global或设置 css 变量--resizable-line-background设置颜色
  • 至少一列不能拖动(width 不设置即可),请保持至少一列的自适应
  • 若 column 未传入dataIndex,请传入一个唯一的key,否则按照将按照 column 的序号 index 计算唯一 key
  • 若 column 有副作用,请把依赖项传入 useMemo deps 中

Example

Antd Table

import { useMemo } from 'react'
import { Table, type TableColumnsType } from 'antd'
import { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'


type Columns = ResizableColumnsType<TableColumnsType>

function App() {
  const columns: Columns = []

  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({
    columns: useMemo(() => columns, []),
    // 保存拖拽宽度至本地localStorage
    columnsState: {
      persistenceKey: 'localKey',
      persistenceType: 'localStorage',
    },
  });

  return (
    <>
      <Table
        columns={resizableColumns}
        components={components}
        scroll={{ x: tableWidth }}
      />
    </>
  );
}

ProTable

import { useMemo } from 'react'
import { type ProColumns, ProTable } from '@ant-design/pro-components'

type Columns = ResizableColumnsType<ProColumns[]>


function App() {
  const columns: Columns = []

  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({
    columns: useMemo(() => columns, []),
  });

  return (
    <>
      <ProTable
        columns={resizableColumns}
        components={components}
        scroll={{ x: tableWidth }}
      />
    </>
  );
}

修改拖拽背景颜色

/* index.css */
--resizable-line-background: red;

为什么需要 React.useMemo ?

如果不使用 useMemo

组件 render => columns 引用变化 => use-antd-resiable-header render => 组件 render => columns 引用变化···

不使用 useMemo

可以采用其他阻止 render 的方案,如: columns 是 prop 或 组件外常量

Table 特殊处理

filter 按钮溢出隐藏了

解决方案

.ant-table-filter-trigger {
  margin-inline: 0;
}

ProTable 特殊处理

fixed

ProTable 默认会给 fixed 列添加宽度,所以可能会造成 至少一列宽度为0 的条件无法满足。

解决方案

  1. 手动给 fixed 列添加宽度,然后不设置其余某一个非 fixed 列宽度
  2. 不设置 fixed 列宽度(默认 200),然后其余某一列也不设置宽度

本地开发

# 开发调试工具库
pnpm i

pnpm run dev

# 预览调试 playground
cd playground

pnpm i

pnpm run dev

MIT

LICENSE

3.0.0

11 months ago

3.1.0

10 months ago

2.9.5

1 year ago

2.9.4

1 year ago

2.9.3

1 year ago

2.9.2

1 year ago

2.9.1

2 years ago

2.9.0

2 years ago

2.8.15

2 years ago

2.8.14

2 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.3

4 years ago

2.1.0

4 years ago

1.4.6

4 years ago

1.4.5

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.5

4 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.14

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.13

4 years ago

1.1.10

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.1.2

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.0

4 years ago