react-antd-column-resize 实现 Ant Design 表格列宽拖动

最新推荐文章于 2024-03-27 17:08:18 发布
VIP文章 最新推荐文章于 2024-03-27 17:08:18 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46446590/article/details/131577510
版权

当今的Web应用开发中，表格是一个非常常见且重要的组件。然而，许多开发者在使用表格组件时常常面临一个问题：如何让表格的列宽度可以拖动调整？

针对这个问题，我近期发现了一个非常实用的React组件：react-antd-column-resize。这是一个基于React Hooks开发的组件，专门用于实现Ant Design表格（table）的列宽度拖动调整功能。它不仅支持Ant Design 4和Ant Design 5，还适用于基于Ant Design开发的其他所有表格组件。

该组件的核心是一个自定义的Hooks：useAntdColumnResize。通过使用这个Hooks，你可以轻松地定义拖动调整列宽度的最小宽度、最大宽度和默认宽度。经过我测试，它可以与Ant Design官方文档中的表格示例完美配合使用。

安装这个组件非常简单，你只需要在命令行中运行以下命令：

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

# 或者使用 yarn

yarn add react-antd-column-resize

在你的React组件中，你可以按照下面的代码示例来使用react-antd-column-resize：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  varown
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
React(hook)基于antd Table实现可拖拽调整列宽的表格

				
			

			

				

					weixin_38884718的博客
				

				

					03-29
					
					6095
					
				

			

		

		

			
				
React基于antd  Table实现可拖拽调整列宽的表格
前言
       在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。
       用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？
实现功能
1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无

			
		

	



                

              
                



	

		

			

				
					
react-antd-admin:React和Ant Design搭建后台

				
			

			

				

					04-27
				

			

		

		

			
				
react-antd-admin

			
		

	



                


  
              

                


	

		

			

				
					
react-mutable-list:React的可拖动，可拖放和可删除列表组件

				
			

			

				

					05-01
				

			

		

		

			
				
可变列表
React的。 它仍在积极开发中，并且仍在发现错误，因此欢迎在github上发布问题。 文档是由react-docgen生成的，可以在docs文件夹中找到。
安装
只需安装
npm install react-mutable-list
功能以三种不同的方式公开：
 src/ es6 / jsx文件
在lib/具有commonJS导出的es5文件
一个预打包的版本，其中整个React库位于dist/list.js
例子
此示例显示用户如何处理onReorder和onRemove回调。 控制器负责管理传递到列表中的内容，并使用onReorder和onRemove回调处理列表中的相应事件。
 import React from 'react'
import { List , ListItem } from 'react-mutable-list'
class Controller ex

			
		

	





	

		

			

				
					
react-antd-admin:由React.js和Ant-design设计的简单管理面板

				
			

			

				

					05-06
				

			

		

		

			
				
该项目是通过引导的。
可用脚本
在项目目录中，可以运行：
yarn start
 在开发模式下运行应用程序。 打开在浏览器中查看它。
 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。
yarn test
 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
yarn build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
 有关更多信息，请参见关于的部分。
yarn eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制

			
		

	



		

			
		



	

		

			

				
					
【react】react中使用antd的table实现拖拽列宽保存记忆功能

					
最新发布

				
			

			

				

					努力躺平
				

				

					03-27
					
					316
					
				

			

		

		

			
				
打印出来的 e 并没有我们想要的dataIndex和width，后面发现在调用时的onHeaderCell里column就是变更后的列，它将column.width作为width传递给了ResizeableTitle，同理，我们可将column传递过去，仅仅拿到改变后的列是不够的，我们还需要传递原有的state.columns。在开发的过程中，根据业务需求，想要实现表格的拖拽，并增加拖动结束后记忆功能，一一激励在开发的过程中遇到的困难点。以下为index.less的代码。

			
		

	





	

		

			

				
					
react + antd 实现表格的列宽可变，数据量大时页面刷新不卡顿

				
			

			

				

					weixin_48192626的博客
				

				

					10-28
					
					1494
					
				

			

		

		

			
				
