# use-antd-resizable-header-for-cmss

> antd resizable header hook

Latest version **1.10.0** (published 2023-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-antd-resizable-header-for-cmss
pnpm add use-antd-resizable-header-for-cmss
yarn add use-antd-resizable-header-for-cmss
bun add use-antd-resizable-header-for-cmss
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.10.0 |
| Published | 2023-03-20 |
| First published | 2023-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | akisong |
| Maintainers | akisong |

## Links

- npm: https://www.npmjs.com/package/use-antd-resizable-header-for-cmss
- npm.io page: https://npm.io/package/use-antd-resizable-header-for-cmss

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-resizable](https://npm.io/package/react-resizable.md) ^3.0.4

## Recent versions

- 1.10.0 (latest) — 2023-03-20
- 1.0.9 — 2023-03-20
- 1.0.8 — 2023-03-14
- 1.0.7 — 2023-03-14
- 1.0.6 — 2023-03-13
- 1.0.5 — 2023-03-13
- 1.0.4 — 2023-03-13
- 1.0.3 — 2023-03-13
- 1.0.2 — 2023-03-13
- 1.0.1 — 2023-03-13
- 1.0.0 — 2023-03-13

## README

# 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 中

### 安装教程

```js
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 }} />
```

### 使用说明

```js
/**
   *列表数据
   *
   * @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
```

---
_Source: https://npm.io/package/use-antd-resizable-header-for-cmss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._