React Ant-Table Resizable 实现对Table表格的列的宽度调整_react-resizable table中使用-程序员宅基地

技术标签: Ant Design  React  

import React from "react";
import {
     Widget } from "erpcore";
import {
     Table } from 'antd';
import "./index.less";
import {
     Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';


const WidgetOfBase = Widget.WidgetOfBase;
const ResizeableTitle = (props) => {
    
    const {
     onResize, width, ...restProps } = props;
    if (!width) {
    
        return <th {
    ...restProps} />
    }
    return (
        <Resizable
            width={
    width} height={
    0} onResize={
    onResize}>
            <th {
    ...restProps} />
        </ Resizable >
    )
};

class ReactTable extends WidgetOfBase {
    
    constructor(props) {
    
        super(props);
        this.state.columns = props.rcColumns;
    };

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

    handleResize = index => (e, {
     size }) => {
    
        const {
     tableKey } = this.props;
        this.setState(({
     columns }) => {
    
            const nextColumns = [...columns];
            nextColumns[index] = {
    
                ...nextColumns[index],
                // width: (size.width < 50) ? 50 : size.width,
                width: size.width,
            };
            console.log(nextColumns)
            if (tableKey) {
    
                localStorage.setItem(tableKey, JSON.stringify(nextColumns))
            }

            return {
     columns: nextColumns };
        });
    };

    renderOnMobile = () => {
    
        const {
     dataSource, pagination, selectedRowKeys, onSelectChange } = this.props;
        const columns = this.state.columns.map((col, index) => ({
    
            ...col,
            onHeaderCell: (column) => ({
    
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        const rowSelection = {
    
            selectedRowKeys,
            onChange: onSelectChange,
        };
        return (
            <div className="rc_table">
                <Table
                    columns={
    columns}
                    components={
    this.components}
                    dataSource={
    dataSource}
                    pagination={
    pagination}
                    size="middle"
                    rowSelection={
    rowSelection}
                    scroll={
    {
     x: true }}
                />
            </div>
        )
    }
}

export default ReactTable;


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40958876/article/details/116756905

智能推荐

java box类定义三变量_01.类的成员变量:\n设计一个立方体类Box,定义三个属性,分别是长,宽,高。定义二个方法,分别计...-程序员宅基地

文章浏览阅读2.3k次。01.类的成员变量:\n设计一个立方体类Box,定义三个属性,分别是长,宽,高。定义二个方法,分别计算并输出立方体的体积和表面积答:java.util.Scanner; public class Box { double length; double width; double height; //求体积 double volume(double length,double width,doubl..._编写一个立方体类,包含这样的属性:长度、宽度、高度等信息,通过方法来计算它的体

解决 - org.apache.ibatis.binding.BindingException: Type interface com.itheima.mapper.UserMapper...-程序员宅基地

文章浏览阅读1.3k次。org.apache.ibatis.binding.BindingException: Type interface com.itheima.mapper.UserMapper is not known to the MapperRegistry.该问题属于核心配置文件,加载映射文件报名写错,_org.apache.ibatis.binding.bindingexception: type interface com.itheima.mappe

用nodejs中html不显示css,Node.js 加载静态资源css,js等不显示问题的解决方法-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏9次。一,原因1,没有响应到css等文件2,响应类型是由文件的后缀名决定(1)html的请求头Content-Type : text/html ; charset=utf-8(2) CSS的请求头content-type:text/css; charset=utf-8(3)JavaScript的请求头content-type:text/javascrpt; charset=utf-8二,解决方法:(一)..._node.js打开网页不显示css,本地能显示

智慧校园全场景解决方案分析及方案架构_智慧校园中控架构开发软件有哪些-程序员宅基地

文章浏览阅读384次,点赞7次,收藏9次。智慧校园全场景解决方案是借助AIoT智能物联能力打造智慧绿色校园,助力实现校园周界安防、智慧通行、设备运维、能耗管理等场景功能智慧校园全场景解决方案,打造安全、便捷、绿色的智慧校园。_智慧校园中控架构开发软件有哪些

演示Win10输入法设置方法编程_win10 输入法 中英文模式api-程序员宅基地

文章浏览阅读82次。库,我们可以编写代码来模拟按键和鼠标操作,从而实现自动设置Windows 10的输入法。这种方法可以节省时间和精力,尤其是在需要频繁更改输入法设置的情况下。运行代码后,您将看到Windows 10的设置窗口打开,并自动导航到语言设置,然后将输入法更改为中文简体拼音。在本文中,我将向您展示如何使用编程方式来设置Windows 10的输入法。现在,我们已经编写了设置输入法的代码。保存代码文件,并在命令提示符或终端中运行它。库来模拟按下键盘快捷键,以设置输入法。一旦安装完成,我们可以开始编写代码。_win10 输入法 中英文模式api

女人手掌中间有条竖线_手心有一条竖线代表什么-程序员宅基地

文章浏览阅读1.5k次。每个人都有属于自己的手相,有些人的手相是属于典型的、一般的手相特征,没有太多值得说的地方;而另一些人,他们的手相之中,却有一些别人所没有的手相特征,但却真实的出现在了自己的手掌中。比如说,对于手心里有一条竖线的人,他们的命格会是怎样的呢?一起来手相图解看看吧!1、事业发展:前途坎坷对于手心有一条竖线的人,他们的事业线一定会因此而出现中断,与此相交。而在事业发展方面,事业线的分叉代表了遇到的困难程度..._女生右手手掌中间的竖线代表什么

随便推点

Web存储-程序员宅基地

文章浏览阅读566次。Cookie、WebStorage(localStorage,sessuonStorage)、Session、Token_web存储

IDEA启动报Failed to create JVM. JVM Path错问题解决_edit you jvm failed to jvm-程序员宅基地

文章浏览阅读2k次。所以我的配置在ja-netfilter-all/dea64.exe.vmoptions。我尝试把值改成默认值后。我记得我最近一次的正常打开,是因为使用IDEA的help重新设置了VM的内存大小。按照道理来说,修改idea64.exe.vmoptions的内容应该就可以还原回去了哈。3、打开idea64.exe.vmoptions文件,找个网上的配置,然后替换下重新启动。1、找到idea64.exe.vmoptions文件,然后删除,重启动。分析当前这个问题,应该是把值调的太大了,导致启动不起来的问题。..._edit you jvm failed to jvm

java虚拟机栈和本地方法栈_本地方法栈存放什么数据-程序员宅基地

文章浏览阅读803次。Java 内存可以粗糙的区分为堆内存(Heap)和栈内存 (Stack),其中栈就是现在说的虚拟机栈,或者说是虚拟机栈中局部变量表部分。new了一个class类的过程:往栈里丢了一个英文的名字,在堆里实例化了一个类,名字指向这个类。与程序计数器一样,Java 虚拟机栈也是线程私有的,它的生命周期和线程相同,描述的是。栈:栈内存,主管程序的运行,生命周期与线程同步。Java 栈可用类比数据结构中栈,Java 栈中保存的主要内容是栈帧,栈:8大基本数据类型,对象的引用,实例的方法。栈运行的原理:栈帧。_本地方法栈存放什么数据

Expression expected.Vetur(1109) 报错_ts1109: expression expected.-程序员宅基地

文章浏览阅读5.9k次。这里发现报错,关闭vscode重启也还是有问题。后面发现其实是typescript定义类型的语法,是因为我将代码写在<script></script>里面,使用ts语法需要表明lang="ts"即将代码写在<script lang="ts"></script>将不会报错..._ts1109: expression expected.

基于8ASK调制解调误码率matlab仿真_matlab ask-程序员宅基地

文章浏览阅读1k次,点赞23次,收藏22次。在数字通信系统中,幅度键控(ASK)是一种通过改变载波信号的幅度来传输数字信息的调制方式。8ASK,即8幅度键控,是ASK的一种变体,它使用8个不同的幅度级别来表示数字信息。8ASK (Amplitude Shift Keying) 调制是一种幅度移键调制技术,它通过改变载波信号的幅度来传输数据,同时保持频率和相位不变。在8ASK中,有8个不同的幅度级别,每个级别代表3比特的信息(因为2^3=8)。这种调制方式能够在相同的带宽条件下传输更多的数据,但与此同时,它对信号的幅度噪声也更加敏感。_matlab ask

推荐文章

热门文章

相关标签