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

作者：萌萌哒草头将军 2023-08-01 08:00:59开发 前端 实现之后发现这个功能特别适合 RaETable​ 于是列宽理说，我也给这个组件增加了这个功能。度支动调带原不过，持拖不用担心，整附这个功能默认是告别关闭的，当你设置resize​为 true 时才会开启该功能。表格

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<RecordType> {   table?: CustomizeComponent;  header?: {     wrapper?: CustomizeComponent;    row?: CustomizeComponent;    cell?: CustomizeComponent;  };  body?:    | CustomizeScrollBody<RecordType>    | {         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 <th { ...restProps} />;  }  return (    <Resizable width={ width} height={ 0} onResize={ onResize}>      <th { ...restProps} />    </Resizable>  );};

💎 覆盖表头组件

const ResizeTable = (  props: JSX.IntrinsicAttributes &    TableProps<any> & {  children?: React.ReactNode } & {       ref?: React.Ref<HTMLDivElement> | undefined;    },) => {   const [columns, setColumns] = useState(props.columns ?? []);  return (    <Table      { ...props}      columns={ columns}      components={ {         header: {           cell: ResizableTitle,        },      }}      scroll={ {  x: 'max-content' }} // 添加滚动条以适应自适应宽度    />  );};

💎 动态的更新表格列宽度

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 <th { ...restProps} />;  }  return (    <Resizable width={ width} height={ 0} onResize={ onResize}>      <th { ...restProps} />    </Resizable>  );};const ResizeTable = (  props: JSX.IntrinsicAttributes &    TableProps<any> & {  children?: React.ReactNode } & {       ref?: React.Ref<HTMLDivElement> | 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 (    <Table      { ...props}      columns={ resizableColumns}      components={ {         header: {           cell: ResizableTitle,        },      }}      scroll={ {  x: 'max-content' }} // 添加滚动条以适应自适应宽度    />  );};export default ResizeTable;

🎉 最后

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

责任编辑：武晓燕 来源： 萌萌哒草头将军 RaETabletable组件

(责任编辑：焦点)