import React from 'react'; import { RendererProps } from '../../factory'; import { SchemaNode, Action } from '../../types'; import { ITableStore, IColumn, IRow } from '../../store/table'; import Sortable from 'sortablejs'; import { TableCell } from './TableCell'; import { BaseSchema, SchemaClassName, SchemaObject, SchemaTokenizeableString } from '../../Schema'; import { SchemaPopOver } from '../PopOver'; import { SchemaQuickEdit } from '../QuickEdit'; import { SchemaCopyable } from '../Copyable'; import { SchemaRemark } from '../Remark'; /** * 表格列,不指定类型时默认为文本类型。 */ export declare type TableColumnObject = { /** * 列标题 */ label: string; /** * 配置是否固定当前列 */ fixed?: 'left' | 'right' | 'none'; /** * 绑定字段名 */ name?: string; /** * 配置查看详情功能 */ popOver?: SchemaPopOver; /** * 配置快速编辑功能 */ quickEdit?: SchemaQuickEdit; /** * 作为表单项时,可以单独配置编辑时的快速编辑面板。 */ quickEditOnUpdate?: SchemaQuickEdit; /** * 配置点击复制功能 */ copyable?: SchemaCopyable; /** * 配置是否可以排序 */ sortable?: boolean; /** * 是否可快速搜索 */ searchable?: boolean; /** * 配置是否默认展示 */ toggled?: boolean; /** * 列宽度 */ width?: number | string; /** * todo */ filterable?: boolean | { source?: string; options?: Array; }; /** * 结合表格的 footable 一起使用。 * 填写 *、xs、sm、md、lg指定 footable 的触发条件,可以填写多个用空格隔开 */ breakpoint?: '*' | 'xs' | 'sm' | 'md' | 'lg'; /** * 提示信息 */ remark?: SchemaRemark; }; export declare type TableColumnWithType = SchemaObject & TableColumnObject; export declare type TableColumn = TableColumnWithType | TableColumnObject; /** * Table 表格渲染器。 * 文档:https://baidu.gitee.io/amis/docs/components/table */ export interface TableSchema extends BaseSchema { /** * 指定为表格渲染器。 */ type: 'table' | 'static-table'; /** * 是否固定表头 */ affixHeader?: boolean; /** * 表格的列信息 */ columns?: Array; /** * 展示列显示开关,自动即:列数量大于或等于5个时自动开启 */ columnsTogglable?: boolean | 'auto'; /** * 是否开启底部展示功能,适合移动端展示 */ footable?: boolean | { expand?: 'first' | 'all' | 'none'; /** * 是否为手风琴模式 */ accordion?: boolean; }; /** * 底部外层 CSS 类名 */ footerClassName?: SchemaClassName; /** * 顶部外层 CSS 类名 */ headerClassName?: SchemaClassName; /** * 占位符 */ placeholder?: string; /** * 是否显示底部 */ showFooter?: boolean; /** * 是否显示头部 */ showHeader?: boolean; /** * 数据源:绑定当前环境变量 */ source?: SchemaTokenizeableString; /** * 表格 CSS 类名 */ tableClassName?: SchemaClassName; /** * 标题 */ title?: string; /** * 工具栏 CSS 类名 */ toolbarClassName?: SchemaClassName; /** * 合并单元格配置,配置数字表示从左到右的多少列自动合并单元格。 */ combineNum?: number; /** * 顶部总结行 */ prefixRow?: Array; /** * 底部总结行 */ affixRow?: Array; } export interface TableProps extends RendererProps { title?: string; header?: SchemaNode; footer?: SchemaNode; actions?: Action[]; className?: string; headerClassName?: string; footerClassName?: string; store: ITableStore; columns?: Array; headingClassName?: string; toolbarClassName?: string; headerToolbarClassName?: string; footerToolbarClassName?: string; tableClassName?: string; source?: string; selectable?: boolean; selected?: Array; maxKeepItemSelectionLength?: number; valueField?: string; draggable?: boolean; columnsTogglable?: boolean | 'auto'; affixHeader?: boolean; affixColumns?: boolean; combineNum?: number; footable?: boolean | { expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; expandConfig?: { expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; itemCheckableOn?: string; itemDraggableOn?: string; itemActions?: Array; onSelect: (selectedItems: Array, unSelectedItems: Array) => void; onSave?: (items: Array | object, diff: Array | object, rowIndexes: Array | string, unModifiedItems?: Array, rowOrigins?: Array | object, resetOnFailed?: boolean) => void; onSaveOrder?: (moved: Array, items: Array) => void; onQuery: (values: object) => void; onImageEnlarge?: (data: any, target: any) => void; buildItemProps?: (item: any, index: number) => any; checkOnItemClick?: boolean; hideCheckToggler?: boolean; rowClassName?: string; rowClassNameExpr?: string; popOverContainer?: any; canAccessSuperData?: boolean; } export default class Table extends React.Component { static propsList: Array; static defaultProps: Partial; table?: HTMLTableElement; sortable?: Sortable; dragTip?: HTMLElement; affixedTable?: HTMLTableElement; parentNode?: HTMLElement | Window; lastScrollLeft: number; totalWidth: number; totalHeight: number; outterWidth: number; outterHeight: number; unSensor?: Function; updateTableInfoLazy: () => void; widths: { [propName: string]: number; }; heights: { [propName: string]: number; }; renderedToolbars: Array; subForms: any; constructor(props: TableProps); static syncRows(store: ITableStore, props: TableProps, prevProps?: TableProps): void; componentWillMount(): void; componentDidMount(): void; componentWillReceiveProps(nextProps: TableProps): void; componentDidUpdate(): void; componentWillUnmount(): void; subFormRef(form: any, x: number, y: number): void; handleAction(e: React.UIEvent, action: Action, ctx: object): void; handleCheck(item: IRow): void; handleCheckAll(): void; handleQuickChange(item: IRow, values: object, saveImmediately?: boolean | any, savePristine?: boolean, resetOnFailed?: boolean): void; handleSave(): Promise; handleSaveOrder(): void; syncSelected(): void; reset(): void; bulkUpdate(value: any, items: Array): void; getSelected(): any[]; affixDetect(): void; updateTableInfo(): void; handleOutterScroll(): void; tableRef(ref: HTMLTableElement): void; dragTipRef(ref: any): void; affixedTableRef(ref: HTMLTableElement): void; initDragging(): void; destroyDragging(): void; getPopOverContainer(): Element | Text | null; handleMouseMove(e: React.MouseEvent): void; handleMouseLeave(): void; draggingTr: HTMLTableRowElement; originIndex: number; draggingSibling: Array; handleDragStart(e: React.DragEvent): void; handleDragOver(e: any): void; handleDrop(): void; handleDragEnd(): void; handleImageEnlarge(info: any, target: { rowIndex: number; colIndex: number; }): void; renderHeading(): JSX.Element | null; renderHeadCell(column: IColumn, props?: any): JSX.Element; renderCell(region: string, column: IColumn, item: IRow, props: any, ignoreDrag?: boolean): JSX.Element | null; renderAffixHeader(tableClassName: string): JSX.Element | null; renderFixedColumns(rows: Array, columns: Array, headerOnly?: boolean, tableClassName?: string): JSX.Element; renderToolbar(toolbar: SchemaNode): JSX.Element | null | undefined; renderColumnsToggler(config?: any): JSX.Element | null; renderDragToggler(): JSX.Element | null; renderExportExcel(toolbar: SchemaNode): JSX.Element | null; renderActions(region: string): JSX.Element | null; renderHeader(editable?: boolean): JSX.Element | JSX.Element[] | null; renderFooter(): JSX.Element | JSX.Element[] | null; renderItemActions(): JSX.Element | null; renderTableContent(): JSX.Element; render(): JSX.Element; } export declare class TableRenderer extends Table { } export { TableCell };