@towavephone/react-antd-column-resize v1.0.4

中文文档 | English

简介

react-antd-column-resize 是一个基于 react hooks 开发的 antd 表格(table)列宽拖动组件， 支持 antd4、antd5 和 ant-design/pro-components 以及所有基于 antd 开发的 table 组件。 其核心 hooksuseAntdColumnResize，可以自定义拖动的最小宽度、最大宽度和默认宽度方便快捷。 已经使用 antd4、antd5 官网中的 table 示例例进行测试，可以正常使用。

安装

npm install --save react-antd-column-resize

# or use yarn

yarn add react-antd-column-resize

使用

import { Button, Divider, Table } from 'antd';
import React from 'react';
import { useAntdColumnResize } from 'react-antd-column-resize';

const App = () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      width: 300,
    },
    {
      title: 'phone',
      dataIndex: 'phone',
      key: 'phone',
      fixed: 'right',
      //width:"必须有一项不设置宽度，不然会造成拖动异常"
      //width:"必须有一项不设置宽度，不然会造成拖动异常"
      //width:"必须有一项不设置宽度，不然会造成拖动异常"
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Doe',
      age: 32,
      address: '123 Street, City',
      phone: '1588553336',
    },
    {
      key: '2',
      name: 'Jane Smith',
      age: 28,
      address: '456 Road, Town',
      phone: '1588553336',
    },
  ];
  const { resizableColumns, components, tableWidth, resetColumns } =
    useAntdColumnResize(() => {
      return { columns, minWidth: 100 };
    }, []);

  return (
    <div className="app">
      <Button onClick={resetColumns}>重置Columns</Button>
      <Divider />
      <Table
        columns={resizableColumns}
        dataSource={data}
        components={components}
        bordered
        scroll={{ x: tableWidth }}
      />
    </div>
  );
};

export default App;

useAntdColumnResize API

useAntdColumnResize(setup: () => resizeDataType, dependencies: any[])

resizeDataType setup 返回数据类型

useAntdColumnResize 返回数据

注意事项(请一定阅读，请一定阅读，请一定阅读，尤其是第二项)

1. columns 设置每项 width 时，默认该项是可拖动项。
2. columns 至少需要一项不设置 width，否则会拖动异常，minWidth 默认是未设置项宽度的最小宽度。 原因：当 columns 每项设置的宽度之和小于表格宽度时，会造成拖动异常，所以需要至少一项不设置宽度，让其自适应。
3. minWidth、maxWidth 代表可拖动的距离，建议 minWidth等于 columns 设置的最小宽度项，最大宽度同理应大于columns 设置的最大宽度项。
4. 请不要欺骗useAntdColumnResize，dependencies 依赖项请按需添加，否则会造成无限循环。

贡献

如果对您有帮助希望动动您发财的小手，给个 star 吧！

欢迎贡献代码、提出问题或者改进建议。请查阅贡献指南了解更多详情。

Stargazers over time