import type { PaginationProps } from 'antd'; import type { CSSProperties, ReactElement, ReactNode, RefObject } from 'react'; import type { TableSelectionModel, UpdateFlagEnum } from '../base/common'; import type { IObject, Observer, ValueTypeEnum } from '../util'; import type { ICheckBoxEditor, ICustomizedEditor, IDatePickerEditor, IExpr, IFormat, IHelpEditor, ISelectEditor, ITextEditor } from './editor'; import type { IPanel } from '../../panel'; type PromiseType = T | Promise; type ColumnRenderType = (params: { table: TableInstance; row: IObject; value: any; dataIndex: string; rowIndex: number; pageIndex: number; pageSize: number; onChange?: (val: any) => void; inGroup?: boolean; }) => ReactNode; type editorType = ITextEditor | IDatePickerEditor | ICheckBoxEditor | ISelectEditor | ICustomizedEditor | IHelpEditor | Boolean; type aggregateType = 'min' | 'max' | 'avg' | 'sum' | 'count' | 'totalSummary'; export interface ColumnProps { /** * @description 列标题 */ title?: string; /** * @description 列标题,支持自定义表头单元格 */ header?: ((params: { title: string; dataIndex: string; column: any; table: any; inGroup?: boolean; }) => ReactNode) | String; headerTooltip?: boolean; /** * @description 筛选过滤 */ filter?: boolean | { type?: ['filter', 'find'] | 'filter' | 'find'; remoteFilter?: boolean; name?: string; clientFilter?: (props: { dataIndex: string; row: IObject; value: any; filterValue: any; }) => boolean; icon?: (props: { filtered: boolean; color: 'string' | undefined; }) => ReactNode; dropdown?: (props: { closeDropdown: () => void; table: TableInstance; column: ColumnProps; onFilter: (params: { type: 'filter' | 'find'; }) => Promise; onReset: () => void; filterValue: any; setFilterValue: (value: any) => void; filtered: boolean; }) => ReactNode; inputProps?: { type: 'text' | 'number' | 'select' | 'checkbox'; options?: Array<{ value: any; label: ReactNode; }> | Function; }; }; /** * @description 数据源的字段(必须且唯一,dataIndexField存在时仅作为key使用) */ dataIndex?: string; /** * @description 数据源的字段(可重复,优先级比dataIndex高) */ dataIndexField?: string | string[]; /** * @description 多语言的key */ langKey?: string; /** * @description 数据类型 */ valueType?: ValueTypeEnum; /** * @description 表头分组 */ groupIn?: string | string[] | Array<({ column }: { column: ColumnProps; }) => ReactNode>; /** * @description 表头分组(嵌套列配置) */ columns?: Array; /** * @description 是否自动合并同列相邻的单元格 */ mergeCell?: boolean | ((params: { nextRow: IObject; currentRow: IObject; dataIndex: string; }) => boolean); /** * @description 是否支持列宽调整 */ resizable?: boolean; /** * @description 是否支持列顺序调整 */ columnSort?: boolean; /** * @description 是否支持列数据排序(默认前端排序) * @default true */ sortable?: boolean | { local?: boolean; callback?: Function; sort?: (compareA: IObject, compareB: IObject, extra: { dataIndex: string; order: 'desc' | 'asc' | ''; }) => 0 | 1 | -1; }; /** * @description 是否启用列右键统置菜单 * @default true */ useDefaultRightMenu?: boolean; /** * @description 是否显示提示 */ tooltip?: boolean | ColumnRenderType | 'render' | { overflow: boolean; type?: ColumnRenderType | 'render' | boolean; }; /** * @description 是否显示复制按钮 */ copyable?: boolean; /** * @description 单元格数据水平方向位置 */ align?: 'left' | 'center' | 'right'; /** * @description 列头部样式 */ headerStyle?: CSSProperties; /** * @description 单元格样式 */ cellStyle?: CSSProperties; /** * @description 是否隐藏列 */ hidden?: boolean; /** * @description 列固定属性 */ fixed?: 'right' | 'left'; /** * @description 绝对列宽,不受flex影响 */ offsetWidth?: number; /** * @description 列宽(配合flex使用时,为最小宽度) */ width?: number; /** * @description 列宽(占剩余宽度的比例) */ flex?: number; /** * @description 合计属性配置 */ aggregates?: Array ReactNode) | String; unit?: ((inGroup: any) => ReactNode) | String; calc?: (columnData: any, dataSource: any, dataIndex: any, inGroup: any) => PromiseType; type?: aggregateType | 'custom'; style?: CSSProperties; formatter?: (value: any, options: { type: string; data: any[]; dataIndex: string; }) => any; }>; /** * @description 编辑列属性配置 */ editor?: ITextEditor | IDatePickerEditor | ICheckBoxEditor | ISelectEditor | ICustomizedEditor | IHelpEditor | Boolean; /** * @description 单元格渲染函数 */ render?: ColumnRenderType; /** * @description 格式化显示内容,不改变数据源值($D:所有行、$R:当前行、$V:当前单元格、$DI:dataIndex) */ format?: IFormat; /** * @description 通过表达式或函数返回计算值,改变数据源的值($D:所有行、$R:当前行、$V:当前单元格、$DI:dataIndex) */ expr?: IExpr; /** * @description 树形表格单元格编辑时按照级次汇总到父节点 * @default false */ levelSummary?: boolean; } type AlertObjState = { selectedRows: IObject[]; selectedRowKeys: Array; aggregateColumns: Array<{ dataIndex: string; aggregates: Array<{ label: string; type: string; formatter: Function; encrypted?: boolean; }>; }>; }; export interface TableInstance { props: TablePropsType<{ /** * @description 点击数据行高亮选中行 * @default true */ rowSelected: boolean; /** * @description 点击checkbox列高亮选中行 * @default false */ checkboxSelected: boolean; /** * @description 启用默认的页size * @default false */ enableDefaultSizeChanger: boolean; }>; settingContainer?: HTMLDivElement; alertObj: { container: HTMLDivElement | null; state?: AlertObjState; }; state: IObject; _observer: Observer; containerRef: RefObject; getCacheKey: Function; notify: (value: IObject, type: string) => any; /** * @description 订阅消息事件(暂时支持: 编辑前、编辑后、编辑状态的键盘事件) */ subscribe: (fn: Function, type: 'startEditing' | 'endEditing' | 'keyboardEvent' | 'onUpdateRow' | 'onUpdateRows' | 'onDataLoad' | 'clickHighlight' | 'onCellClick' | 'onRowClick' | 'onRowDoubleClick' | 'onCheckedChange' | 'onDataSort' | String) => void; /** * @description 设置第一个可编辑单元格或上次编辑过的单元格焦点 */ focus: () => void; /** * @description 设置列表加载中状态,一般在需要自己控制数据源状态时使用 */ startLoading: () => void; /** * @description 取消列表加载中状态,配合 startLoading 使用 */ endLoading: () => void; /** * @description 获取当前正在编辑中的单元格编辑器组件 */ getActiveEditor: () => any; /** * @description 设置可编辑单元格为编辑状态 */ startEditing: (props: { rowIndex: number; dataIndex: string; }) => boolean; /** * @description 结束编辑状态 */ endEditing: () => void; /** * @description 获取行索引,参数为函数时类似于数组的findIndex */ getRowIndex: (row: IObject | Function) => number; /** * @description 获取指定行的行数据 */ getRow: (rowIndex: number) => object; /** * @description 根据主键value值获取行数据 */ getRowByKey: (keyValue: any) => object; /** * @description 返回所有行数据 */ getRows: () => Array; /** * @description 设置列属性,参数为函数时当前列状态会作为参数传递,返回新的列属性 */ setColumns: (columns: Array | Function) => void; /** * @description 通过dataIndex设置列属性 */ setColumnProps: (dataIndex: string, props: Partial) => void; /** * @description 设置数据源, 参数dataSource为函数时当前数据源状态会作为参数传递,参数updateRaw表示是否更新原始数据(默认为true,影响行状态) */ setDataSource: (dataSource: Array | Function, updateRaw?: boolean, callback?: (...args: any[]) => void) => void; /** * @description 清空数据源的值,默认设置为null,rowIndex默认为-1,小于0时清空所有行的值 */ clearData: (rowIndex?: number, nullValue?: any) => void; /** * @description 更新行数据,merge默认为true,合并原行数据 */ updateRowDataByIndex: (rowIndex: number, rowData: object, merge?: boolean) => void; /** * @description 更新原数据行 */ updateRow: (row: object[] | object, flag?: UpdateFlagEnum) => void; /** * @description 复制行数据,except可以设置需要排除的字段 */ copyRow: (row: number | IObject, except?: string[]) => any; /** * @description 剪切行数据 */ cutRow: (rowIndex?: number) => boolean; /** * @description 粘贴行数据,配合 copyRow、cutRow 使用 */ pasteRow: (rowIndex?: number) => boolean; /** * @description 增加行,默认从末尾新增,数组表示增加多行 */ addRows: (rows?: Array | IObject, insertIndex?: number, callback?: (...args: any[]) => void) => void; /** * @description 增加子行,默认从末尾新增,数组表示增加多行 */ addChildrenRow: (parentRow: any, rows?: Array | IObject, insertIndex?: number) => void; updateParent: (row: any, todo: any) => void; updateChildren: (row: any, todo: any) => void; /** * @description 删除指定索引行 */ deleteRows: (rowIndexes: number[] | number | IObject | IObject[]) => void; /** * @description 删除指定行,如果是树形,会同步删除子节点 */ deleteRow: (row: IObject) => void; /** * @description 删除所有数据行 */ clearRows: () => Promise; /** * @description 删除多选选中的行(需要设置checkbox属性) */ deleteCheckedRows: () => void; /** * @description 删除单选选中的行 */ deleteSelectedRow: () => void; /** * @description 获取选中的行索引(最近单击选中的行) */ getSelectedIndex: () => number; /** * @description 获取选中的行数据(最近单击选中的行) */ getSelectedRow: () => IObject | null; /** * @description 获取checkbox选中的行索引 */ getCheckedIndexes: () => Array; /** * @description 获取checkbox选中的行数据 */ getCheckedData: () => Array; /** * @description 若设置了checkbox属性,返回 getCheckedData,否则返回 [getSelectedRow()] */ getSelectedData: () => Array; /** * @description 若设置了checkbox属性,设置行多选,否则选中单行 */ setSelected: (rowIndexes: number[] | number, selected?: boolean) => void; /** * @description 获取列的编辑器api */ getEditor: (dataIndex: string) => { getOptions: () => editorType; setOptions: (options: editorType | ((editor: editorType) => editorType)) => void; addListener: (eventName: any, listener: any) => void; }; /** * @description 重新发起request请求,覆盖之前的查询参数 */ query: (params?: IObject | Function, callback?: any) => void; /** * @description 表格数据过滤 */ filter: (keyword: ((row: any, index: any) => boolean) | string, dataIndexArr?: Array) => void; /** * @description 刷新数据源(重新发起请求) */ refreshData: (params?: { toFirst?: boolean; }) => Promise; refreshView: (params?: IRefreshParams) => void; getStore: () => any; /** * @description 覆盖或更新请求的扩展参数, */ setExtraParam: (extraParam: any, autoLoad?: boolean) => void; /** * @description 展开数据行,数据行支持展开时有效 */ setExpand: (rowIndexes: number | number[], expanded?: boolean | number) => void; /** * @description 获取错误信息,调用前请先调用validData验证数据 */ getErrors: () => Promise; }>>; /** * @description 编辑列表,验证数据源 */ validData: (callback?: Function) => boolean; isValid(): boolean; /** * @description 按列排序数据,参数格式:[{field1: 'asc'}, {field2:'desc'}] */ setOrderBy: (orderBy: object[]) => void; /** * @description 展开整个树层级 */ expandTree: (level: number, strictly?: boolean) => void; updateFlag: UpdateFlagEnum; isMultipleInterval(): boolean; getCheckBoxDataIndex(): string; getAggregateData(): IObject[]; generateColumns(): IObject; getKeyField(): string; onCheckedChange(checkedData: any, currentRow: any, checked: any): void; isRowSelectionDisabled(row: any): boolean; getDataIndexMap(): IObject; /** * @description 按关键字定位数据行 * @returns [当前定位数据行索引, 总数据行] */ findKeyword(param: { keyword: string | string[] | ((args: { row: IObject; table: any; dataIndex?: string; }) => boolean); dataIndex?: string[] | string; currentIndex?: number; }): [number, number]; setHighlight(rowIndex: number, options?: { ctrlKey?: boolean; shiftKey?: boolean; }): void; scrollToItem(params: { rowIndex: number; align: string; }): void; clearSelected: Function; } export interface IRefreshParams { state?: IObject | Function; rowColumnIndex?: { rowIndex?: number; columnIndex?: number; }; cacheState?: boolean; endEditing?: boolean; callback?: Function; } type IDataIndexProps = { [key: string]: ColumnProps | ((column: ColumnProps) => ColumnProps); } | ((column: ColumnProps) => ColumnProps); type Menu = ReactElement; type standardResponse = { total: number; record: Array; aggregate?: Record>; summaryData?: Record; }; export declare type TablePropsType = { /** * @description 表格启用panel容器包裹时属性或标题,不设置表示不开启 */ panel?: IPanel | string; /** * @description 是否编辑单元格高亮(可以直接配置高亮颜色) * @default false */ editCellHighlight?: boolean | string; /** * @description 是否缓存原始值 * @default false */ cacheRaw?: boolean; /** * @description 子表渲染数据行的过滤条件, 字符串的格式为:主表id.主表字段.子表字段(方法参数row为主表数据行) */ rowFilter?: string | ((row: IObject) => boolean); tabIndex?: number; /** * @description 是否开启自动滚动 * @default false */ autoScroll?: boolean; /** * @description 状态id,用于标识不同业务点使用相同的列记忆功能 */ stateId?: string; /** * @description 是否开启分页或行选中及列缓存功能 * @default 有分页默认只启用`column`记忆,没有分页默认启用 ['column', 'sortable'] */ cache?: Array<'page' | 'selected' | 'column' | 'sortable'> | boolean; /** * @description 编辑列头图标 * @default true */ editColumnIcon?: boolean | (({ table, dataIndex, editor, style }: { table: any; dataIndex: any; editor: any; style: any; }) => ReactNode); /** * @description 唯一主键字段 */ keyField?: string; /** * @description 展开对应的字段属性 */ expandField?: string; /** * @description 展开列的相关配置信息 */ expandCfg?: { icon?: (expanded: boolean) => ReactNode; dataIndex?: string; /** * @description 图标占位宽度,最小宽度17, */ width?: number; fixed?: boolean; defaultExpand?: 'all' | number | ((param: { row: any; index: any; level?: any; }) => boolean); fitContent?: boolean; showLine?: boolean; block?: boolean; }; /** * @description 表格容器的类名 */ className?: string; /** * @description 表格容器的 style 属性 */ style?: CSSProperties; /** * @description 表格列的配置描述 */ columns?: Array; /** * @description header的高级菜单, 列隐藏或显示功能 */ headerMenu?: (({ table }: { table: any; }) => ReactNode) | boolean | { icon?: ReactNode; getContainer?: string | (() => Element | null); inTableAlert?: boolean; }; /** * @description 默认加载状态 */ defaultLoading?: boolean; /** * @description 配置固定数据源 */ dataSource?: object[]; /** * @description 默认选中行 */ defaultSelectedRowIndex?: number | ((ds: any[]) => number); /** * @description 是否显示行号,支持更高级配置;设为true时,标题为 "行号" ,宽度为 "43px" * @default false */ showRowNumber?: boolean | (Partial & { editOptions?: { rightName?: string; disabled?: (params: { table: TableInstance; rowIndex: number; }) => boolean | Array<'add' | 'delete'>; add?: (params: { table: TableInstance; rowIndex: number; }) => PromiseType; delete?: (params: { table: TableInstance; rowIndex: number; }) => PromiseType; }; }); /** * @description 是否支持选择,支持配置行的选中属性,默认选中属性为 "checked" * @default false */ checkbox?: boolean | string; /** * @description checkbox配置时,复选框改变时回调函数 */ onCheckedChange?: (...args: any[]) => void; onKeyDown?: (params: { keyCode: number; }) => void; /** * @description 行高(包括border),默认32, 'auto'属于实验性功能(性能考虑不建议使用) * @default 32 */ rowHeight?: ((rowIndex: number) => number) | number | 'auto'; /** * @description 表头高度 * @default 39 */ headerHeight?: number; /** * @description 设置行的展开属性 */ expandRow?: { height: (({ row, rowIndex }: { row: any; rowIndex: any; }) => number) | number; render: ({ row, rowIndex, table, style }: { row: any; rowIndex: any; table: any; style: any; }) => ReactNode; }; /** * @description 设置行属性(例如:onClick、onDoubleClick等react事件) */ onRow?: (rowIndex: number, table: any, row: IObject) => IObject; /** * @description 设置数据行的右键菜单 */ rowContextMenu?: (row: IObject, extra: { table: TableInstance; rowIndex?: number; hidden: Function; dataIndex?: string; }) => Menu; /** * @description 设置表格body的右键菜单 */ bodyContextMenu?: (params: { table: TableInstance; rowIndex?: number; hidden: Function; dataIndex?: string; }) => Menu; /** * @description 默认开启编辑列右键菜单,bodyContextMenu未设置时有效 * @default true */ useDefaultRightMenu?: boolean; /** * @description 拖拽行排序,pressDelay(默认200ms)设置拖拽延迟,解决点击事件冲突问题 */ rowDrag?: boolean | { pressDelay?: number; handleIndex?: string; listeners?: { shouldCancelStart?(e: any, rowIndex: any): boolean; onSortStart?({ node, index, collection, isKeySorting }: { node: any; index: any; collection: any; isKeySorting: any; }, event: any): void; onSortMove?(event: any): void; onSortOver?({ index, oldIndex, newIndex, collection, isKeySorting }: { index: any; oldIndex: any; newIndex: any; collection: any; isKeySorting: any; }, e: any): void; onSortEnd?({ oldIndex, newIndex, collection, isKeySorting }: { oldIndex: any; newIndex: any; collection: any; isKeySorting: any; }, e: any): boolean | void; }; }; /** * @description 分页配置信息 */ pagination?: boolean | (PaginationProps & { align?: 'left' | 'center' | 'right'; height?: number; pageIndex?: number; pageSize?: number; targetContainer?: HTMLElement | string; leftRender?: ({ table }: { table: any; }) => ReactNode; rightRender?: ({ table }: { table: any; }) => ReactNode; onBeforeChange?: (page: number, pageSize?: number) => boolean | Promise; }); /** * @description 数据源请求,支持返回promise对象 */ request?: (...args: any[]) => Promise | standardResponse | IObject>; /** * 查询的时候是否重置索引 */ queryResetIndex?: boolean; /** * @description 拦截请求数据,处理以后返回 */ response?: (res: any) => standardResponse; /** * @description 数据行分组 */ groupBy?: string | string[]; /** * @description 数据行分组小计的位置信息 * @default 'start' */ groupAggregatePosition?: 'start' | 'end'; /** * @description 合计位置信息 * @default 'end' */ aggregatePosition?: 'start' | 'end'; /** * @description 是否默认展开所有分组,all:展开所有,first:展开第一行 */ defaultExpand?: 'all' | 'first'; columnStateChange?: (...args: any[]) => void; /** * @description 重写对应dataIndex的列属性,一般配合动态列使用 */ dataIndexProps?: IDataIndexProps; /** * @description 数据在单元格的显示位置 */ align?: 'left' | 'center' | 'right'; onDataLoad?: (...args: any[]) => void; /** * @description 完全受控 */ fullyControlled?: boolean; /** * @description 合计行的单元格样式 */ aggregateStyle?: CSSProperties; /** * @description 表格优化参数 */ optimize?: { vertical?: boolean; overscanRowCount?: number; overscanColumnCount?: number; }; /** * @description 边框线条颜色 */ borderColor?: string; /** * @description 数据行的选择模式 */ rowSelection?: { type: TableSelectionModel.MULTIPLE_INTERVAL | TableSelectionModel.CHECKBOX | TableSelectionModel.ROW | Array; keyField?: string; checkedField?: string; /** * @description 是否显示不可选中行的checkbox框,默认false(checkbox设置时有效) * @default false */ showDisabledCheckbox?: boolean; disabled?: (row: any) => boolean; autoCheckedChildren?: boolean; }; /** * @description 自定义批量操作工具栏信息区域, false 时不显示(在checkbox选择模式下有效) * @default true */ tableAlertRender?: ((params: { selectedRowKeys: Array; selectedRows: IObject[]; onClear: Function; }) => ReactNode) | boolean; /** * @description 单元格编辑模式激活方式 * @default click */ activeCellEditor?: 'click' | 'doubleClick'; /** * @description 是否自动取消当前编辑器 * @default true */ autoCancelEditor?: boolean; /** * @description 子表数据源 */ subTable?: IObject<{ dataSource: [string, ((row: any) => any[] | Promise)?]; busKey?: string; busFields?: Array; }>; /** * @description 编辑状态,是否禁用所有编辑器,优先级最低 * @default false */ disabled?: boolean | (({ row, dataIndex }: { row: any; dataIndex: any; }) => boolean); /** * @description 编辑状态,是否禁用所有编辑器,优先级最高 * @default false */ readOnly?: boolean | (({ row, dataIndex }: { row: any; dataIndex: any; }) => boolean); onBeforeEditCellKeyDown?: (e: any, { rowIndex, columnIndex }: { rowIndex: any; columnIndex: any; }) => boolean | undefined; onAfterEditCellKeyDown?: (e: any, { rowIndex, columnIndex }: { rowIndex: any; columnIndex: any; }) => void; headerTooltip?: boolean; /** * @description 是否显示提示 */ tooltip?: boolean | ColumnRenderType | 'render' | { overflow: boolean; type: ColumnRenderType | 'render' | boolean; }; /** * @description 是否支持列顺序调整 */ columnSort?: boolean; /** * @description 多语言 */ local?: { noData?: string; addRow?: string; }; } & Partial; export {};