1 |
|
2 |
|
3 | import * as React from 'react';
|
4 | import CommonProps from '../util';
|
5 | import { LoadingProps } from '../loading';
|
6 | import { AffixProps } from '../affix';
|
7 |
|
8 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
9 | title?: any;
|
10 | }
|
11 |
|
12 | export interface ColumnProps extends HTMLAttributesWeak, CommonProps {
|
13 | |
14 |
|
15 |
|
16 | dataIndex?: string;
|
17 |
|
18 | |
19 |
|
20 |
|
21 |
|
22 |
|
23 | cell?: React.ReactElement<any> | React.ReactNode | ((value: any, index: string, record: any) => any);
|
24 |
|
25 | /**
|
26 | * 表头显示的内容
|
27 | * value, rowIndex, record, context四个属性只可读不可被更改
|
28 | */
|
29 | title?: React.ReactElement<any> | React.ReactNode | (() => any);
|
30 |
|
31 | htmlTitle?: string;
|
32 | /**
|
33 | * 是否支持排序
|
34 | */
|
35 | sortable?: boolean;
|
36 |
|
37 | /**
|
38 | * 列宽,注意在锁列的情况下一定需要配置宽度
|
39 | */
|
40 | width?: number | string;
|
41 |
|
42 | /**
|
43 | * 单元格的对齐方式
|
44 | */
|
45 | align?: 'left' | 'center' | 'right';
|
46 | sortDirections?: Array<'desc' | 'asc' | 'default'>;
|
47 | /**
|
48 | * 单元格标题的对齐方式, 不配置默认读取align值
|
49 | */
|
50 | alignHeader?: 'left' | 'center' | 'right';
|
51 |
|
52 | /**
|
53 | * 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]`
|
54 | */
|
55 | filters?: Array<any>;
|
56 |
|
57 | /**
|
58 | * 过滤的模式是单选还是多选
|
59 | */
|
60 | filterMode?: 'single' | 'multiple';
|
61 |
|
62 | /**
|
63 | * 是否支持锁列,可选值为`left`,`right`, `true`
|
64 | */
|
65 | lock?: boolean | string;
|
66 |
|
67 | /**
|
68 | * 是否支持列宽调整, 当该值设为true,table的布局方式会修改为fixed.
|
69 | */
|
70 | resizable?: boolean;
|
71 | /**
|
72 | * 是否支持异步列宽调整, 当该值设为true,table的布局方式会修改为fixed.
|
73 | */
|
74 | asyncResizable?: boolean;
|
75 |
|
76 | /**
|
77 | * header cell 横跨的格数,设置为0表示不出现此 th
|
78 | */
|
79 | colSpan?: number;
|
80 | }
|
81 |
|
82 | export class Column extends React.Component<ColumnProps, any> {}
|
83 |
|
84 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
85 | title?: any;
|
86 | }
|
87 |
|
88 | export interface ColumnGroupProps extends HTMLAttributesWeak, CommonProps {
|
89 | /**
|
90 | * 表头显示的内容
|
91 | */
|
92 | title?: React.ReactElement<any> | React.ReactNode | (() => any);
|
93 | }
|
94 |
|
95 | export class ColumnGroup extends React.Component<ColumnGroupProps, any> {}
|
96 |
|
97 | export interface GroupHeaderProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
98 | /**
|
99 | * 行渲染的逻辑
|
100 | */
|
101 | cell?: React.ReactElement<any> | React.ReactNode | ((value: any, index: string, record: any) => any);
|
102 |
|
103 | /**
|
104 | * 是否在Children上面渲染selection
|
105 | */
|
106 | hasChildrenSelection?: boolean;
|
107 |
|
108 | /**
|
109 | * 是否在GroupHeader上面渲染selection
|
110 | */
|
111 | hasSelection?: boolean;
|
112 |
|
113 | /**
|
114 | * 当 dataSouce 里没有 children 时,是否使用内容作为数据
|
115 | */
|
116 | useFirstLevelDataWhenNoChildren?: boolean;
|
117 | }
|
118 |
|
119 | export class GroupHeader extends React.Component<GroupHeaderProps, any> {}
|
120 |
|
121 | export interface GroupFooterProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
122 | /**
|
123 | * 行渲染的逻辑
|
124 | */
|
125 | cell?: React.ReactElement<any> | React.ReactNode | ((value: any, index: string, record: any) => any);
|
126 | }
|
127 |
|
128 | export class GroupFooter extends React.Component<GroupFooterProps, any> {}
|
129 |
|
130 | export interface BaseTableProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
131 | /**
|
132 | * 样式类名的品牌前缀
|
133 | */
|
134 | prefix?: string;
|
135 |
|
136 | /**
|
137 | * 尺寸 small为紧凑模式
|
138 | */
|
139 | size?: 'small' | 'medium';
|
140 |
|
141 | /**
|
142 | * 自定义类名
|
143 | */
|
144 | className?: string;
|
145 |
|
146 | /**
|
147 | * 自定义内联样式
|
148 | */
|
149 | style?: React.CSSProperties;
|
150 | columns?: Array<any>;
|
151 | /**
|
152 | * 表格元素的 table-layout 属性,设为 fixed 表示内容不会影响列的布局
|
153 | */
|
154 | tableLayout?: 'fixed' | 'auto';
|
155 | /**
|
156 | * 表格的总长度,可以这么用:设置表格总长度 、设置部分列的宽度,这样表格会按照剩余空间大小,自动其他列分配宽度
|
157 | */
|
158 | tableWidth?: number;
|
159 | /**
|
160 | * 表格展示的数据源
|
161 | */
|
162 | dataSource?: Array<any>;
|
163 |
|
164 | /**
|
165 | * 表格是否具有边框
|
166 | */
|
167 | hasBorder?: boolean;
|
168 |
|
169 | /**
|
170 | * 表格是否具有头部
|
171 | */
|
172 | hasHeader?: boolean;
|
173 |
|
174 | /**
|
175 | * 表格是否是斑马线
|
176 | */
|
177 | isZebra?: boolean;
|
178 |
|
179 | /**
|
180 | * 表格是否在加载中
|
181 | */
|
182 | loading?: boolean;
|
183 |
|
184 | /**
|
185 | * 自定义国际化文案对象
|
186 | */
|
187 | locale?: {
|
188 | ok: string;
|
189 | reset: string;
|
190 | empty: string;
|
191 | asc: string;
|
192 | desc: string;
|
193 | expanded: string;
|
194 | folded: string;
|
195 | filter: string;
|
196 | selectAll: string;
|
197 | };
|
198 |
|
199 | /**
|
200 | * 设置数据为空的时候的表格内容展现
|
201 | */
|
202 | emptyContent?: React.ReactNode;
|
203 |
|
204 | /**
|
205 | * dataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中
|
206 | */
|
207 | primaryKey?: string;
|
208 | }
|
209 | export interface TableProps extends React.HTMLAttributes<HTMLElement>, BaseTableProps {
|
210 |
|
211 | /**
|
212 | * 点击表格每一行触发的事件
|
213 | */
|
214 | onRowClick?: (record: any, index: number, e: React.MouseEvent) => void;
|
215 |
|
216 | |
217 |
|
218 |
|
219 | onRowMouseEnter?: (record: any, index: number, e: React.MouseEvent) => void;
|
220 |
|
221 | |
222 |
|
223 |
|
224 | onRowMouseLeave?: (record: any, index: number, e: React.MouseEvent) => void;
|
225 |
|
226 | |
227 |
|
228 |
|
229 | onSort?: (dataIndex: string, order: string) => void;
|
230 |
|
231 | |
232 |
|
233 |
|
234 | onFilter?: (filterParams: any) => void;
|
235 |
|
236 | |
237 |
|
238 |
|
239 | onResizeChange?: (dataIndex: string, value: number) => void;
|
240 |
|
241 | |
242 |
|
243 |
|
244 | getRowProps?: (record: any, index: number) => any;
|
245 | rowProps?: (record: any, index: number) => any;
|
246 |
|
247 | |
248 |
|
249 |
|
250 | getCellProps?: (
|
251 | rowIndex: number,
|
252 | colIndex: number,
|
253 | dataIndex: string,
|
254 | record: any
|
255 | ) => any;
|
256 | cellProps?: (
|
257 | rowIndex: number,
|
258 | colIndex: number,
|
259 | dataIndex: string,
|
260 | record: any
|
261 | ) => any;
|
262 |
|
263 | |
264 |
|
265 |
|
266 |
|
267 | loadingComponent?: (props: LoadingProps) => React.ReactNode;
|
268 |
|
269 | |
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 | filterParams?: {[propName: string]: any};
|
276 |
|
277 | |
278 |
|
279 |
|
280 | sort?: {[propName: string]: any};
|
281 |
|
282 | |
283 |
|
284 |
|
285 | sortIcons?: {desc?: React.ReactNode; asc?: React.ReactNode};
|
286 |
|
287 | |
288 |
|
289 |
|
290 | expandedRowRender?: (record: any, index: number) => React.ReactElement<any>;
|
291 | rowExpandable?: (record: any) => boolean;
|
292 |
|
293 | |
294 |
|
295 |
|
296 | expandedRowIndent?: Array<any>;
|
297 |
|
298 | |
299 |
|
300 |
|
301 | openRowKeys?: Array<any>;
|
302 |
|
303 | |
304 |
|
305 |
|
306 | hasExpandedRowCtrl?: boolean;
|
307 |
|
308 | |
309 |
|
310 |
|
311 | getExpandedColProps?: <IRecord extends any = any>(record: IRecord, index: number) => object | Record<string | number, any>;
|
312 |
|
313 | |
314 |
|
315 |
|
316 | onRowOpen?: (
|
317 | openRowKeys: Array<any>,
|
318 | currentRowKey: string,
|
319 | expanded: boolean,
|
320 | currentRecord:any
|
321 | ) => void;
|
322 |
|
323 | |
324 |
|
325 |
|
326 | onExpandedRowClick?: (record: any, index: number, e: React.MouseEvent) => void;
|
327 |
|
328 | |
329 |
|
330 |
|
331 | fixedHeader?: boolean;
|
332 |
|
333 | |
334 |
|
335 |
|
336 | maxBodyHeight?: number | string;
|
337 |
|
338 | |
339 |
|
340 |
|
341 | rowSelection?: {
|
342 | getProps?: (record: any, index: number) => void;
|
343 | onChange?: (selectedRowKeys: Array<any>, records: Array<any>) => void;
|
344 | onSelect?: (
|
345 | selected: boolean,
|
346 | record: any,
|
347 | records: Array<any>
|
348 | ) => void;
|
349 | onSelectAll?: (selected: boolean, records: Array<any>) => void;
|
350 | selectedRowKeys?: Array<any>;
|
351 | mode?: 'single' | 'multiple';
|
352 | titleProps?: () => any;
|
353 | columnProps?: () => any;
|
354 | titleAddons?: () => any;
|
355 | };
|
356 |
|
357 | |
358 |
|
359 |
|
360 | stickyHeader?: boolean;
|
361 |
|
362 | |
363 |
|
364 |
|
365 | offsetTop?: number;
|
366 |
|
367 | |
368 |
|
369 |
|
370 | affixProps?: AffixProps;
|
371 |
|
372 | |
373 |
|
374 |
|
375 | indent?: number;
|
376 |
|
377 | |
378 |
|
379 |
|
380 | isTree?: boolean;
|
381 |
|
382 | |
383 |
|
384 |
|
385 | useVirtual?: boolean;
|
386 |
|
387 | |
388 |
|
389 |
|
390 | scrollToRow?: number;
|
391 |
|
392 | |
393 |
|
394 |
|
395 | rowHeight?: number | (() => any);
|
396 |
|
397 | /**
|
398 | * 在内容区域滚动的时候触发的函数
|
399 | */
|
400 | onBodyScroll?: () => void;
|
401 |
|
402 | |
403 |
|
404 |
|
405 | expandedIndexSimulate?: boolean;
|
406 | |
407 |
|
408 |
|
409 | crossline?: boolean;
|
410 | }
|
411 |
|
412 | export default class Table extends React.Component<TableProps, any> {
|
413 | static Column: typeof Column;
|
414 | static ColumnGroup: typeof ColumnGroup;
|
415 | static GroupHeader: typeof GroupHeader;
|
416 | static GroupFooter: typeof GroupFooter;
|
417 | static StickyLock: typeof Table;
|
418 | static Base: typeof Table;
|
419 | }
|