【前端】React + Antd5 + react-resizable 实现 Table 拖拽调整列宽源码

原创

于 2025-07-15 16:46:49 发布 · 468 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

文章目录

技术概要

自从antd 3.x 之后官网上没有对应的例子了，于是采用了同样的方式来实现，并封装成比较通用的组件。

通过 Antd 中 Table 提供的components 属性来重写header并集成 react-resizable 来实现可伸缩列。

技术细节

安装react-resizable
table的columns需要给每一项设置width或者在ResizableTable组件中使用默认宽度。

组件源码

表头单元格组件：TableHeaderCell组件借助react-resizable库来实现列宽调整功能。对于特定的列，像选择列或者滚动条列，会把调整功能隐藏起来。
状态管理：ResizeTable组件内部维护着tableColumns状态，这个状态会在列宽改变时进行更新。
列宽调整处理：handleResize函数会更新对应的列宽，同时触发外部传入的回调函数onTitleResize。
列配置：通过onHeaderCell属性为每个表头单元格添加调整功能。

import {
   
    Table } from "antd";
import type {
   
    ColumnsType, TableProps } from "antd/lib/table";
import React, {
   
    useEffect } from "react";
import {
   
    Resizable } from "react-resizable";
import "react-resizable/css/styles.css";

const TableHeaderCell: React.FC<Record<string, any>> = (props) => {
   
   
  const {
   
    onResize, width, hiddenResize, className, ...restProps } = props;

  if (
    hiddenResize ||
    className.includes("ant-table-selection-column") ||
    className.includes("ant-table-cell-scrollbar")
  ) {
   
   
    return <th className={
   
   `${
     
     className} select-none`} {
   
   ...restProps} />;
  }

  return (
    <Resizable
      width={
   
   width}
      height={
   
   0}
      onResize={
   
   onResize}
      draggableOpts=