有需求需要实现表格的列宽拖拉可变，在开始拖拉和放下的过程中在行头显示一条虚线表标明位置，鼠标释放后刷新表格。

上代码！

1. 拖拉传参组件代码


import { FC, useState } from 'react'
import { Resizable } from 'react-resizable'
// 引入react-resizable npm i xxx 或 yarn add xxx
import { deBounce } from '@/utils/utilConvenrt'
// 防抖

			
		

	





	

		

			

				
					
react antdesign table列可拖拽调整宽度

				
			

			

				

					weixin_45842655的博客
				

				

					07-06
					
					2093
					
				

			

		

		

			
				
react antdesign table列可拖拽调整宽度

			
		

	





	

		

			

				
					
【Ant Design Table + React】表格列伸缩实现

				
			

			

				

					yqdid的博客
				

				

					10-20
					
					1177
					
				

			

		

		

			
				
但我用这个插件后还是不太 OK，总有一些bug，比如如果拖动了不设置宽的列，整个伸缩就会变形；而且如果列数很多的情况下，自适应列效果不理想。需求背景：需要实现Antd Table 组件的列伸缩，宽度可以拖拽。在查阅资料时，看到有个大佬封装好了一个伸缩hook。必须保持一列宽度不设置，自适应。使用方便，效果理想，推荐使用这个插件。，使用起来方便简单。

			
		

	





	

		

			

				
					
基于antd table做一个可拖拽的列设置组件react

				
			

			

				

					qq_36216421的博客
				

				

					03-27
					
					483
					
				

			

		

		

			
				
可固定左右侧，显示隐藏列，可拖拽移动列的位置。

			
		

	





	

		

			

				
					
antd实现Table拖拽调整列宽

				
			

			

				

					weixin_46600931的博客
				

				

					01-30
					
					4603
					
				

			

		

		

			
				
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。

			
		

	





	

		

			

				
					
ant design vue a-table 列拖拽 后两列固定 前四列可拖动

				
			

			

				

					defined_的博客
				

				

					06-13
					
					1743
					
				

			

		

		

			
				
列拖拽时触发该方法
根据浏览器窗口调整表格的列宽 前四列变化 后两列固定
表格外层的div的样式 min-width用于控制浏览器窗口变化时的最小值

			
		

	





	

		

			

				
					
react中使用react-resizable实现antd的table表格列拖拽调整宽度

				
			

			

				

					white-hang的博客
				

				

					12-16
					
					1990
					
				

			

		

		

			
				
本篇文章主要讲述如何是使用react-resizable实现antd的table表格列拖拽调整宽度,并且在拖拽结束的时候更新列的位置。

			
		

	





	

		

			

				
					
react-antd-landing-page:使用React和Ant Design制作的登录页面

				
			

			

				

					05-28
				

			

		

		

			
				
React Ant设计登陆页面  我尝试使用React和Ant Design重新创建引导登录页面。 您可以在查看现场演示。  原始设计属于 。

			
		

	





	

		

			

				
					
react-antd-admin：用React和Ant Design构建的一个通用管理后台

				
			

			

				

					02-04
				

			

		

		

			
				
如果对React或Ant设计研究，但又不知如何进入手的话，也可以参考下这个项目。 需求背景 其实总结下就一句话：简化补充人员的前端开发。。。 虽然俺是个java开发，但总是难免要做一些前端的东西。诸如各种内部系统，...

			
		

	





	

		

			

				
					
react-antd-admin-template：一个基于React + Antd的后台管理模版，在线预览https：nlrx-wjc.github.ioreact-antd-admin-template

				
			

			

				

					02-05
				

			

		

		

			
				
是一个基于React和Ant Design的后台管理系统模板。它内置了用户登录/登出，动态路由，权限重置，用户管理等典型的业务模型，可以帮助您快速构建企业级中后台产品原型，是你接私活的不二之选。 本系统的开发灵感来自 ...

			
		

	





	

		

			

				
					
