table.js
2.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
export function Table( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
return <div className="sui-table-wrap">
<table
{... id ? {id} : {}}
className={`sui-table ${classes}`}
>
{props.children}
</table>
</div>
}
export function TableRow( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
return <tr
{... id ? {id} : {}}
className={classes}
>
{props.children}
</tr>
}
export function TableColumn( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
let colspan = props.colspan !== undefined ? props.colspan : '';
let rowspan = props.rowspan !== undefined ? props.colspan : '';
let isTitle = props.isTitle !== undefined ? props.isTitle : false;
if ( isTitle ) {
classes += ' sui-table-item-title';
}
return <td
{... id ? {id} : {}}
className={classes}
{... colspan ? {colspan} : {}}
{... rowspan ? {rowspan} : {}}
>
{props.children}
</td>
}
export function HeaderCell( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
let colspan = props.colspan !== undefined ? props.colspan : '';
let rowspan = props.rowspan !== undefined ? props.colspan : '';
return <th
{... id ? {id} : {}}
className={classes}
{... colspan ? {colspan} : {}}
{... rowspan ? {rowspan} : {}}
>
{props.children}
</th>
}
export function TableHead( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
return <thead
{... id ? {id} : {}}
className={classes}
>
{props.children}
</thead>
}
export function TableBody( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
return <tbody
{... id ? {id} : {}}
className={classes}
>
{props.children}
</tbody>
}
export function TableFooter( props ) {
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
return <tfoot
{... id ? {id} : {}}
className={classes}
>
{props.children}
</tfoot>
}