告别Form，RaETable表格列宽度支持拖动调整了，附带原理说明

开发运维 2023-08-09 大猫手机阅读

raETable是react antd Easy Table 的缩写。旨在让开发者在react中使用 antd的Table时更 easy。

Github: https://github.com/mmdctjj/raetable

npm: https://www.npmjs.com/package/raetable

文档：https://mmdctjj.github.io/raetable

🚀 变更内容

最近工作的需求变动，antd表格的宽度需要支持拖动调整。

调研了一圈，呼声最高的方案是使用react-resizable库实现。

实现之后发现这个功能特别适合 RaETable 于是，我也给这个组件增加了这个功能。不过，不用担心，这个功能默认是关闭的，当你设置resize为 true 时才会开启该功能。

效果可以直接看这个示例

图片

录制的工具限制，只有15帧动画，感兴趣的话可以到官网实际操作下。

https://mmdctjj.github.io/raetable/components/e-table#表格宽度自适应

🚀 实现原理

实现原理：

react-resizable提供了Resizable组件用于包括th元素，成为可以拖拽的元素。
采用antd``Table组件提供的components属性，覆盖表头元素
每次拖拽之后将最新的列宽度值设置为列的真实宽度值

https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129

 export interface TableComponents {
  table?: CustomizeComponent;
  header?: {
    wrapper?: CustomizeComponent;
    row?: CustomizeComponent;
    cell?: CustomizeComponent;
  };
  body?:
    | CustomizeScrollBody
    | {
        wrapper?: CustomizeComponent;
        row?: CustomizeComponent;
        cell?: CustomizeComponent;
      };
}

🚀 实现过程

💎 重写表头组件

 import { Resizable, ResizeCallbackData } from 'react-resizable';
import 'react-resizable/css/styles.css';
 
const ResizableTitle = (props: {
  [x: string]: any;
  onResize: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
  width: number;
}) => {
  const { onResize, width, ...restProps } = props;
 
  if (!width) {
    return ;
  }
 
  return (
    
      
    
  );
};

💎 覆盖表头组件

 const ResizeTable = ( 
  props: JSX.IntrinsicAttributes &
    TableProps & { children?: React.ReactNode } & {
      ref?: React.Ref | undefined;
    },
 ) => {
  const [columns, setColumns] = useState(props.columns ?? []);
 
  return (
    
  );
};💎 动态的更新表格列宽度const handleResize =
    (index: number) =>
    (event: any, { size }: any) => {
      setColumns((prevColumns) => {
        const nextColumns = [...prevColumns];
        nextColumns[index] = {
          ...nextColumns[index],
          width: size.width,
        };
        return nextColumns;
      });
    };
 
  const resizableColumns = columns?.map((col: any, index: number) => ({
    ...col,
    onHeaderCell: (column: { width: number }) => ({
      width: column.width,
      onResize: handleResize(index),
    }),
  }));完整代码如下import { Table, TableProps } from 'antd';
import React, { useState } from 'react';
import { Resizable, ResizeCallbackData } from 'react-resizable';
import 'react-resizable/css/styles.css';
 
const ResizableTitle = (props: {
  [x: string]: any;
  onResize: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
  width: number;
}) => {
  const { onResize, width, ...restProps } = props;
 
  if (!width) {
    return 
 
 
 
;
  }
 
  return (
    
      
    
  );
};
 
const ResizeTable = ( 
  props: JSX.IntrinsicAttributes &
    TableProps & { children?: React.ReactNode } & {
      ref?: React.Ref | undefined;
    },
 ) => {
  const [columns, setColumns] = useState(props.columns ?? []);
 
  const handleResize =
    (index: number) =>
    (event: any, { size }: any) => {
      setColumns((prevColumns) => {
        const nextColumns = [...prevColumns];
        nextColumns[index] = {
          ...nextColumns[index],
          width: size.width,
        };
        return nextColumns;
      });
    };
 
  const resizableColumns = columns?.map((col: any, index: number) => ({
    ...col,
    onHeaderCell: (column: { width: number }) => ({
      width: column.width,
      onResize: handleResize(index),
    }),
  }));
 
  return (
    
  );
};
 