react + antd 实现表格可拖拽列宽

				
			

			

				

					foolcuntry的博客
				

				

					03-24
					
					4490
					
				

			

		

		

			
				
react + antd 实现表格可拖拽列宽

前言: 接到一个需求,需要实现表格的表头可以拖拽调节宽度

实现方式
react-resizable GitHub
首先百度寻找解决方案,很容易的,我们就找到了react-resizable,这个解决方案在antd 3.x 的文档中,表格 Table - Ant Design,但是在更高的版本中没有,如果不是百度,我应该永远找不到.
安装
npm install --save react-resizable

使用
官方提供的代码示例:
import { Ta

			
		

	





	

		

			

				
					
Ant Design + react-resizable实现列表页可拖拽宽度变化

				
			

			

				

					仗剑走天涯的博客
				

				

					12-28
					
					4233
					
				

			

		

		

			
				
Ant Design +react-resizable实现列表页可拖拽宽度变化



查找了下Ant Design中的Table组件，没有发现表格header列头可以拖拽实现宽度变化的功能，领导要想要这种效果，看了下当前的WEB的 第三方UI，可能只有Material-UI支持


import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';

但是Material-UI中的 DataGridPro在包'@mui/x-data-g...

			
		

	





	

		

			

				
					
React 列宽拖拽调整功能

				
			

			

				

					mingwei_zhu的博客
				

				

					05-14
					
					5146
					
				

			

		

		

			
				
新接了个需求，要求可以拖拽表格的borer进行列宽调整。看到这个需求，感觉so easy, 印象中所有的UI组件库都支持这个功能，然后去看antd文档，懵逼了。。。。 4.0版本找不到这种功能支持，然后面向百度了一波，发现这种功能在antd 3.x版本里面,直接上链接。

antd 文档传送门https://3x.ant.design/components/table-cn/#components-table-demo-drag-sorting

东西大差不差，4.x版本的antd也支持。个人实现代码如下.

			
		

	





	

		

			

				
					
react-resizable实现antd Table组件拖动改变列宽

				
			

			

				

					Sponge_bob_的博客
				

				

					10-22
					
					2539
					
				

			

		

		

			
				
import { Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import './style.css';

const ResizeableTitle = (props: any) => {
  const { onResize, width, ...restProps } = props;

 

			
		

	





	

		

			

				
					
react-antd-treetable

				
			

			

				

					08-30
				

			

		

		

			
				
react-antd-treetable是一个基于React和Ant Design框架开发的树形表格组件。该组件提供了一个功能强大且易用的界面，用于展示具有树形结构的数据。

react-antd-treetable组件主要特点如下：

1. 树形结构：组件支持展示具有树形结构的数据，每个节点可以包含子节点，形成层叠的树状布局。

2. 数据排序：可通过点击表头进行排序操作，对树形表格中的数据进行升序或降序排序。

3. 行选择：可以通过点击表格的行来选择或取消选择特定的行数据。同时，也支持通过选择父节点实现对整个子节点的选中或取消选中。

4. 编辑功能：支持在表格中对特定单元格的数据进行编辑，提供了输入框等组件供用户进行修改。

5. 展开/收起：可以通过点击加号和减号来展开或收起树形表格中的子节点，以便更清晰地查看和管理数据。

6. 异步加载：支持异步加载数据，可以根据需要动态加载子节点数据，提高了性能和效率。

7. 数据过滤：组件提供了一个搜索框，可以根据用户输入的关键字来过滤和筛选需要展示的数据，方便用户快速找到所需数据。

总的来说，react-antd-treetable是一个功能丰富且易于使用的树形表格组件，适用于需要展示树形数据结构的项目。无论是对于数据展示、编辑、排序、选择还是过滤等功能，该组件都提供了完善的解决方案，方便开发者快速构建出符合需求的树形表格界面。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值