react实现table可拖拽表头(给react-jss样式传递参数、滚动条样式)

news2025/3/16 13:22:36

目录

  • react实现table可拖拽表头
    • 安装依赖
    • resizableTitle / index.tsx
    • drapTable.tsx
    • 使用DragTable 组件
    • 滚动条样式
    • 效果

react实现table可拖拽表头

安装依赖

yarn add react-resizable 
yarn add react-jss

resizableTitle / index.tsx


import { createUseStyles } from 'react-jss';
import { Resizable } from 'react-resizable';

const useResizableTitleStyles = createUseStyles({
  resizableHandle : {
    position: 'absolute',
    right: '-5px',
    bottom: 0,
    zIndex: 1,
    width: '10px',
    height: '100%',
    cursor: 'col-resize'
  }
});
// 表头拖拽组件
export const ResizableTitle = ({ onResize, width, isNotResizable, ...restProps }) => {
  const classes = useResizableTitleStyles();
  // 新增处理函数,用于阻止事件冒泡
  const stopPropagation = (event) => event.stopPropagation();
  // isNotResizable 或者 没有宽度 不可拖拽
  console.log('isNotResizable',isNotResizable, width, 'restProps', restProps);
  
  if (!width || isNotResizable) { return (<th {...restProps} />) };
  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span className={classes.resizableHandle} onClick={stopPropagation} />
      }
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} style={{ ...restProps?.style, userSelect: 'none' }} />
    </Resizable>
  );
};

drapTable.tsx

import type { TableProps } from 'antd';
import { Table } from 'antd';
import { useState, useMemo, useEffect, useCallback } from 'react';
import type { ColumnType } from 'antd/lib/table';
import { ResizableTitle } from './resizableTitle/index';
import { createUseStyles } from 'react-jss';

interface TableStylesProps {
  paddingVertical?: number;
  paddingHorizontal?: number;
}
// 设置table的 cell里面的 padding
const useTableStyles = createUseStyles({
  base_table_com: {
    '& .ant-table-thead > tr > th, & .ant-table-tbody > tr > td, & .ant-table tfoot > tr > th, & .ant-table tfoot > tr > td':
      {
        padding: (cProps: TableStylesProps) =>
          `${cProps.paddingVertical ?? 10}px ${
            cProps.paddingHorizontal ?? 12
          }px`,
      },
  },
});

export const DragTable = <RecordType extends Record<string, any> = any>(
  props: ICommonTableProps<RecordType>,
) => {
  const {
    showTotalNum = true,
    pagination,
    hidePagination,
    paddingVertical,
    paddingHorizontal,
  } = props;
  const [tablePagination, setTablePagination] = useState<any>(pagination);
  const classes = useTableStyles({ paddingVertical, paddingHorizontal });

  const { columns } = props;

  // 设置可拖拽的表头
  const [rescolumns, setResColumns] = useState<ColumnType<any>[]>(
    columns.filter((column) => !column.hide) || [],
  );

  // 拖拽后 重新设置列表宽度
  const handleResize = useCallback(
    (index) => {
      return (txt: any, Resize: any) => {
        const temp = [...rescolumns];
        temp[index] = { ...temp[index], width: Resize.size.width };
        setResColumns(temp);
      };
    },
    [rescolumns],
  );

  // 把 columns 设置可拖拽的cell
  const columnsMap: any[] = useMemo(() => {
    return (
      rescolumns?.map((column: any, index) => {
        return {
          ...column,
          onHeaderCell: (col: any) => ({
            width: col.width,
            onResize: handleResize(index),
            isNotResizable: col.isNotResizable
          }),
        };
      }) || []
    );
  }, [rescolumns, handleResize]);

  useEffect(() => {
    const showTotal = {
      showTotal: (total: number, range: number[]) => {
        if (showTotalNum) {
          return `共{${props.pagination ? props.pagination?.total : 0}}条结果`;
        } else {
          return '';
        }
      },
    };
    if (!hidePagination) {
      setTablePagination(Object.assign({}, pagination ?? {}, showTotal));
    } else {
      setTablePagination(false);
    }
  }, [hidePagination, pagination, props.pagination, showTotalNum]);

  return (
    <Table
      {...props}
      columns={columnsMap}
      pagination={tablePagination}
      components={{ header: { cell: ResizableTitle } }}
      className={classes.base_table_com}
    />
  );
};

interface CommonColumn<T> extends ColumnType<T> {
  hide?: boolean;
}

export interface ICommonTableProps<RecordType> extends TableProps<RecordType> {
  showTotalNum?: boolean;
  hidePagination?: boolean;
  columns: CommonColumn<RecordType>[]; // 重写 columns 类型
  paddingVertical?: number; // 上下padding
  paddingHorizontal?: number;// 左右padding
}

使用DragTable 组件

import { createUseStyles } from 'react-jss';
import { useEffect, useMemo, useState, useRef } from 'react';
import { DragTable } from './drapTable';
import { Space } from "antd"

