react-antd-column-resize(让你的table列可以拖拽列宽)

在前端开发中,表格是一种常见且重要的组件,用于展示大量的数据。Ant Design(简称 antd)是一个非常流行的 React UI 组件库,其中的 Table 组件功能强大且易于使用。然而,原生的 Table 组件并没有提供列宽拖拽调整的功能。为了实现这一功能,我们可以借助 react-antd-column-resize 这个库。

react-antd-column-resize

简介

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

安装

css 复制代码
npm install --save react-antd-column-resize

# or use yarn

yarn add react-antd-column-resize

使用

javascript 复制代码
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;

地址

varown.github.io/react-antd-...

useAntdColumnResize API

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

参数 说明 类型 默认值
setup 获取列配置函数 () => resizeDataType<Column> -
dependencies 更新依赖项 any[] -

resizeDataType setup 返回数据类型

参数 说明 类型 默认值
columns 列配置 object[] antd table columns -
minWidth 最小宽度 number 120
maxWidth 最大宽度 number 2000

返回数据

参数 说明 类型 默认值
resizableColumns 可拖动列配置 object[] antd table columns -
components antd table 组件 object -
tableWidth 表格宽度 number -
resetColumns 重置列 function -

注意事项

  1. columns 设置每项 width 时,默认该项是可拖动项,并且请确保含有唯一标识(dataIndex或者key)。
  2. columns 至少需要一项不设置 width,否则会拖动异常,minWidth 默认是未设置项宽度的最小宽度。 原因:当 columns 每项设置的宽度之和小于表格宽度时,会造成拖动异常,所以需要至少一项不设置宽度,让其自适应。
  3. minWidthmaxWidth 代表可拖动的距离,建议 minWidth等于 columns 设置的最小宽度项,最大宽度同理应大于columns 设置的最大宽度项。
  4. 请不要欺骗useAntdColumnResizedependencies 依赖项请按需添加,否则会造成无限循环。
相关推荐
兮山与1 小时前
前端1.0
前端
王者鳜錸3 小时前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-邮箱重置密码
前端·vue.js·spring boot
独泪了无痕5 小时前
深入浅析Vue3中的生命周期钩子函数
前端·vue.js
小白白一枚1115 小时前
vue和react的框架原理
前端·vue.js·react.js
字节逆旅5 小时前
从一次爬坑看前端的出路
前端·后端·程序员
若梦plus6 小时前
微前端之样式隔离、JS隔离、公共依赖、路由状态更新、通信方式对比
前端
若梦plus6 小时前
Babel中微内核&插件化思想的应用
前端·babel
若梦plus6 小时前
微前端中微内核&插件化思想的应用
前端
若梦plus6 小时前
服务化架构中微内核&插件化思想的应用
前端
若梦plus6 小时前
Electron中微内核&插件化思想的应用
前端·electron