export default ResizeTable;🎉 最后RaETable 是我独立开发的antd基于table组件的一揽子生态集合，常常用于B端业务处理，在敏捷开发场景事半功倍，效果显著，希望可以帮助更多的开发者。react
                            
                    
                        
                            上一篇
                            使用AIGC工具提升安全工作效率
                        
                    
                
                                        
                    
                        
                            下一篇
                            Spring合理使用编程事务提升N倍性能的操作
                        
                    
                
                    
			相关推荐
             
            
                
                    
                        Rust 写脚手架，Clap你应该知道的二三事
                    
                    
                        有感而发 最近，在和前端小伙伴聊天发现，在2024年，她们都有打算入局Rust学习的行列。毕竟前端现在太卷了，框架算是走到「穷途末路」了，无非就是在原有基础上修修补补。所有他们想在新的赛道弯道超车。但是，苦于各种原因，迟迟找不到入门之法。 确实如她们所言，Rust由于学习路径比较陡峭，加之和前端语言可以说是交集很少。然后，给大家一种学了马上就会忘记的感觉。并且，由于现在Rust在前端领域的应用少之
                    
                    
                        开发运维
                        2024-03-11
                        大猫
                    
                
                
                    
                        
                    
                
            
             
            
                
                    
                        如何解决Java时间格式化异常（DateTimeFormatException）
                    
                    
                        如何解决Java时间格式化异常（DateTimeFormatException） 引言：Java是一种广泛应用的编程语言，在处理日期和时间时经常会遇到格式化异常（DateTimeFormatException）。本文将介绍如何解决Java中的时间格式化异常，并提供一些代码示例。 一、什么是时间格式化异常（DateTimeFormatException）在Java中，时间格式化异常指的是在将字符串转
                    
                    
                        开发运维
                        2023-08-28
                        大猫
                    
                
                
                    
                        
                    
                
            
             
            
                
                    
                        【Java基础学习打卡13Java开发工具
                    
                    
                        前言 本文主要了解什么是 IDE，Java 编程开发主流的 IDE 有哪些？为什么不建议过早使用 IDE？不使用 IDE，我们要使用什么工具进行入门学习呢？ 一、主流IDE IDE 是 Integrated Development Environment 的缩写，也就是集成开发环境的意思。IDE 是一种为编写、调试和发布软件程序提供了完整工具集的应用程序。IDE 通常包括代码编辑器、编译器、调试器
                    
                    
                        开发运维
                        2023-07-14
                        大猫
                    
                
                
                    
                        
                    
                
            
             
            
                
                    
                        PHP 函数的闭包函数如何创建？
                    
                    
                        php中的闭包函数是嵌套在另一个函数中的匿名函数，可以访问外部函数的变量。使用use关键字可以在闭包函数中访问外部变量，可以在实战中应用于需要对列表中的每个元素应用折扣的场景。 PHP 函数中的闭包函数 闭包函数是嵌套在另一个函数中的匿名函数，它可以访问外部函数的变量，即使外部函数已经返回。闭包函数在 PHP 中非常有用，因为它允许创建可重复使用的代码块并保持对外部环境的访问。 创建闭包函数 要用
                    
                    
                        开发运维
                        2024-04-10
                        大猫
                    
                
                
                    
                        
                    
                
            
             
            
                
                    
                        PHP 相等性比较：深入理解 == 运算符的运作机制
                    
                    
                        php 中的相等性比较涉及 == 运算符。它有两种类型：严格比较 (===) 和非严格比较 (==)。后者可能产生意外结果，因为不同类型的变量可以被转换为相同类型后再进行比较。要确保值相等且类型相同，应使用严格比较。 PHP 相等性比较：深入理解 == 运算符的运作机制 简介 PHP 中的相等性比较至关重要，因为它决定了变量和值的相等性，影响着程序的逻辑和行为。了解 == 运算符的运作机制对于编写
                    
                    
                        开发运维
                        2024-04-09
                        大猫
                    
                
                
                    
                        
                    
                
            
             
        
        
            
                            
            站点声明：本站部分内容转载自网络，作品版权归原作者及来源网站所有，任何内容转载、商业用途等均须联系原作者并注明来源。
            相关侵权、举报、投诉及建议等，请发邮件至E-mail：service@mryunwei.com
            
            
                
            
            
            
                Copyright document.currentScript.insertAdjacentHTML('afterEnd',new Date().getFullYear())2025 每日运维  浙ICP备2022017665号-3
                
                基于WordPress | 由七牛云提供 CDN 加速
            
        
    回到顶部
 
 
                        
        
                
        
    
    
    var qrcode=new QRCode("qrcode",{text:window.location.href,width:128,height:128,correctLevel:QRCode.CorrectLevel.H});
    hljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad();function highlightjs(){$("code.hljs").each(function(i,block){hljs.lineNumbersBlock(block)})}document.addEventListener("highlightjs",highlightjs,false);
    
    
    
    
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/yumu-main\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
 
