2019-01-01 04:13:51 +00:00
|
|
|
// Project: https://github.com/vueComponent/ant-design-vue
|
|
|
|
// Definitions by: akki-jat <https://github.com/akki-jat>
|
|
|
|
// Definitions: https://github.com/vueComponent/ant-design-vue/types
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
import { AntdComponent } from '../component';
|
2020-08-19 07:24:55 +00:00
|
|
|
import { SpinProps } from '../spin';
|
2019-01-12 03:33:27 +00:00
|
|
|
import { Pagination } from '../pagination';
|
2020-08-19 07:24:55 +00:00
|
|
|
import { Column, ColumnProps, SortOrder } from './column';
|
2019-01-12 03:33:27 +00:00
|
|
|
import { ColumnGroup } from './column-group';
|
2020-08-17 13:12:17 +00:00
|
|
|
import { VNodeChild } from 'vue';
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
export declare class PaginationConfig extends Pagination {
|
2020-08-17 13:12:17 +00:00
|
|
|
position?: 'top' | 'bottom' | 'both';
|
2019-01-01 04:13:51 +00:00
|
|
|
}
|
|
|
|
|
2020-08-19 07:24:55 +00:00
|
|
|
export interface SorterResult<T> {
|
|
|
|
column: ColumnProps<T>;
|
|
|
|
order: SortOrder;
|
|
|
|
field: string;
|
|
|
|
columnKey: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectionItem {
|
2019-01-01 04:13:51 +00:00
|
|
|
/**
|
|
|
|
* Key
|
|
|
|
* @description Unique key of this selection
|
|
|
|
* @default undefined
|
|
|
|
* @type string
|
|
|
|
*/
|
|
|
|
key?: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Text
|
|
|
|
* @description Display text of this selection
|
|
|
|
* @default undefined
|
|
|
|
* @type string | VNode
|
|
|
|
*/
|
2020-08-17 13:12:17 +00:00
|
|
|
text?: string | VNodeChild | JSX.Element;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* On Select
|
|
|
|
* @description Callback executed when this selection is clicked
|
|
|
|
* @default undefined
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onSelect?: (changeableRowKeys?: string[]) => void;
|
2019-01-01 04:13:51 +00:00
|
|
|
}
|
|
|
|
|
2020-08-19 07:24:55 +00:00
|
|
|
export interface TableCurrentDataSource<T> {
|
|
|
|
currentDataSource: T[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TableRowSelection<T> {
|
2019-01-01 04:13:51 +00:00
|
|
|
/**
|
|
|
|
* checkbox or radio
|
|
|
|
* @default 'checkbox'
|
|
|
|
* @type string
|
|
|
|
*/
|
2019-01-12 03:33:27 +00:00
|
|
|
type?: 'checkbox' | 'radio';
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Controlled selected row keys
|
|
|
|
* @type string[]
|
|
|
|
*/
|
|
|
|
selectedRowKeys?: string[];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get Checkbox or Radio props
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
getCheckboxProps?: (record: T) => Object;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom selection config, only displays default selections when set to true
|
|
|
|
* @type boolean | object[]
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
selections?: boolean | SelectionItem[];
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove the default Select All and Select Invert selections
|
|
|
|
* @default false
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
hideDefaultSelections?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Fixed selection column on the left
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
fixed?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the width of the selection column
|
|
|
|
* @type string | number
|
|
|
|
*/
|
|
|
|
columnWidth?: string | number;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the title of the selection column
|
|
|
|
* @type string | VNode
|
|
|
|
*/
|
2020-08-17 13:12:17 +00:00
|
|
|
columnTitle?: VNodeChild | JSX.Element;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when selected rows change
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when select/deselect one row
|
2020-08-19 07:24:55 +00:00
|
|
|
* @type FunctionT
|
2019-01-01 04:13:51 +00:00
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when select/deselect all rows
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when row selection is inverted
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onSelectInvert?: (selectedRows: string[] | number[]) => any;
|
2019-01-01 04:13:51 +00:00
|
|
|
}
|
|
|
|
|
2020-08-19 07:24:55 +00:00
|
|
|
export interface TableCustomRecord<T> {
|
|
|
|
record?: T;
|
2020-08-17 13:12:17 +00:00
|
|
|
index?: number;
|
|
|
|
}
|
|
|
|
|
2020-08-19 07:24:55 +00:00
|
|
|
export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> {
|
2020-08-17 13:12:17 +00:00
|
|
|
indent?: number;
|
|
|
|
expanded?: boolean;
|
|
|
|
}
|
|
|
|
|
2020-08-19 07:24:55 +00:00
|
|
|
export declare class Table<T> extends AntdComponent {
|
2019-01-19 10:56:33 +00:00
|
|
|
static Column: typeof Column;
|
|
|
|
static ColumnGroup: typeof ColumnGroup;
|
2019-01-01 04:13:51 +00:00
|
|
|
|
2020-08-17 13:12:17 +00:00
|
|
|
$props: {
|
|
|
|
/**
|
|
|
|
* Whether to show all table borders
|
|
|
|
* @default false
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
bordered?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The column contains children to display
|
|
|
|
* @default 'children'
|
|
|
|
* @type string | string[]
|
|
|
|
*/
|
|
|
|
childrenColumnName?: string | string[];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Columns of table
|
|
|
|
* @type array
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
columns?: ColumnProps<T>[];
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Override default table elements
|
|
|
|
* @type object
|
|
|
|
*/
|
|
|
|
components?: object;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Data record array to be displayed
|
|
|
|
* @type array
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
dataSource?: T[];
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Expand all rows initially
|
|
|
|
* @default false
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
defaultExpandAllRows?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Initial expanded row keys
|
|
|
|
* @type string[]
|
|
|
|
*/
|
|
|
|
defaultExpandedRowKeys?: string[];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Current expanded row keys
|
|
|
|
* @type string[]
|
|
|
|
*/
|
|
|
|
expandedRowKeys?: string[];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Expanded container render for each row
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Customize row expand Icon.
|
|
|
|
* @type Function | VNodeChild
|
|
|
|
*/
|
|
|
|
expandIcon?: Function | VNodeChild | JSX.Element;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Whether to expand row by clicking anywhere in the whole row
|
|
|
|
* @default false
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
expandRowByClick?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
|
|
|
|
*/
|
|
|
|
expandIconColumnIndex?: number;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Table footer renderer
|
|
|
|
* @type Function | VNodeChild
|
|
|
|
*/
|
|
|
|
footer?: Function | VNodeChild | JSX.Element;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Indent size in pixels of tree data
|
|
|
|
* @default 15
|
|
|
|
* @type number
|
|
|
|
*/
|
|
|
|
indentSize?: number;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Loading status of table
|
|
|
|
* @default false
|
|
|
|
* @type boolean | object
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
loading?: boolean | SpinProps | VNodeChild | JSX.Element;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* i18n text including filter, sort, empty text, etc
|
|
|
|
* @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
|
|
|
|
* @type object
|
|
|
|
*/
|
|
|
|
locale?: object;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Pagination config or [Pagination] (/components/pagination/), hide it by setting it to false
|
|
|
|
* @type boolean | PaginationConfig
|
|
|
|
*/
|
|
|
|
pagination?: boolean | PaginationConfig;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Row's className
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
rowClassName?: (record?: TableCustomRecord<T>) => string;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Row's unique key, could be a string or function that returns a string
|
|
|
|
* @default 'key'
|
|
|
|
* @type string | Function
|
|
|
|
*/
|
|
|
|
rowKey?: string | Function;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Row selection config
|
|
|
|
* @type object
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
rowSelection?: TableRowSelection<T>;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
|
|
|
|
* It is recommended to set a number for x, if you want to set it to true,
|
|
|
|
* you need to add style .ant-table td { white-space: nowrap; }.
|
|
|
|
* @type object
|
|
|
|
*/
|
|
|
|
scroll?: { x: number | true; y: number };
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Whether to show table header
|
|
|
|
* @default true
|
|
|
|
* @type boolean
|
|
|
|
*/
|
|
|
|
showHeader?: boolean;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Size of table
|
|
|
|
* @default 'default'
|
|
|
|
* @type string
|
|
|
|
*/
|
|
|
|
size?: 'default' | 'middle' | 'small' | 'large';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Table title renderer
|
|
|
|
* @type Function | ScopedSlot
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
title?: VNodeChild | JSX.Element;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set props on per header row
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
customHeaderRow?: (column: ColumnProps<T>, index: number) => object;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set props on per row
|
|
|
|
* @type Function
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
customRow?: (record: T, index: number) => object;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* `table-layout` attribute of table element
|
|
|
|
* `fixed` when header/columns are fixed, or using `column.ellipsis`
|
|
|
|
*
|
|
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
|
|
|
|
* @version 1.5.0
|
|
|
|
*/
|
|
|
|
tableLayout?: 'auto' | 'fixed' | string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* the render container of dropdowns in table
|
|
|
|
* @param triggerNode
|
|
|
|
* @version 1.5.0
|
|
|
|
*/
|
|
|
|
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Data can be changed again before rendering.
|
|
|
|
* The default configuration of general user empty data.
|
|
|
|
* You can configured globally through [ConfigProvider](https://antdv.com/components/config-provider-cn/)
|
|
|
|
*
|
|
|
|
* @version 1.5.4
|
|
|
|
*/
|
|
|
|
transformCellText?: Function;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when pagination, filters or sorter is changed
|
|
|
|
* @param pagination
|
|
|
|
* @param filters
|
|
|
|
* @param sorter
|
|
|
|
* @param currentDataSource
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onChange?: (
|
|
|
|
pagination: PaginationConfig,
|
|
|
|
filters: Partial<Record<keyof T, string[]>>,
|
|
|
|
sorter: SorterResult<T>,
|
|
|
|
extra: TableCurrentDataSource<T>,
|
|
|
|
) => void;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when the row expand icon is clicked
|
|
|
|
*
|
|
|
|
* @param expanded
|
|
|
|
* @param record
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onExpand?: (expande: boolean, record: T) => void;
|
2020-08-17 13:12:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback executed when the expanded rows change
|
|
|
|
* @param expandedRows
|
|
|
|
*/
|
2020-08-19 07:24:55 +00:00
|
|
|
onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
|
2019-01-01 04:13:51 +00:00
|
|
|
};
|
|
|
|
}
|