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

最新推荐文章于 2025-03-10 16:17:00 发布

Sponge_bob_

最新推荐文章于 2025-03-10 16:17:00 发布

阅读量3k

点赞数 4

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Sponge_bob_/article/details/120906278

版权

本文介绍如何结合react-resizable库，实现在antd Table组件中通过拖动来动态改变列宽的功能。详细阐述了集成过程和关键代码实现，为react.js前端开发者提供了一种灵活调整表格布局的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

const ResizeTable: React.FC<any> = (props: any) => {

  const { columns, dataSource, ...rest} = props;

  const [cols, setCols] = useState<any>(props.columns);
  const colsRef = useRef<any[]>([]);


  const components = {
    header: {
      cell: ResizeableTitle,
    },
  };  

  useEffect(() => {
    setCols(props.columns);
  }, [props.columns])
  
  const handleResize = (index: any) => (e: any, { size }: any) => {
    const nextColumns = [...cols];

    nextColumns[index] = {
      ...nextColumns[index],
      width: size.width,
    };

    setCols(nextColumns);
  };

  colsRef.current = (cols || []).map((col: any, index: any) => ({
    ...col,
    onHeaderCell: (column: any) => ({
      width: column.width,
      onResize: handleResize(index),
    }),
  }))

  return (
    <div className="components-table-resizable-column">
      <Table 
        components={components}
        columns={colsRef.current}
        dataSource={props.dataSource}
      />
    </div>
  )
}

export default ResizeTable;

/* 内容过多以...显示 */
.ellipsisText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
/* 显示拖拽样式 */
.components-table-resizable-column .react-resizable {
    position: relative ;
    background-clip: padding-box;
}
.components-table-resizable-column .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -9px;
    cursor: col-resize;
    z-index: 1;
    border-left: white 1px solid;
}