playbook_ui_docs 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +32 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/{_table_outer_padding.html.erb → _table_alignment_row.html.erb} +7 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +50 -51
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +38 -37
- data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/dist/menu.yml +2 -5
- data/dist/playbook-doc.js +10 -10
- metadata +6 -19
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +0 -159
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +0 -121
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +0 -54
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +0 -53
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +0 -76
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f58670d450fdd2397e459f39e55cbe6e4022e97416c9adee7c469e4d02474f99
|
|
4
|
+
data.tar.gz: c7f35ac44f741a7f1b6e7d91527b45e8132c08106384f5bdc802327deff63e13
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 12237f5e82cb5f5ed686a1bb48d7ce512ea5b9d32869cfa76a6c692e475b4774b5fb6b4b51a87779a96682cf2268be46d329d5c1c0ca1d7054d7c7dd977fbf77
|
|
7
|
+
data.tar.gz: 8f49c3c1c13c6714bb6dadfee21a4264b6547de8ee9adf8991bde83abbf1317483fa34409b26a3c2718817a7b3621b70f1d03a4a68711c7755141ab8e99f805a
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table") do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th align="center">Rating</th>
|
|
8
|
+
<th align="right">Money</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>Value 1</td>
|
|
14
|
+
<td>Value 2</td>
|
|
15
|
+
<td>Value 3</td>
|
|
16
|
+
<td align="center">3</td>
|
|
17
|
+
<td align="right">$57.32</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>Value 1</td>
|
|
21
|
+
<td>Value 2</td>
|
|
22
|
+
<td>Value 3</td>
|
|
23
|
+
<td align="center">2</td>
|
|
24
|
+
<td align="right">$5,657.08</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Value 1</td>
|
|
28
|
+
<td>Value 2</td>
|
|
29
|
+
<td>Value 3</td>
|
|
30
|
+
<td align="center">4</td>
|
|
31
|
+
<td align="right">$358.77</td>
|
|
32
|
+
</tr>
|
|
33
|
+
</tbody>
|
|
34
|
+
<% end %>
|
|
@@ -7,40 +7,39 @@ const TableAlignmentColumn = (props) => {
|
|
|
7
7
|
<Table
|
|
8
8
|
{...props}
|
|
9
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
|
-
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>{'Column 1'}</th>
|
|
13
|
+
<th>{'Column 2'}</th>
|
|
14
|
+
<th>{'Column 3'}</th>
|
|
15
|
+
<th align="center">{'Rating'}</th>
|
|
16
|
+
<th align="right">{'Money'}</th>
|
|
17
|
+
</tr>
|
|
18
|
+
</thead>
|
|
19
|
+
<tbody>
|
|
20
|
+
<tr>
|
|
21
|
+
<td>{'Value 1'}</td>
|
|
22
|
+
<td>{'Value 2'}</td>
|
|
23
|
+
<td>{'Value 3'}</td>
|
|
24
|
+
<td align="center">{'3'}</td>
|
|
25
|
+
<td align="right">{'$57.32'}</td>
|
|
26
|
+
</tr>
|
|
27
|
+
<tr>
|
|
28
|
+
<td>{'Value 1'}</td>
|
|
29
|
+
<td>{'Value 2'}</td>
|
|
30
|
+
<td>{'Value 3'}</td>
|
|
31
|
+
<td align="center">{'2'}</td>
|
|
32
|
+
<td align="right">{'$5,657.08'}</td>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr>
|
|
35
|
+
<td>{'Value 1'}</td>
|
|
36
|
+
<td>{'Value 2'}</td>
|
|
37
|
+
<td>{'Value 3'}</td>
|
|
38
|
+
<td align="center">{'4'}</td>
|
|
39
|
+
<td align="right">{'$358.77'}</td>
|
|
40
|
+
</tr>
|
|
41
|
+
</tbody>
|
|
42
42
|
</Table>
|
|
43
|
-
|
|
44
43
|
)
|
|
45
44
|
}
|
|
46
45
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
You can individually align a piece of table data, but a more practical use would be applied to align a column.
|
|
2
2
|
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<%= pb_rails("table"
|
|
1
|
+
<%= pb_rails("table") do %>
|
|
2
2
|
<thead>
|
|
3
3
|
<tr>
|
|
4
4
|
<th>Column 1</th>
|
|
5
5
|
<th>Column 2</th>
|
|
6
6
|
<th>Column 3</th>
|
|
7
7
|
<th>Column 4</th>
|
|
8
|
-
<th
|
|
8
|
+
<th>Column 5</th>
|
|
9
9
|
</tr>
|
|
10
10
|
</thead>
|
|
11
11
|
<tbody>
|
|
@@ -14,21 +14,21 @@
|
|
|
14
14
|
<td>Value 2</td>
|
|
15
15
|
<td>Value 3</td>
|
|
16
16
|
<td>Value 4</td>
|
|
17
|
-
<td
|
|
17
|
+
<td>Value 5</td>
|
|
18
18
|
</tr>
|
|
19
|
-
<tr>
|
|
19
|
+
<tr align="center">
|
|
20
20
|
<td>Value 1</td>
|
|
21
21
|
<td>Value 2</td>
|
|
22
22
|
<td>Value 3</td>
|
|
23
23
|
<td>Value 4</td>
|
|
24
|
-
<td
|
|
24
|
+
<td>Value 5</td>
|
|
25
25
|
</tr>
|
|
26
|
-
<tr>
|
|
26
|
+
<tr align="right">
|
|
27
27
|
<td>Value 1</td>
|
|
28
28
|
<td>Value 2</td>
|
|
29
29
|
<td>Value 3</td>
|
|
30
30
|
<td>Value 4</td>
|
|
31
|
-
<td
|
|
31
|
+
<td>Value 5</td>
|
|
32
32
|
</tr>
|
|
33
33
|
</tbody>
|
|
34
34
|
<% end %>
|
|
@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
|
|
|
7
7
|
<Table
|
|
8
8
|
{...props}
|
|
9
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
|
-
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>{'Column 1'}</th>
|
|
13
|
+
<th>{'Column 2'}</th>
|
|
14
|
+
<th>{'Column 3'}</th>
|
|
15
|
+
<th>{'Column 4'}</th>
|
|
16
|
+
<th>{'Column 5'}</th>
|
|
17
|
+
</tr>
|
|
18
|
+
</thead>
|
|
19
|
+
<tbody>
|
|
20
|
+
<tr>
|
|
21
|
+
<td>{'Value 1'}</td>
|
|
22
|
+
<td>{'Value 2'}</td>
|
|
23
|
+
<td>{'Value 3'}</td>
|
|
24
|
+
<td>{'Value 4'}</td>
|
|
25
|
+
<td>{'Value 5'}</td>
|
|
26
|
+
</tr>
|
|
27
|
+
<tr align="center">
|
|
28
|
+
<td>{'Value 1'}</td>
|
|
29
|
+
<td>{'Value 2'}</td>
|
|
30
|
+
<td>{'Value 3'}</td>
|
|
31
|
+
<td>{'Value 4'}</td>
|
|
32
|
+
<td>{'Value 5'}</td>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr align="right">
|
|
35
|
+
<td>{'Value 1'}</td>
|
|
36
|
+
<td>{'Value 2'}</td>
|
|
37
|
+
<td>{'Value 3'}</td>
|
|
38
|
+
<td>{'Value 4'}</td>
|
|
39
|
+
<td>{'Value 5'}</td>
|
|
40
|
+
</tr>
|
|
41
|
+
</tbody>
|
|
42
|
+
</Table>
|
|
43
43
|
)
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
This is to be used to shift the whole row.
|
|
2
2
|
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<%= pb_rails("table") do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th> </th>
|
|
5
|
+
<th>Price</th>
|
|
6
|
+
</tr>
|
|
7
|
+
</thead>
|
|
8
|
+
<tbody>
|
|
9
|
+
<tr>
|
|
10
|
+
<td shift="down">Total</td>
|
|
11
|
+
<td>
|
|
12
|
+
$12
|
|
13
|
+
<br/>
|
|
14
|
+
$46
|
|
15
|
+
<br/>
|
|
16
|
+
$25
|
|
17
|
+
<br/>
|
|
18
|
+
-------
|
|
19
|
+
<br/>
|
|
20
|
+
$83
|
|
21
|
+
</td>
|
|
22
|
+
</tr>
|
|
23
|
+
</tbody>
|
|
24
|
+
<% end %>
|
|
25
|
+
<br/>
|
|
26
|
+
<%= pb_rails("table") do %>
|
|
27
|
+
<thead>
|
|
28
|
+
<tr>
|
|
29
|
+
<th>Espresso Drinks</th>
|
|
30
|
+
<th>Ingredients</th>
|
|
31
|
+
</tr>
|
|
32
|
+
</thead>
|
|
33
|
+
<tbody>
|
|
34
|
+
<tr>
|
|
35
|
+
<td shift="up">Cappuccino</td>
|
|
36
|
+
<td>
|
|
37
|
+
Espresso
|
|
38
|
+
<br/>
|
|
39
|
+
Steamed Milk
|
|
40
|
+
<br/>
|
|
41
|
+
Milk Foam
|
|
42
|
+
</td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<td shift="up">Macchiato</td>
|
|
46
|
+
<td>
|
|
47
|
+
Espresso
|
|
48
|
+
<br/>
|
|
49
|
+
Steamed Milk
|
|
50
|
+
</td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td shift="up">Mocha</td>
|
|
54
|
+
<td>
|
|
55
|
+
Espresso
|
|
56
|
+
<br/>
|
|
57
|
+
Hot Chocolate
|
|
58
|
+
<br/>
|
|
59
|
+
Steamed Milk
|
|
60
|
+
</td>
|
|
61
|
+
</tr>
|
|
62
|
+
</tbody>
|
|
63
|
+
<% end %>
|
|
@@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => {
|
|
|
9
9
|
marginBottom="md"
|
|
10
10
|
{...props}
|
|
11
11
|
>
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
</
|
|
17
|
-
</
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
12
|
+
<thead>
|
|
13
|
+
<tr>
|
|
14
|
+
<th> </th>
|
|
15
|
+
<th>{'Price'}</th>
|
|
16
|
+
</tr>
|
|
17
|
+
</thead>
|
|
18
|
+
<tbody>
|
|
19
|
+
<tr>
|
|
20
|
+
<td shift="down">{'Total'}</td>
|
|
21
|
+
<td>
|
|
22
22
|
{'$12'}
|
|
23
23
|
<br />
|
|
24
24
|
{'$46'}
|
|
@@ -28,51 +28,50 @@ const TableAlignmentShiftData = (props) => {
|
|
|
28
28
|
{'-------'}
|
|
29
29
|
<br />
|
|
30
30
|
{'$83'}
|
|
31
|
-
</
|
|
32
|
-
</
|
|
33
|
-
</
|
|
31
|
+
</td>
|
|
32
|
+
</tr>
|
|
33
|
+
</tbody>
|
|
34
34
|
</Table>
|
|
35
|
-
|
|
36
35
|
<Table
|
|
37
36
|
{...props}
|
|
38
37
|
>
|
|
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
|
-
|
|
38
|
+
<thead>
|
|
39
|
+
<tr>
|
|
40
|
+
<th>{'Espresso Drinks'}</th>
|
|
41
|
+
<th>{'Ingredients'}</th>
|
|
42
|
+
</tr>
|
|
43
|
+
</thead>
|
|
44
|
+
<tbody>
|
|
45
|
+
<tr>
|
|
46
|
+
<td shift="up">{'Cappuccino'}</td>
|
|
47
|
+
<td>
|
|
48
|
+
{'Espresso'}
|
|
49
|
+
<br />
|
|
50
|
+
{'Steamed Milk'}
|
|
51
|
+
<br />
|
|
52
|
+
{'Milk Foam'}
|
|
53
|
+
</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td shift="up">{'Macchiato'}</td>
|
|
57
|
+
<td>
|
|
58
|
+
{'Espresso'}
|
|
59
|
+
<br />
|
|
60
|
+
{'Steamed Milk'}
|
|
61
|
+
</td>
|
|
62
|
+
</tr>
|
|
63
|
+
<tr>
|
|
64
|
+
<td shift="up">{'Mocha'}</td>
|
|
65
|
+
<td>
|
|
66
|
+
{'Espresso'}
|
|
67
|
+
<br />
|
|
68
|
+
{'Hot Chocolate'}
|
|
69
|
+
<br />
|
|
70
|
+
{'Steamed Milk'}
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
</tbody>
|
|
74
|
+
</Table>
|
|
76
75
|
</div>
|
|
77
76
|
)
|
|
78
77
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
You can individually shift a piece of table data, or shift an entire column.
|
|
2
2
|
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<%= pb_rails("table") do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th>Column 4</th>
|
|
8
|
+
<th>Column 5</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>
|
|
14
|
+
Value 1a
|
|
15
|
+
<br/>
|
|
16
|
+
Value 1a
|
|
17
|
+
<br/>
|
|
18
|
+
Value 1a
|
|
19
|
+
</td>
|
|
20
|
+
<td>Value 2a</td>
|
|
21
|
+
<td>Value 3a</td>
|
|
22
|
+
<td>Value 4a</td>
|
|
23
|
+
<td>Value 5a</td>
|
|
24
|
+
</tr>
|
|
25
|
+
<tr shift="middle">
|
|
26
|
+
<td>
|
|
27
|
+
Value 1b
|
|
28
|
+
<br/>
|
|
29
|
+
Value 1b
|
|
30
|
+
<br/>
|
|
31
|
+
Value 1b
|
|
32
|
+
</td>
|
|
33
|
+
<td>Value 2b</td>
|
|
34
|
+
<td>Value 3b</td>
|
|
35
|
+
<td>Value 4b</td>
|
|
36
|
+
<td>Value 5b</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr shift="down">
|
|
39
|
+
<td>
|
|
40
|
+
Value 1c
|
|
41
|
+
<br/>
|
|
42
|
+
Value 1c
|
|
43
|
+
<br/>
|
|
44
|
+
Value 1c
|
|
45
|
+
</td>
|
|
46
|
+
<td>Value 2c</td>
|
|
47
|
+
<td>Value 3c</td>
|
|
48
|
+
<td>Value 4c</td>
|
|
49
|
+
<td>Value 5c</td>
|
|
50
|
+
</tr>
|
|
51
|
+
</tbody>
|
|
52
|
+
<% end %>
|
|
@@ -4,59 +4,60 @@ import Table from '../_table'
|
|
|
4
4
|
|
|
5
5
|
const TableAlignmentShiftRow = (props) => {
|
|
6
6
|
return (
|
|
7
|
-
<Table
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
<Table
|
|
8
|
+
{...props}
|
|
9
|
+
>
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>{'Column 1'}</th>
|
|
13
|
+
<th>{'Column 2'}</th>
|
|
14
|
+
<th>{'Column 3'}</th>
|
|
15
|
+
<th>{'Column 4'}</th>
|
|
16
|
+
<th>{'Column 5'}</th>
|
|
17
|
+
</tr>
|
|
18
|
+
</thead>
|
|
19
|
+
<tbody>
|
|
20
|
+
<tr>
|
|
21
|
+
<td>
|
|
20
22
|
{'Value 1a'}
|
|
21
23
|
<br />
|
|
22
24
|
{'Value 1a'}
|
|
23
25
|
<br />
|
|
24
26
|
{'Value 1a'}
|
|
25
|
-
</
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
</
|
|
31
|
-
<
|
|
32
|
-
<
|
|
27
|
+
</td>
|
|
28
|
+
<td>{'Value 2a'}</td>
|
|
29
|
+
<td>{'Value 3a'}</td>
|
|
30
|
+
<td>{'Value 4a'}</td>
|
|
31
|
+
<td>{'Value 5a'}</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr shift="middle">
|
|
34
|
+
<td>
|
|
33
35
|
{'Value 1b'}
|
|
34
36
|
<br />
|
|
35
37
|
{'Value 1b'}
|
|
36
38
|
<br />
|
|
37
39
|
{'Value 1b'}
|
|
38
|
-
</
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
</
|
|
44
|
-
<
|
|
45
|
-
<
|
|
40
|
+
</td>
|
|
41
|
+
<td>{'Value 2b'}</td>
|
|
42
|
+
<td>{'Value 3b'}</td>
|
|
43
|
+
<td>{'Value 4b'}</td>
|
|
44
|
+
<td>{'Value 5b'}</td>
|
|
45
|
+
</tr>
|
|
46
|
+
<tr shift="down">
|
|
47
|
+
<td>
|
|
46
48
|
{'Value 1c'}
|
|
47
49
|
<br />
|
|
48
50
|
{'Value 1c'}
|
|
49
51
|
<br />
|
|
50
52
|
{'Value 1c'}
|
|
51
|
-
</
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
</
|
|
57
|
-
</
|
|
53
|
+
</td>
|
|
54
|
+
<td>{'Value 2c'}</td>
|
|
55
|
+
<td>{'Value 3c'}</td>
|
|
56
|
+
<td>{'Value 4c'}</td>
|
|
57
|
+
<td>{'Value 5c'}</td>
|
|
58
|
+
</tr>
|
|
59
|
+
</tbody>
|
|
58
60
|
</Table>
|
|
59
|
-
|
|
60
61
|
)
|
|
61
62
|
}
|
|
62
63
|
|
|
@@ -5,10 +5,10 @@ examples:
|
|
|
5
5
|
- table_lg: Large
|
|
6
6
|
- table_sticky: Sticky Header
|
|
7
7
|
- table_header: Table Header
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
8
|
+
- table_alignment_row: Row Alignment
|
|
9
|
+
- table_alignment_column: Column Alignment
|
|
10
|
+
- table_alignment_shift_row: Shift Row
|
|
11
|
+
- table_alignment_shift_data: Shift Column Data
|
|
12
12
|
- table_side_highlight: Side Highlight
|
|
13
13
|
- table_container: Table Container Off
|
|
14
14
|
- table_disable_hover: Disable Hover
|
|
@@ -26,7 +26,7 @@ examples:
|
|
|
26
26
|
- table_striped: Striped Table
|
|
27
27
|
- table_with_subcomponents_rails: Table with Sub Components (Table Elements)
|
|
28
28
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
|
|
31
31
|
react:
|
|
32
32
|
- table_sm: Small
|
|
@@ -34,9 +34,9 @@ examples:
|
|
|
34
34
|
- table_lg: Large
|
|
35
35
|
- table_sticky: Sticky Header
|
|
36
36
|
- table_alignment_row: Row Alignment
|
|
37
|
-
- table_alignment_column:
|
|
38
|
-
- table_alignment_shift_row: Row
|
|
39
|
-
- table_alignment_shift_data:
|
|
37
|
+
- table_alignment_column: Column Alignment
|
|
38
|
+
- table_alignment_shift_row: Shift Row
|
|
39
|
+
- table_alignment_shift_data: Shift Column Data
|
|
40
40
|
- table_side_highlight: Side Highlight
|
|
41
41
|
- table_container: Table Container Off
|
|
42
42
|
- table_disable_hover: Disable Hover
|
|
@@ -54,4 +54,4 @@ examples:
|
|
|
54
54
|
- table_striped: Striped Table
|
|
55
55
|
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
|
56
56
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
57
|
-
|
|
57
|
+
|
|
@@ -24,4 +24,3 @@ export { default as TableStriped } from './_table_striped.jsx'
|
|
|
24
24
|
export { default as TableDiv } from './_table_div.jsx'
|
|
25
25
|
export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
|
|
26
26
|
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
27
|
-
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
|