1 | import { CreateElement, VNode } from 'vue'
|
2 | import { ElementUIComponent, ElementUIHorizontalAlignment } from './component'
|
3 | import { PopoverPlacement } from './popover'
|
4 |
|
5 | export type TableColumnType = 'default' | 'selection' | 'index' | 'expand'
|
6 | export type TableColumnFixedType = 'left' | 'right'
|
7 | export type SortOrders = 'ascending' | 'descending' | null
|
8 |
|
9 | export type TableColumn = {
|
10 | /** Label of the column */
|
11 | label: string,
|
12 |
|
13 | /** Property name of the source data */
|
14 | property: string,
|
15 |
|
16 | /** Type of the column */
|
17 | type: string,
|
18 |
|
19 | /** Whether column is fixed at left/right */
|
20 | fixed: boolean | string
|
21 | }
|
22 |
|
23 | /** Data used in renderHeader function */
|
24 | export interface RenderHeaderData {
|
25 | /** The column that is current rendering */
|
26 | column: any,
|
27 |
|
28 | /** The index of the rendering column */
|
29 | $index: number
|
30 | }
|
31 |
|
32 | /** Filter Object */
|
33 | export interface TableColumnFilter {
|
34 | /** The text to show in the filter's panel */
|
35 | text: string,
|
36 |
|
37 | /** The value of the filter */
|
38 | value: any
|
39 | }
|
40 |
|
41 | /** TableColumn Component */
|
42 | export declare class ElTableColumn extends ElementUIComponent {
|
43 | /** Type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. */
|
44 | type: TableColumnType
|
45 |
|
46 | /** Column label */
|
47 | label: string
|
48 |
|
49 | /** Column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered */
|
50 | columnKey: string
|
51 |
|
52 | /** Field name. You can also use its alias: property */
|
53 | prop: string
|
54 |
|
55 | /** Column width */
|
56 | width: string
|
57 |
|
58 | /** Column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion */
|
59 | minWidth: string
|
60 |
|
61 | /** Whether column is fixed at left/right. Will be fixed at left if `true` */
|
62 | fixed: boolean | TableColumnFixedType
|
63 |
|
64 | /** Render function for table header of this column */
|
65 | renderHeader: (h: CreateElement, data: RenderHeaderData) => VNode | string
|
66 |
|
67 | /** Whether column can be sorted */
|
68 | sortable: boolean
|
69 |
|
70 | /** Sorting method. Works when `sortable` is `true` */
|
71 | sortMethod: (a: any, b: any) => number
|
72 |
|
73 | /** The order of the sorting strategies used when sorting the data. Works when `sortable` is `true`. */
|
74 | sortOrders: SortOrders[]
|
75 |
|
76 | /** Whether column width can be resized. Works when border of `el-table` is `true` */
|
77 | resizable: boolean
|
78 |
|
79 | /** Function that formats content */
|
80 | formatter: (row: object, column: TableColumn) => any
|
81 |
|
82 | /** Whether to hide extra content and show them in a tooltip when hovering on the cell */
|
83 | showOverflowTooltip: boolean
|
84 |
|
85 | /** Alignment */
|
86 | align: ElementUIHorizontalAlignment
|
87 |
|
88 | /** Alignment of the table header. If omitted, the value of the `align` attribute will be applied */
|
89 | headerAlign: ElementUIHorizontalAlignment
|
90 |
|
91 | /** Class name of cells in the column */
|
92 | className: string
|
93 |
|
94 | /** Class name of the label of this column */
|
95 | labelClassName: string
|
96 |
|
97 | /** Function that determines if a certain row can be selected, works when `type` is `'selection'` */
|
98 | selectable: (row: object, index: number) => boolean
|
99 |
|
100 | /** Whether to reserve selection after data refreshing, works when `type` is `'selection'` */
|
101 | reserveSelection: boolean
|
102 |
|
103 | /** An array of data filtering options */
|
104 | filters: TableColumnFilter[]
|
105 |
|
106 | /** Placement for the filter dropdown */
|
107 | filterPlacement: PopoverPlacement
|
108 |
|
109 | /** Whether data filtering supports multiple options */
|
110 | filterMultiple: Boolean
|
111 |
|
112 | /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */
|
113 | filterMethod: (value: any, row: object) => boolean
|
114 |
|
115 | /** Filter value for selected data, might be useful when table header is rendered with `render-header` */
|
116 | filteredValue: TableColumnFilter[]
|
117 | }
|