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

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

Github: github.com/mmdctjj/rae...

npm: www.npmjs.com/package/rae...

文档:mmdctjj.github.io/raetable

往期回顾

🚀 变更内容

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

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

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

效果可以直接看这个示例

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

mmdctjj.github.io/raetable/co...

🚀 实现原理

实现原理:

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

github.com/react-compo...

js 复制代码
export interface TableComponents<RecordType> {
  table?: CustomizeComponent;
  header?: {
    wrapper?: CustomizeComponent;
    row?: CustomizeComponent;
    cell?: CustomizeComponent;
  };
  body?:
    | CustomizeScrollBody<RecordType>
    | {
        wrapper?: CustomizeComponent;
        row?: CustomizeComponent;
        cell?: CustomizeComponent;
      };
}

🚀 实现过程

💎 重写表头组件

js 复制代码
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>
  );
};

💎 覆盖表头组件

js 复制代码
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' }} // 添加滚动条以适应自适应宽度
    />
  );
};

💎 动态的更新表格列宽度

js 复制代码
  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),
    }),
  }));

完整代码如下

js 复制代码
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端业务处理,在敏捷开发场景事半功倍,效果显著,希望可以帮助更多的开发者。

如果你在使用中有任何的问题,都可以联系我。

好了,今天的分享就这些,文章中错误的地方欢迎指正。

相关推荐
明仔的阳光午后38 分钟前
React 入门 02:从单页面应用到多页面应用
前端·react.js·前端框架
.生产的驴40 分钟前
React 页面路由ReactRouter 路由跳转 参数传递 路由配置 嵌套路由
前端·javascript·react.js·前端框架·json·ecmascript·html5
非凡ghost41 分钟前
批量转双层PDF(可识别各种语言) 中文绿色版
前端·windows·pdf·计算机外设·软件需求
苏卫苏卫苏卫43 分钟前
【码源】智能无人仓库管理系统(详细码源下~基于React+TypeScript+Vite):
前端·react.js·typescript·vite·项目设计·智能无人仓库管理系统·码源
打小就很皮...43 分钟前
PDF 下载弹窗 content 区域可行性方案
前端·javascript·pdf
Felicity_Gao4 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货5 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~6 小时前
前端三剑客之一 HTML~
前端·html
lang201509286 小时前
Spring远程调用与Web服务全解析
java·前端·spring
孤狼warrior8 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