///
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
import { TNode, ClassName } from '../common';
import { LoadingProps } from '../loading';
export interface TdBaseTableProps {
/**
* 是否显示表格边框
* @default false
*/
bordered?: boolean;
/**
* 单元格数据为空时呈现的内容
*/
cellEmptyContent?: string | TNode>;
/**
* 列配置,泛型 T 指表格数据类型
* @default []
*/
columns?: Array>;
/**
* 数据源,泛型 T 指表格数据类型
* @default []
*/
data?: Array;
/**
* 空表格呈现样式,支持全局配置 `GlobalConfigProvider`
* @default ''
*/
empty?: string | TNode;
/**
* 固定行(冻结行),示例:[M, N],表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时,表示不冻结行
*/
fixedRows?: Array;
/**
* 表格高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定表格高度,建议使用 `maxHeight`
*/
height?: string | number;
/**
* 加载中状态。值为 `true` 会显示默认加载中样式,可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态
*/
loading?: boolean | TNode;
/**
* 透传加载组件全部属性
*/
loadingProps?: Partial;
/**
* 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px
*/
maxHeight?: string | number;
/**
* 唯一标识一行数据的字段名,来源于 `data` 中的字段。如果是字段嵌套多层,可以设置形如 `item.a.id` 的方法
* @default 'id'
*/
rowKey: string;
/**
* 是否显示表头
* @default true
*/
showHeader?: boolean;
/**
* 是否显示斑马纹
* @default false
*/
stripe?: boolean;
/**
* 表格内容的总宽度,注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度
* @default ''
*/
tableContentWidth?: string;
/**
* 表格布局方式
* @default fixed
*/
tableLayout?: 'auto' | 'fixed';
/**
* 行内容上下方向对齐
* @default middle
*/
verticalAlign?: 'top' | 'middle' | 'bottom';
/**
* 单元格点击时触发
*/
onCellClick?: (context: BaseTableCellEventContext) => void;
/**
* 行点击时触发,泛型 T 指表格数据类型
*/
onRowClick?: (context: RowEventContext) => void;
/**
* 表格内容滚动时触发
*/
onScroll?: (params: {
e: React.UIEvent;
}) => void;
}
/** 组件实例方法 */
export interface BaseTableInstanceFunctions {
/**
* 全部重新渲染表格
*/
refreshTable: () => void;
}
export interface BaseTableCol {
/**
* 列横向对齐方式
* @default left
*/
align?: 'left' | 'right' | 'center';
/**
* 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型
*/
cell?: string | TNode>;
/**
* 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列
* @default ''
*/
colKey?: string;
/**
* 单元格和表头内容超出时,是否显示省略号。如果仅希望单元格超出省略,可设置 `ellipsisTitle = false`。
值为 `true`,则超出省略浮层默认显示单元格内容;
值类型为 `Function` 则自定义超出省略浮中层显示的内容;
值类型为 `Object`,则自动透传属性到 Tooltip 组件,可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容,请使用 `{ props: { theme: 'light' }, content: () => 'something' }`
* @default false
*/
ellipsis?: boolean | TNode>;
/**
* 表头内容超出时,是否显示省略号。优先级高于 `ellipsis`。
值为 `true`,则超出省略的浮层默认显示表头全部内容;
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容;
值类型为 `Object`,则自动透传属性到 Tooltip 组件,则自动透传属性到 Tooltip 组件,可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容,请使用 `{ props: { theme: 'light' }, content: () => 'something' }`
*/
ellipsisTitle?: boolean | TNode>;
/**
* 固定列显示位置
* @default left
*/
fixed?: 'left' | 'right';
/**
* 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持,如:使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth`
*/
minWidth?: string | number;
/**
* 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render
*/
title?: string | TNode<{
col: BaseTableCol;
colIndex: number;
}>;
/**
* 列宽,可以作为最小宽度使用。当列宽总和小于 `table` 元素时,浏览器根据宽度设置情况自动分配宽度;当列宽总和大于 `table` 元素,表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果
*/
width?: string | number;
}
export interface BaseTableCellEventContext {
row: T;
col: BaseTableCol;
rowIndex: number;
colIndex: number;
e: React.MouseEvent;
}
export interface RowEventContext {
row: T;
index: number;
e: React.MouseEvent;
}
export interface TableRowData {
[key: string]: any;
children?: TableRowData[];
}
export interface BaseTableCellParams {
row: T;
rowIndex: number;
col: BaseTableCol;
colIndex: number;
}
export interface BaseTableColParams {
col: BaseTableCol;
colIndex: number;
}
export interface RowClassNameParams {
row: T;
rowIndex: number;
type?: 'body' | 'foot';
}
export type TableColumnClassName = ClassName | ((context: CellData) => ClassName);
export interface CellData extends BaseTableCellParams {
type: 'th' | 'td';
}
export interface BaseTableCellParams {
row: T;
rowIndex: number;
col: BaseTableCol;
colIndex: number;
}
export type DataType = TableRowData;