UNPKG

11.3 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5import { LoadingProps } from '../loading';
6import { AffixProps } from '../affix';
7
8interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
9 title?: any;
10}
11
12export interface ColumnProps extends HTMLAttributesWeak, CommonProps {
13 /**
14 * 指定列对应的字段,支持`a.b`形式的快速取值
15 */
16 dataIndex?: string;
17
18 /**
19 * 行渲染的逻辑
20 * value, rowIndex, record, context四个属性只可读不可被更改
21 * Function(value, index, record) => Element
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 * 是否支持列宽调整, 当该值设为truetable的布局方式会修改为fixed.
69 */
70 resizable?: boolean;
71 /**
72 * 是否支持异步列宽调整, 当该值设为truetable的布局方式会修改为fixed.
73 */
74 asyncResizable?: boolean;
75
76 /**
77 * header cell 横跨的格数,设置为0表示不出现此 th
78 */
79 colSpan?: number;
80}
81
82export class Column extends React.Component<ColumnProps, any> {}
83
84interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
85 title?: any;
86}
87
88export interface ColumnGroupProps extends HTMLAttributesWeak, CommonProps {
89 /**
90 * 表头显示的内容
91 */
92 title?: React.ReactElement<any> | React.ReactNode | (() => any);
93}
94
95export class ColumnGroup extends React.Component<ColumnGroupProps, any> {}
96
97export 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
119export class GroupHeader extends React.Component<GroupHeaderProps, any> {}
120
121export 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
128export class GroupFooter extends React.Component<GroupFooterProps, any> {}
129
130export 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}
209export 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 * 自定义 Loading 组件
265 * 请务必传递 props, 使用方式: loadingComponent={props => <Loading {...props}/>}
266 */
267 loadingComponent?: (props: LoadingProps) => React.ReactNode;
268
269 /**
270 * 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}}
271 * 示例:
272 * 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中
273 * `<Table filterParams={{id: {selectedKeys: ['one']}}}/>`
274 */
275 filterParams?: {[propName: string]: any};
276
277 /**
278 * 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'}
279 */
280 sort?: {[propName: string]: any};
281
282 /**
283 * 自定义排序按钮,例如上下排布的: `{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}`
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 * 默认情况下展开的渲染行或者Tree, 传入此属性为受控状态
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 * 在额外渲染行或者Tree展开或者收起的时候触发的事件
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 * 表头是否固定,该属性配合maxBodyHeight使用,当内容区域的高度超过maxBodyHeight的时候,在内容区域会出现滚动条
330 */
331 fixedHeader?: boolean;
332
333 /**
334 * 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条
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 * 表头是否是sticky
359 */
360 stickyHeader?: boolean;
361
362 /**
363 * 距离窗口顶部达到指定偏移量后触发
364 */
365 offsetTop?: number;
366
367 /**
368 * affix组件的的属性
369 */
370 affixProps?: AffixProps;
371
372 /**
373 * 在tree模式下的缩进尺寸, 仅在isTree为true时候有效
374 */
375 indent?: number;
376
377 /**
378 * 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table
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 * 开启时,getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回,否则返回真实index(0,2,4,6... / 1,3,5,7...)
404 */
405 expandedIndexSimulate?: boolean;
406 /**
407 * 在 hover 时出现十字参考轴,适用于表头比较复杂,需要做表头分类的场景。
408 */
409 crossline?: boolean;
410}
411
412export 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}