const TablePage = () => {
  const columns = [
    {
      title: '操作',
      width: 60,
      isNotResizable: true, // 设置操作栏固定不可拖拽
      render: (_, record) => (
        <Space size="middle">
          <a>删除</a>
        </Space>
      ),
    },
    {
      title: '编码',
      dataIndex: 'code',
      width: 100,
    },
    {
      title: '名称',
      width: 100,
      dataIndex: 'name',
    },
    {
      title: '测试',
      dataIndex: 'test',
      width: 400,
    },
    {
      title: '描述',
      dataIndex: 'des',
      width: 400,
    },
  ];
  const dataSource = [
    { id: 1, code: '001', name: '我是name1', test: '测试一下1', des: '描述一下' },
    { id: 2, code: '002', name: '我是name2', test: '测试一下2', des: '描述一下2' },
    { id: 3, code: '003', name: '我是name3', test: '测试一下3', des: '描述一下3' },
    { id: 4, code: '004', name: '我是name4', test: '测试一下4', des: '描述一下4' },
    { id: 5, code: '005', name: '我是name5', test: '测试一下5', des: '描述一下5' },
    { id: 6, code: '006', name: '我是name6', test: '测试一下6', des: '描述一下6' },
    { id: 7, code: '007', name: '我是name7', test: '测试一下7', des: '描述一下7' },
    { id: 8, code: '008', name: '我是name8', test: '测试一下8', des: '描述一下8' },
    { id: 9, code: '009', name: '我是name9', test: '测试一下9', des: '描述一下9' },
  ];
  return (
    <>
      <DragTable
        rowKey="id"
        paddingVertical={8}
        paddingHorizontal={10}
        columns={columns}
        dataSource={dataSource}
        scroll={{ x: 'max-content', y : 250 }}
      />
    </>
  );
};
export default TablePage;

滚动条样式


/* 设置滚动条的宽度和背景色 */
::-webkit-scrollbar {
  width: 6px; /* 垂直滚动条的宽度 */
  height: 6px; /* 水平滚动条的宽度 */
  background-color: #f5f5f5; /* 滚动条的背景色 */
}

/* 设置滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #999; /* 滑块的背景色 */
  border-radius: 4px; /* 滑块的圆角 */
  cursor: pointer;
}

/* 设置滚动条的轨道 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 轨道的背景色 */
}

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1694945.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【电子学会】2023年09月图形化一级 -- 保护环境

保护环境 1. 准备工作 &#xff08;1&#xff09;删除角色小猫&#xff0c;添加角色Wizard&#xff0c;Bear-walking&#xff1b; &#xff08;2&#xff09;添加背景Desert和Forest。 2. 功能实现 &#xff08;1&#xff09;调整魔法师和熊的大小为50&#xff1b; &…

Linux文本处理三剑客(详解)

一、文本三剑客是什么&#xff1f; 1. 对于接触过Linux操作系统的人来说&#xff0c;应该都听过说Linux中的文本三剑客吧&#xff0c;即awk、grep、sed&#xff0c;也是必须要掌握的Linux命令之一&#xff0c;三者都是用来处理文本的&#xff0c;但侧重点各不相同&#xff0c;a…

MySQL---通用语法及分类

目录 一、SQL通用语法 二、 SQL分类 1.DDL 1.1 DDL数据库操作 1.2 DDL表操作---查询 1.3 DDL表操作---创建​编辑 1.4 DDL表操作---数据类型 1.5 DDL表操作---修改 1.6 DDL表操作---删除 1.7 DDL总结 2. 图形化界面工具DataGrip 2.1 创建 2.2 使用 3. DML 3.1 DML介绍 3.2 DM…

基于开源ATmega8 无感BLDC程序移植到ATmega328PB

基于开源ATmega8 无感BLDC程序移植到ATmega328PB &#x1f516;基于Atmel Studio 7.0开发环境。&#x1f955;开源原项目资源地址&#xff1a;https://svn.mikrokopter.de/websvn/listing.php?repnameBL-Ctrl&path%2F&&#x1f4cd;原理图和PCB资源 BL-Ctrl v2.0 in E…

【FPGA】VGA显示文字、彩条、图片——基于DE2-115

文章目录 前言一、VGA概述1.1 简述1.2 管脚定义1.3 VGA显示原理1.4 VGA时序标准1.5 VGA 显示模式及相关参数 二、VGA显示自定义的汉字字符2.1 点阵汉字生成2.2 生成BMP文件2.3 生成txt文件2.4 实现效果 三、VGA显示条纹3.1 实现流程3.2 实现效果 四、VGA输出一幅彩色图像4.1 bm…

从旅游广告联想到《桃花源记》

近日收到《长江头条网》等知名网络自媒体相邀,促我写点儿旅游题材的文案。虽说笔者游历过许多名山大川的绝美风景区,但那是在70岁之前的事儿了。如今年逾78岁,纵使有少许自有资本能够支持出游,可体力难撑,岂不是花钱买罪受吗?而且,写没有亲身经历过的事挺难,即便发表出…

Plotly库利用滑块创建数据可视化

使用了Plotly库来创建一个数据可视化图表&#xff0c;并使用滑块来控制显示哪些数据 import plotly.graph_objects as go from plotly.subplots import make_subplots# 示例数据 x [1, 2, 3, 4, 5] y1 [1, 2, 3, 4, 5] y2 [5, 4, 3, 2, 1] y3 [2, 3, 1, 5, 4]# 创建子图 f…

