react下自定义Table

import React from "react"

/**

* EditableTable配置数据的数据类型

export type EditableTableData = {

/**

* 表格id，建议保持唯一性

id?: string,

/**

* 表名，用以缓存配置使用，不设置则不缓存

name?: string,

style?: any,

/**

* title配置，保留

title?: any,

/**

* Table高度随容器自动改变。

* 注意：设置dock，所在容器高度必须设置（支持calc）。

dock?: boolean,

/**

* dock==true时，用于调整y高度的偏移量。为保持box-shadow等样式效果，默认预留4-8px

dockOffset?: number,

/**

* .ant-table-body类名，prefixCls不同时设置

bodyClassName?: string,

/**

* 多主题时用于设置antd类名前缀

prefixCls?: string,

/**

* Table.className

className?: string,

/**

* 行类名

rowClassName?: any,

bordered?: boolean,

size?: "small" | "middle" | "large",

dataSource: any[],

selectedRowKeys?: any[],

columns: any[],

expandable?: any,

/**

* 缓存

cache?: boolean,

/**

* 性能控制

* normal：去除一些不必要的动作

* extreme：摈除所有不必要的动作

burst?: "default" | "normal" | "extreme",

/**

* 默认有分页，不要分页请设置为false

pagination?: any,

/**

* Table.scroll，在dock==true时，scroll.y不再起效果

scroll?: any,

loading: boolean,

/**

* 虚拟化组件（flexible组件专用）

virtual?: any,

/**

* 手动设置虚拟列表高度（flexible组件专用）

virtualHeight?: number,

height?: number,

/**

* 没有数据提示文字

emptyText?: string,

/**

* footer

footer?: () => React.ReactNode,

changeColumns?: (cols: any[], index: number) => void,

resetColumns?: () => void,

/**

* 指定key

rowKey?: any,

/**

* 自动组织行拖动排序后的数据

dragself?: boolean,

draggerWidth?: number,

/**

* 拖动模式：row-行，dragger-拖动图标

dragType?: "row" | "dragger",

onRowSelect?: (record: any, selected: boolean, rows: any[]) => void,

onRowClick?: (record: any) => void,

onSelectChange?: (selectedRowKeys: any[], updateCallback: (updatedKeys: any[]) => void, selectedRows: any[]) => void,

/**

* 回调改变后的所有数据

click?: (records: any[]) => void,

/**

* 行拖动完毕回调

* @param results 排序完成结果

* @param target 拖动行

* @param touch 受理行

dragment?: (results: any[], target: any, touch: any) => void,

/**

* 编辑行保存回调

onSave?: (record: any) => void,

/**

* 使用简易配置（列宽、行排序、行间double、高亮拖动行）

quickable?: boolean,

/**

* 列排序

columnSortable?: boolean,

/**

* 拖拽列宽（设置true，则列排序不可使用）

columnSizable?: boolean,

/**

* 列是否可移除

columnRemovable?: boolean,

/**

* 行排序

rowSortable?: boolean,

/**

* 行只读

rowReadonly?: boolean,

/**

* 行间模式：默认不设置，2行间 | 3行间

rowSplitMode?: undefined | "default" | "double" | "triple",

/**

* 是否高亮拖动排序后的行，只在设置rowSortable=true时有效

rowLightSorted?: true,

}

export type FlexibleTableData = Omit<EditableTableData, "virtual"> | {components?: any}

react下自定义Table相关推荐

react+antd 自定义table单元格属性
先把antd table的基本样式引入,在columns中需要设置单元格属性的列描述数据对象中加入onCell属性,引入css样式 import styles from './xxx.less'; c ...
Spring Security Oauth2 授权码模式下自定义登录、授权页面
主要说明:基于若依springcloud微服务框架的2.1版本嫌弃缩进不舒服的,直接访问我的博客站点: http://binarydance.top//aticle_view.html?aticle ...
React + Ts 自定义日历插件
React + Ts 自定义日历插件 ant-design 内置了日历组件,但是功能单一并不能够满足项目需求,因此自定义日历组件. 日历算法一个月最多跨6周,即6*7格式本月第一天 : fist ...
opensuse-KDE桌面下自定义快捷键，ctrl+alt+t打开konsole
2019独角兽企业重金招聘Python工程师标准>>> opensuse-KDE桌面下自定义快捷键,ctrl+alt+t打开konsole 转载于:https://my.oschin ...
[RN] React Native 自定义底部弹出选择框实现
React Native 自定义底部选择框实现效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
[RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...
根据div 标签查看数组@class=modulwrap 下面的/table/tbody/tr/td
<div class="modulwrap"><div class="request_title"><span class=&qu ...
elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...
异贝，通过移动互联网技术，为中小微实体企业联盟、线上链接、线上线下自定义营销方案推送。案例62
欢迎关注异贝.异贝5G营销工具,今天给大家带来的是体育用品店的营销案例: 生命不止,运动不息.许多人都爱运动,爱体育,但随着社会发展,越来越少人会去到传统的体育用品店购买运动用品.一方面原因是电商的发 ...

react下自定义Table

react下自定义Table相关推荐

最新文章

热门文章