react antd table拖拽

下载node包

npm install react-resizable -D
npm install @types/react-resizable --save-dev

定义一个公用组建 ResizableTable.tsx

import { useEffect, useState } from "react";
import { Resizable } from "react-resizable";
import "./resize.scss"
import { Table } from 'antd';
const ResizableTitle = (props: any) => {const { onResize, width, ...restProps } = propsif (!width) { return <th {...restProps} /> }return (<Resizablewidth={width}height={0}handle={<span className="react-resizable-handle" onClick={(e) => { e.stopPropagation() }} />}onResize={onResize}draggableOpts={{ enableUserSelectHack: false }}><th {...restProps} /></Resizable>)
}/*** ant-table 可伸缩列* @param props* @returns*/
const ResizableTable = (props: any) => {const [columns, setColumns] = useState([]);useEffect(() => {if (props.columns) {setColumns(props.columns)}}, [props.columns]);const handleResize = (index: number) => (_: any, { size }: any) => {const newColumns: any = [...columns];newColumns[index] = {...newColumns[index],width: size.width,};setColumns(newColumns);};const mergeColumns = columns.map((col: any, index) => ({...col,onHeaderCell: (column: any) => ({width: column.width,onResize: handleResize(index),}),}));return (<div className="resizeTable"><Table{...props}components={{header: {cell: ResizableTitle}}}scroll={{ x: 900 }}columns={mergeColumns}dataSource={props.dataSource}/></div>)
}export default ResizableTable

定义样式文件 resize.scss

.resizeTable { .react-resizable {position: relative;background-clip: padding-box;user-select: none;}// 防止默认出现横向滚动条.ant-table-content>table{min-width: calc(100% - 5px)!important;}.react-resizable-handle {position: absolute;width: 10px;height: 100%;bottom: 0;right: -5px;cursor: col-resize;background-image: none;z-index: 1;}
}

然后就可以愉快的使用了,使用实例(只需要换个名字就好了,其他和正常使用table没有区别,但是要有宽度哦,不然没办法拖拽)
 

<ResizableTable dataSource={dataSource} columns={columns} />;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python + Scrapy + Django构建企业级爬虫平台

引言 在大数据时代&#xff0c;信息就是力量。对于企业而言&#xff0c;掌握行业动态、竞品分析、市场趋势等关键数据&#xff0c;是决策制定的重要依据。然而&#xff0c;手动收集这些信息既费时又低效。因此&#xff0c;自动化数据采集变得至关重要。本文将向你展示如何使用…

专业条码二维码扫描设备和手机二维码扫描软件的区别?

条码二维码技术已广泛应用于我们的日常生活中&#xff0c;从超市结账到公交出行&#xff0c;再到各类活动的入场验证&#xff0c;条码二维码的便捷性不言而喻&#xff0c;而在条码二维码的扫描识别读取过程中&#xff0c;专业扫描读取设备和手机二维码扫描软件成为了两大主要工…

- vuex路由:

vuex vue的状态管理工具(状态就是数据的管理仓库 话语中级语法modules是vuex的高级用法。 react---redux(状态管理工具) vue2--vuex vue3--pinia(小菠萝) 核心概念(是有五个): 1.state:--存放数据 2.getters:计算属性的&#xff0c;通过筛选数组中大于2的&#xff0c;需要…

MySQL表操作(增删改查)

添加字段 ALTER TABLE 表名 ADD 字段名字 类型&#xff08;长度&#xff09;[COMMENT 注释] [自己给当前字段注释命名];修改字段 &#xff08;1&#xff09;仅仅修改指定字段的一些属性&#xff0c;不能重命名 ALTER TABLE 表名 字段名 新数据类型&#xff08;长度);&#x…

ssh升级

文章目录 ssh升级一、解包ssh、ssl二、更新安装ssl三、手动更新手动复制库文件四、创建符号链接五、更新库路径六、验证库文件七、设置库路径环境变量八、配置、编译、安装OpenSSH&#xff1a;意外&#xff1a;缺少 zlib 的开发库解决方法&#xff1a; 九、刷新ssh服务、查看ss…

力扣第九题

回文数 提示&#xff1a; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 代码展示&#…

用GPT 4o提高效率

**GPT-4o可以通过提高编程效率、优化工作流程、增强文档管理和知识分享等多方面帮助用户提升工作效率**。具体如下&#xff1a; 1. **代码生成与优化** - **快速原型开发**&#xff1a;程序员可以通过向GPT-4o描述需求或功能来生成初步的代码框架或关键函数&#xff0c;从而节省…

TCP流量控制是怎么实现的?

流量控制就是让发送方发送速率不要过快&#xff0c;让接收方来得及接收。利用滑动窗口机制就可以实施流量控制&#xff0c;主要方法就是动态调整发送方和接收方之间数据传输速率。 发送方维护一个窗口&#xff0c;表示可以发送但尚未被确认的数据量。接收方同样维护一个窗口&a…

C基础入门题:石头剪刀布

1.题目描述 石头剪子布&#xff0c;是一种猜拳游戏。起源于中国&#xff0c;然后传到日本、朝鲜等地&#xff0c;随着亚欧贸易的不断发展它传到了欧洲&#xff0c;到了近现代逐渐风靡世界。简单明了的规则&#xff0c;使得石头剪子布没有任何规则漏洞可钻&#xff0c;单次玩法…

网络安全法律框架更新:最新合规要求与企业应对策略

网络安全法律框架的最新更新 近期&#xff0c;中国的网络安全法律框架经历了重要的更新。2022年&#xff0c;《网络安全法》迎来了首次修改&#xff0c;这一修订主要是为了与《数据安全法》和《个人信息保护法》等新实施的法律进行衔接协调&#xff0c;完善法律责任制度&#x…

slf4j日志框架和logback详解

slf4j作用及其实现原理 SLF4J&#xff08;Simple Logging Facade for Java&#xff09;是一种日志框架的抽象层&#xff0c;它并不是一个具体的日志实现&#xff0c;而是一个接口或门面&#xff08;Facade&#xff09;&#xff0c;旨在为各种不同的日志框架提供一个统一的API。…

AI绘画Stable Diffusion 零基础入门 —AI 绘画原理与工具介绍,万字解析AI绘画的使用教程

大家好&#xff0c;我是设计师阿威 想要入门 AI 绘画&#xff0c;首先需要了解它的原理是什么样的。 其实很早就已经有人基于深度学习模型展开了对图像生成的研究了&#xff0c;但在那时&#xff0c;生成的图像分辨率和内容都非常抽象。 直到近两年&#xff0c;AI 产出的图像…

防火墙nat基础实验

一&#xff0c;实验拓扑&#xff1a; 二&#xff0c;实验需求&#xff1a; 1&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2&#xff0c;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的ht…

俄罗斯VK 平台广告投放的注意事项有哪些?

以下是为您制定适合 VK 平台的广告投放策略的一些建议&#xff1a; 市场调研 深入了解俄罗斯市场的需求、趋势和竞争情况。 分析目标受众的兴趣、行为和消费习惯&#xff0c;以确定最有潜力的细分市场。 明确目标 确定具体、可衡量的广告目标&#xff0c;例如增加品牌知名度…

Appium自动化测试系列: 2. 使用Appium启动APP(真机)

历史文章&#xff1a;Appium自动化测试系列: 1. Mac安装配置Appium_mac安装appium-CSDN博客 一、准备工作 1. 安卓测试机打开调试模式&#xff0c;然后使用可以传输数据的数据线连接上你的电脑。注意&#xff1a;你的数据线一定要支持传输数据&#xff0c;有的数据线只支持充…

蔚来汽车:拥抱TiDB,实现数据库性能与稳定性的飞跃

作者&#xff1a; Billdi表弟 原文来源&#xff1a; https://tidb.net/blog/449c3f5b 演讲嘉宾&#xff1a;吴记 蔚来汽车Tidb爱好者 整理编辑&#xff1a;黄漫绅&#xff08;表妹&#xff09;、李仲舒、吴记 本文来自 TiDB 社区合肥站走进蔚来汽车——来自吴记老师的演讲…

java数组之——了解十大排序算法(动画版)

详细的冒泡排序和快速排序请查看文章&#xff1a;java数组之冒泡排序、快速排序-CSDN博客https://blog.csdn.net/weixin_44554794/article/details/140361078 一、插入排序 二、希尔排序 三、选择排序 四、堆排序 五、冒泡排序 六、快速排序 七、归并排序 八、计数排序 九、桶…

【2024_CUMCM】时间序列1

目录 概念 时间序列数据 时期和时点时间序列 数值变换规律 长期趋势T 季节趋势S 循环变动C 不规则变动I 叠加和乘积模型 叠加模型 相互独立 乘积模型 相互影响 注 spss缺失值填补 简单填补 五种填补方法 填补原则 1.随机缺失 2.完全随机缺失 3.非随机缺失…

半小时获得一张ESG入门证书【详细中英文笔记一】

前些日子&#xff0c;有朋友转发了一则小红书的笔记给我&#xff0c; 标题是《半小时获CFI官方高颜值免费证书 ESG认证》。这对考证狂魔的我来说&#xff0c;必然不能错过啊&#xff0c;有免费的羊毛不薅白不薅。 ESG课程的 CFI 官方网址戳这里&#xff1a;CFI 于是信心满满的…

「iOS」暑假第一周 —— ZARA的仿写

暑假第一周 ZARA的仿写 文章目录 暑假第一周 ZARA的仿写写在前面viewDidLoad 之中的优先级添加自定义字体下载想要的字体添加至info之中找到字体名字并应用 添加应用图标和启动页面 写在前面 暑假第一周留校学习&#xff0c;对于ZARA进行了仿写&#xff0c;在仿写的过程之中&a…