基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、package.json文件需要增加相关流程组件&#xff0c;如下 "dependencies": {"element-plus/icons-vue": "^2.3.1","highlightjs/vue-plugin":…

JDBCTemplate介绍

Spring JDBC Spring框架对Spring的简单封装。提供一个JDBCTemplate对象简化JDBC开发 *步骤&#xff1a; 1、导入jar包 2、创建JDBCTemplate对象。依赖于数据源DataSource *JdbcTemplate templatenew JdbcTemplate(ds); 3、调用JdbcTemplate的方法来完成CRUD的操作 *update()&…

解决问题:Collecting package metadata (current_repodata.json)--faile

目录 解决步骤&#xff1a; 1、创建pip.ini文件&#xff1a;winR对话框中复制输入&#xff1a;%APPDATA%&#xff0c;然后回车。 2、conda添加清华源&#xff1a; 3、这些创建完&#xff0c;重启电脑就可以创建你的虚拟环境了 4、利用镜像源下载库&#xff1a; 5、查看to…

青鸟云报修系统:实现高效、便捷的维修申请处理

在日常生活和工作中&#xff0c;故障报修难免会遇到&#xff0c;售后报修服务则成为了解决问题的关键。纸质化售后报修维修申请单&#xff0c;作为报修流程中的重要一环&#xff0c;在一定程度上能够记录和追踪售后报修维修流程&#xff0c;但在实际操作过程中却存在着诸多弊端…

C# NetworkStream 流的详解与示例

文章目录 一、NetworkStream类的基本概念1.1 NetworkStream类概述1.2 NetworkStream类属性1.3 NetworkStream类方法 二、NetworkStream的连接方式三、NetworkStream的传输模式四、NetworkStream类示例服务器端代码&#xff1a;客户端代码&#xff1a; 五、总结 在C#中&#xff…

代码审计--一道简单的文件包含题目的多种利用方式

NO.1 传统方法 首先来看下代码 <?php error_reporting(0); if(isset($_GET["file"])){include($_GET["file"]); }else{highlight_file(__FILE__);phpinfo(); } ?>看完代码后再来学习学习函数吧&#xff0c;毕竟菜啊&#xff01;&#xff01;&…

webpack编译过程

webpack编译过程 初始化 此阶段&#xff0c;webpack会将**CLI参数**、**配置文件**、**默认配置**进行融合&#xff0c;形成一个最终的配置对象。​ 对配置的处理过程是依托一个第三方库yargs完成的 ​ 此阶段相对比较简单&#xff0c;主要是为接下来的编译阶段做必要的准备 ​…

那智不二越机器人维修案例分享

那智不二越工业机器人在工业范围内广泛应用于各种生产领域。其示教器作为人机交互的重要设备&#xff0c;常常需要定期维护和Nachi不二越机械手示教盒修理。 【Nachi不二越机器人示教器维修步骤】 1. 关闭电源 在进行任何那智不二越机器人维修操作之前&#xff0c;务必确保机器…

arc-eager算法XJTU-NLP自然语言处理技术期末考知识点

arc-eager算法&#xff1a;以我/做了/一个/梦为例来描述arc-eager算法的四个操作&#xff1a;shift&#xff0c;left-arc&#xff0c;right-arc&#xff0c;reduce XJTU-NLP期末考点2024版 题型&#xff1a;5*6简答题4*15计算题 简答题考点&#xff1a; &#xff08;1&#…

总结 HTTPS 的加密流程

一、前言 http是为了解决http存在的问题而在http基础上加入了SSL/TSL&#xff0c;在HTTP/2中TCP三次握手后会进入SSL/TSL握手&#xff0c;当SSL/TSL建立链接后&#xff0c;才会进行报文的传输。 二、HTTPS的混合加密 我们先来认识密钥&#xff1a; 密钥是用于加密和解密数据…

【spring】@PathVariable注解学习

PathVariable介绍 PathVariable是Spring框架中的一个注解&#xff0c;主要用于处理RESTful风格URL中的路径变量。在RESTful接口设计中&#xff0c;我们经常将资源的ID或者其他标识信息直接放在URL路径中&#xff0c;而不是作为查询参数。PathVariable注解使得控制器方法能够轻…

开源博客项目Blog .NET Core源码学习(22:App.Hosting项目结构分析-10)

本文学习并分析App.Hosting项目中后台管理页面的通知公告维护页面、友情链接维护页面。 通知公告维护页面 通知公告维护页面用于显示、检索、新建、编辑、删除通知公告数据&#xff0c;以便在前台页面的首页循环显示通知公告。通知公告维护页面附带一新建及编辑页面&#xff0…

hsql学习笔记

1. row_number() over (partition by uid order by dt 分析&#xff1a; row_number()&#xff1a; 这是一个窗口函数&#xff0c;用于为结果集中的每一行分配一个唯一的序号。默认情况下&#xff0c;这个序号是按照查询结果的顺序来分配的&#xff0c;但你可以通过OVER()子句…