console.log("\n %c 本站由WPOPT插件优化 %c www.lovestu.com/wpopt.html", "color:#fff;background:#3983e2;padding:5px 0;", "color:#eee;background:#f0f0f0;padding:5px 10px;");
/* <![CDATA[ */
var wpopt = {"ajax_url":"https:\/\/www.mryunwei.com\/wp-admin\/admin-ajax.php","ajax_name":"wp_opt","is_post":"1","post_id":"302805","module_post_views_open":"","module_site_notice_open":""};
/* ]]> */
 
 
 
    
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?8c44c5512f324cbc0b129f413acc2930";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

	export interface TableComponents {
	table?: CustomizeComponent;
	header?: {
	wrapper?: CustomizeComponent;
	row?: CustomizeComponent;
	cell?: CustomizeComponent;
	};
	body?:
	\| CustomizeScrollBody
	\| {
	wrapper?: CustomizeComponent;
	row?: CustomizeComponent;
	cell?: CustomizeComponent;
	};
	}

	import { Resizable, ResizeCallbackData } from 'react-resizable';
	import 'react-resizable/css/styles.css';

	const ResizableTitle = (props: {
	[x: string]: any;
	onResize: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) \| undefined;
	width: number;
	}) => {
	const { onResize, width, ...restProps } = props;

	if (!width) {
	return ;
	}

	return (



	);
	};

	const ResizeTable = (
	props: JSX.IntrinsicAttributes &
	TableProps & { children?: React.ReactNode } & {
	ref?: React.Ref \| undefined;
	},
	) => {
	const [columns, setColumns] = useState(props.columns ?? []);

	return (

	);
	};💎 动态的更新表格列宽度const handleResize =
	(index: number) =>
	(event: any, { size }: any) => {
	setColumns((prevColumns) => {
	const nextColumns = [...prevColumns];
	nextColumns[index] = {
	...nextColumns[index],
	width: size.width,
	};
	return nextColumns;
	});
	};

	const resizableColumns = columns?.map((col: any, index: number) => ({
	...col,
	onHeaderCell: (column: { width: number }) => ({
	width: column.width,
	onResize: handleResize(index),
	}),
	}));完整代码如下import { Table, TableProps } from 'antd';
	import React, { useState } from 'react';
	import { Resizable, ResizeCallbackData } from 'react-resizable';
	import 'react-resizable/css/styles.css';

	const ResizableTitle = (props: {
	[x: string]: any;
	onResize: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) \| undefined;
	width: number;
	}) => {
	const { onResize, width, ...restProps } = props;

	if (!width) {
	return



	;
	}

	return (



	);
	};

	const ResizeTable = (
	props: JSX.IntrinsicAttributes &
	TableProps & { children?: React.ReactNode } & {
	ref?: React.Ref \| undefined;
	},
	) => {
	const [columns, setColumns] = useState(props.columns ?? []);

	const handleResize =
	(index: number) =>
	(event: any, { size }: any) => {
	setColumns((prevColumns) => {
	const nextColumns = [...prevColumns];
	nextColumns[index] = {
	...nextColumns[index],
	width: size.width,
	};
	return nextColumns;
	});
	};

	const resizableColumns = columns?.map((col: any, index: number) => ({
	...col,
	onHeaderCell: (column: { width: number }) => ({
	width: column.width,
	onResize: handleResize(index),
	}),
	}));

	return (

	);
	};

	export default ResizeTable;🎉 最后RaETable 是我独立开发的antd基于table组件的一揽子生态集合，常常用于B端业务处理，在敏捷开发场景事半功倍，效果显著，希望可以帮助更多的开发者。react



	上一篇
	使用AIGC工具提升安全工作效率






	下一篇
	Spring合理使用编程事务提升N倍性能的操作




	相关推荐




	Rust 写脚手架，Clap你应该知道的二三事


	有感而发最近，在和前端小伙伴聊天发现，在2024年，她们都有打算入局Rust学习的行列。毕竟前端现在太卷了，框架算是走到「穷途末路」了，无非就是在原有基础上修修补补。所有他们想在新的赛道弯道超车。但是，苦于各种原因，迟迟找不到入门之法。确实如她们所言，Rust由于学习路径比较陡峭，加之和前端语言可以说是交集很少。然后，给大家一种学了马上就会忘记的感觉。并且，由于现在Rust在前端领域的应用少之


	开发运维
	2024-03-11
	大猫












	如何解决Java时间格式化异常（DateTimeFormatException）


	如何解决Java时间格式化异常（DateTimeFormatException）引言：Java是一种广泛应用的编程语言，在处理日期和时间时经常会遇到格式化异常（DateTimeFormatException）。本文将介绍如何解决Java中的时间格式化异常，并提供一些代码示例。一、什么是时间格式化异常（DateTimeFormatException）在Java中，时间格式化异常指的是在将字符串转


	开发运维
	2023-08-28
	大猫












	【Java基础学习打卡13Java开发工具


	前言本文主要了解什么是 IDE，Java 编程开发主流的 IDE 有哪些？为什么不建议过早使用 IDE？不使用 IDE，我们要使用什么工具进行入门学习呢？一、主流IDE IDE 是 Integrated Development Environment 的缩写，也就是集成开发环境的意思。IDE 是一种为编写、调试和发布软件程序提供了完整工具集的应用程序。IDE 通常包括代码编辑器、编译器、调试器


	开发运维
	2023-07-14
	大猫












	PHP 函数的闭包函数如何创建？


	php中的闭包函数是嵌套在另一个函数中的匿名函数，可以访问外部函数的变量。使用use关键字可以在闭包函数中访问外部变量，可以在实战中应用于需要对列表中的每个元素应用折扣的场景。 PHP 函数中的闭包函数闭包函数是嵌套在另一个函数中的匿名函数，它可以访问外部函数的变量，即使外部函数已经返回。闭包函数在 PHP 中非常有用，因为它允许创建可重复使用的代码块并保持对外部环境的访问。创建闭包函数要用


	开发运维
	2024-04-10
	大猫












	PHP 相等性比较：深入理解 == 运算符的运作机制


	php 中的相等性比较涉及 == 运算符。它有两种类型：严格比较 (===) 和非严格比较 (==)。后者可能产生意外结果，因为不同类型的变量可以被转换为相同类型后再进行比较。要确保值相等且类型相同，应使用严格比较。 PHP 相等性比较：深入理解 == 运算符的运作机制简介 PHP 中的相等性比较至关重要，因为它决定了变量和值的相等性，影响着程序的逻辑和行为。了解 == 运算符的运作机制对于编写


	开发运维
	2024-04-09
	大猫













	站点声明：本站部分内容转载自网络，作品版权归原作者及来源网站所有，任何内容转载、商业用途等均须联系原作者并注明来源。
	相关侵权、举报、投诉及建议等，请发邮件至E-mail：service@mryunwei.com






	Copyright document.currentScript.insertAdjacentHTML('afterEnd',new Date().getFullYear())2025 每日运维浙ICP备2022017665号-3

	基于WordPress \| 由七牛云提供 CDN 加速


	回到顶部








	var qrcode=new QRCode("qrcode",{text:window.location.href,width:128,height:128,correctLevel:QRCode.CorrectLevel.H});
	hljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad();function highlightjs(){$("code.hljs").each(function(i,block){hljs.lineNumbersBlock(block)})}document.addEventListener("highlightjs",highlightjs,false);




	{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/"},{"not":{"href_matches":["\/wp-.php","\/wp-admin\/","\/uploads\/","\/wp-content\/","\/wp-content\/plugins\/","\/wp-content\/themes\/yumu-main\/","\/\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}

	console.log("\n %c 本站由WPOPT插件优化 %c www.lovestu.com/wpopt.html", "color:#fff;background:#3983e2;padding:5px 0;", "color:#eee;background:#f0f0f0;padding:5px 10px;");
	/* <![CDATA[ */
	var wpopt = {"ajax_url":"https:\/\/www.mryunwei.com\/wp-admin\/admin-ajax.php","ajax_name":"wp_opt","is_post":"1","post_id":"302805","module_post_views_open":"","module_site_notice_open":""};
	/* ]]> */




	var _hmt = _hmt \|\| [];
	(function() {
	var hm = document.createElement("script");
	hm.src = "https://hm.baidu.com/hm.js?8c44c5512f324cbc0b129f413acc2930";
	var s = document.getElementsByTagName("script")[0];
	s.parentNode.insertBefore(hm, s);
	})();