use-antd-resizable-header-for-cmss

介绍

灵感来源@minko-fe/use-antd-resizable-header 做了大幅度修改

1. 支持所有列都设置width情况下，拖拽控件位置不偏移
2. column 必须传入dataIndex
3. 使用rowSelection的情况下，必须使用tableLayout
4. 不建议使用在复杂嵌套表头情况
5. 若 column 有副作用，请把依赖项传入 useMemo deps 中

安装教程

import { useAntdResizableHeader } from 'use-antd-resizable-header-for-cmss'
import 'use-antd-resizable-header-for-cmss/dist/index.less'

const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
  columns: useMemo(() => columns, [deps]),
  minConstraints: 60,
  defaultWidth: 120
})

<Table
  tableLayout="fixed"
  columns={columns}
  components={components}
  dataSource={data}
  rowSelection={{
  fixed: true,
  columnWidth: 50,
    }}
  scroll={{ x: tableWidth }} />

使用说明

/**
   *列表数据
   *
   * @type {ColumnsType<T>}
   * @memberof useAntdResizableHeaderProps
   */
  columns: ColumnsType<T>
  /**
   *不传width， 宽度默认120
   *
   * @type {number}
   * @memberof useAntdResizableHeaderProps
   */
  defaultWidth?: number
  /**
   *最小拖动宽度， 默认60
   *Î
   * @type {number}
   * @memberof useAntdResizableHeaderProps
   */
  minConstraints?: number
  /**
   *最大拖动宽度，默认无穷
   *
   * @type {number}
   * @memberof useAntdResizableHeaderProps
   */
  maxConstraints?: number