ant-design-vue/types/table/table.d.ts

365 lines
8.4 KiB
TypeScript

// 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
import { AntdComponent } from '../component';
import { SpinProps } from '../spin';
import { Pagination } from '../pagination';
import { Column, ColumnProps, SortOrder } from './column';
import { ColumnGroup } from './column-group';
import { VNodeChild } from 'vue';
export declare class PaginationConfig extends Pagination {
position?: 'top' | 'bottom' | 'both';
}
export interface SorterResult<T> {
column: ColumnProps<T>;
order: SortOrder;
field: string;
columnKey: string;
}
export interface SelectionItem {
/**
* 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
*/
text?: string | VNodeChild | JSX.Element;
/**
* On Select
* @description Callback executed when this selection is clicked
* @default undefined
* @type Function
*/
onSelect?: (changeableRowKeys?: string[]) => void;
}
export interface TableCurrentDataSource<T> {
currentDataSource: T[];
}
export interface TableRowSelection<T> {
/**
* checkbox or radio
* @default 'checkbox'
* @type string
*/
type?: 'checkbox' | 'radio';
/**
* Controlled selected row keys
* @type string[]
*/
selectedRowKeys?: string[];
/**
* Get Checkbox or Radio props
* @type Function
*/
getCheckboxProps?: (record: T) => Object;
/**
* Custom selection config, only displays default selections when set to true
* @type boolean | object[]
*/
selections?: boolean | SelectionItem[];
/**
* 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
*/
columnTitle?: VNodeChild | JSX.Element;
/**
* Callback executed when selected rows change
* @type Function
*/
onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
/**
* Callback executed when select/deselect one row
* @type FunctionT
*/
onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
/**
* Callback executed when select/deselect all rows
* @type Function
*/
onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any;
/**
* Callback executed when row selection is inverted
* @type Function
*/
onSelectInvert?: (selectedRows: string[] | number[]) => any;
}
export interface TableCustomRecord<T> {
record?: T;
index?: number;
}
export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> {
indent?: number;
expanded?: boolean;
}
export declare class Table<T> extends AntdComponent {
static Column: typeof Column;
static ColumnGroup: typeof ColumnGroup;
$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
*/
columns?: ColumnProps<T>[];
/**
* Override default table elements
* @type object
*/
components?: object;
/**
* Data record array to be displayed
* @type array
*/
dataSource?: T[];
/**
* 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
*/
expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element;
/**
* 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
*/
loading?: boolean | SpinProps | VNodeChild | JSX.Element;
/**
* 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
*/
rowClassName?: (record?: TableCustomRecord<T>) => string;
/**
* 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
*/
rowSelection?: TableRowSelection<T>;
/**
* 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
*/
title?: VNodeChild | JSX.Element;
/**
* Set props on per header row
* @type Function
*/
customHeaderRow?: (column: ColumnProps<T>, index: number) => object;
/**
* Set props on per row
* @type Function
*/
customRow?: (record: T, index: number) => object;
/**
* `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
*/
onChange?: (
pagination: PaginationConfig,
filters: Partial<Record<keyof T, string[]>>,
sorter: SorterResult<T>,
extra: TableCurrentDataSource<T>,
) => void;
/**
* Callback executed when the row expand icon is clicked
*
* @param expanded
* @param record
*/
onExpand?: (expande: boolean, record: T) => void;
/**
* Callback executed when the expanded rows change
* @param expandedRows
*/
onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
};
}