playbook_ui_docs 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.PBNTR5596084
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
- data/dist/playbook-doc.js +1 -1
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8f2dc88bb8f11ae7f9370af85f184f17295b0b2d8d17015c39ab44162a87a8e2
|
|
4
|
+
data.tar.gz: a326a5f76a8ddc039e77bcf23d4642cca55e28a02c0914385e4fd57c1aadb7b4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 27d2eb92ffb11f49c34c6f8abcbb0c558a6fe7e9c5a597a128561040144144d0095c4bd35e4c68e834c872e03ebb2d5c9e74515b5cb31f92b23394e390cf247b
|
|
7
|
+
data.tar.gz: 64f2287fddb0ca64926e41e38bc7e2de436bfb4425bb6e66e4335b0b56453892f3b85d87a785fe364f5db1b92bbb7760f28d27102cd7b0be68269949cb79903f
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
<% end %>
|
|
44
44
|
<% end %>
|
|
45
45
|
|
|
46
|
-
<%= pb_rails("
|
|
46
|
+
<%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
|
|
47
47
|
<% initial_items.each do |item| %>
|
|
48
|
-
<%= pb_rails("
|
|
48
|
+
<%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
|
|
49
49
|
<%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
|
|
50
50
|
<%= pb_rails("table/table_cell") do %>
|
|
51
51
|
<%= pb_rails("flex", props:{align:"center"}) do %>
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
|
2
|
+
|
|
3
|
+
- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
|
|
4
|
+
- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
|
|
@@ -4,8 +4,8 @@ examples:
|
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
8
7
|
- draggable_with_table_react: Draggable with Table
|
|
8
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
9
9
|
|
|
10
10
|
rails:
|
|
11
11
|
- draggable_default_rails: Default
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { align: "center"}) do %>
|
|
2
|
+
<%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
6
|
+
<%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
10
|
+
<%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
|
|
14
|
+
<%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
18
|
+
<%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
22
|
+
<%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
26
|
+
<%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
|
|
27
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "" }) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
|
13
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
19
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
20
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
31
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
|
|
35
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
42
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Icon } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithClickableRows = (props) => {
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<Table
|
|
9
|
+
size="sm"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<Table.Head>
|
|
13
|
+
<Table.Row>
|
|
14
|
+
<Table.Header>{"Column 1"}</Table.Header>
|
|
15
|
+
<Table.Header>{"Column 2"}</Table.Header>
|
|
16
|
+
<Table.Header>{"Column 3"}</Table.Header>
|
|
17
|
+
<Table.Header>{"Column 4"}</Table.Header>
|
|
18
|
+
<Table.Header>{"Column 5"}</Table.Header>
|
|
19
|
+
<Table.Header>{""}</Table.Header>
|
|
20
|
+
</Table.Row>
|
|
21
|
+
</Table.Head>
|
|
22
|
+
<Table.Body>
|
|
23
|
+
<Table.Row
|
|
24
|
+
cursor="pointer"
|
|
25
|
+
htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
|
|
26
|
+
{...props}
|
|
27
|
+
>
|
|
28
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
29
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
30
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
31
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
32
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
33
|
+
<Table.Cell textAlign="right">
|
|
34
|
+
<Icon
|
|
35
|
+
color="primary_action"
|
|
36
|
+
fixedWidth
|
|
37
|
+
icon="chevron-right"
|
|
38
|
+
size="xs"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
<Table.Row
|
|
44
|
+
cursor="pointer"
|
|
45
|
+
htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
|
|
46
|
+
{...props}
|
|
47
|
+
>
|
|
48
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
49
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
50
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
51
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
52
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
53
|
+
<Table.Cell textAlign="right">
|
|
54
|
+
<Icon
|
|
55
|
+
color="primary_action"
|
|
56
|
+
fixedWidth
|
|
57
|
+
icon="chevron-right"
|
|
58
|
+
size="xs"
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
</Table.Cell>
|
|
62
|
+
</Table.Row>
|
|
63
|
+
<Table.Row
|
|
64
|
+
cursor="pointer"
|
|
65
|
+
htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
|
|
66
|
+
{...props}
|
|
67
|
+
>
|
|
68
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
69
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
70
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
71
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
72
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
73
|
+
<Table.Cell textAlign="right">
|
|
74
|
+
<Icon
|
|
75
|
+
color="primary_action"
|
|
76
|
+
fixedWidth
|
|
77
|
+
icon="chevron-right"
|
|
78
|
+
size="xs"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</Table.Cell>
|
|
82
|
+
</Table.Row>
|
|
83
|
+
</Table.Body>
|
|
84
|
+
</Table>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default TableWithClickableRows
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<% checkboxes = [
|
|
2
|
+
{ name: 'Coffee', id: 'coffee', checked: false },
|
|
3
|
+
{ name: 'Ice Cream', id: 'ice-cream', checked: false },
|
|
4
|
+
{ name: 'Chocolate', id: 'chocolate', checked: true }
|
|
5
|
+
] %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
|
8
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
|
9
|
+
<%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header") do %>
|
|
17
|
+
<%= pb_rails("checkbox", props: {
|
|
18
|
+
checked: true,
|
|
19
|
+
value: "checkbox-value",
|
|
20
|
+
name: "main-checkbox-selectable",
|
|
21
|
+
indeterminate: true,
|
|
22
|
+
id: "checkbox-selectable"
|
|
23
|
+
}) %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
|
26
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
|
27
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
|
28
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
|
29
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
|
30
|
+
<% end %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("table/table_body") do %>
|
|
33
|
+
<% checkboxes.each_with_index do |checkbox, index| %>
|
|
34
|
+
<%= pb_rails("table/table_row") do %>
|
|
35
|
+
<%= pb_rails("table/table_cell") do %>
|
|
36
|
+
<%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<%= pb_rails("table/table_cell") do %>
|
|
39
|
+
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
52
|
+
const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
|
|
53
|
+
const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
|
|
54
|
+
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
|
|
55
|
+
const deleteButton = document.getElementById('delete-button');
|
|
56
|
+
|
|
57
|
+
const updateDeleteButton = () => {
|
|
58
|
+
const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
|
|
59
|
+
deleteButton.style.display = anyChecked ? 'block' : 'none';
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const updateMainCheckbox = () => {
|
|
63
|
+
// Count the number of checked child checkboxes
|
|
64
|
+
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
|
65
|
+
// Determine if the main checkbox should be in an indeterminate state
|
|
66
|
+
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
|
67
|
+
|
|
68
|
+
// Set the main checkbox states
|
|
69
|
+
mainCheckbox.indeterminate = indeterminate;
|
|
70
|
+
mainCheckbox.checked = checkedCount > 0;
|
|
71
|
+
|
|
72
|
+
// Determine the icon class to add and remove based on the number of checked checkboxes
|
|
73
|
+
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
|
74
|
+
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
|
75
|
+
|
|
76
|
+
// Add and remove the icon class to the main checkbox wrapper
|
|
77
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
|
78
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
|
79
|
+
|
|
80
|
+
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
|
81
|
+
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
|
82
|
+
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
|
83
|
+
|
|
84
|
+
updateDeleteButton();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
mainCheckbox.addEventListener('change', function() {
|
|
88
|
+
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
|
89
|
+
updateMainCheckbox();
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
childCheckboxes.forEach(cb => {
|
|
93
|
+
cb.addEventListener('change', updateMainCheckbox);
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
</script>
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithSelectableRows = (props) => {
|
|
5
|
+
const [checkboxes, setCheckboxes] = useState([
|
|
6
|
+
{ name: "Coffee", checked: false },
|
|
7
|
+
{ name: "Ice Cream", checked: false },
|
|
8
|
+
{ name: "Chocolate", checked: true },
|
|
9
|
+
]);
|
|
10
|
+
|
|
11
|
+
const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
|
|
12
|
+
const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
|
|
13
|
+
|
|
14
|
+
const processCheckboxes = (checked) =>
|
|
15
|
+
checkboxes.slice(0).map((checkbox) => {
|
|
16
|
+
checkbox.checked = checked;
|
|
17
|
+
return checkbox;
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
const onToggleAll = () => {
|
|
21
|
+
setCheckboxes(
|
|
22
|
+
isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const updateCheckboxes = (checkbox, index) => {
|
|
27
|
+
const newCheckboxes = checkboxes.slice(0);
|
|
28
|
+
newCheckboxes[index].checked = !checkbox.checked;
|
|
29
|
+
setCheckboxes(newCheckboxes);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Flex
|
|
35
|
+
justify="end"
|
|
36
|
+
marginBottom="sm"
|
|
37
|
+
>
|
|
38
|
+
{!isNoneChecked && (
|
|
39
|
+
<Flex
|
|
40
|
+
justify="end"
|
|
41
|
+
marginBottom="sm"
|
|
42
|
+
>
|
|
43
|
+
<Button>Delete</Button>
|
|
44
|
+
</Flex>
|
|
45
|
+
)}
|
|
46
|
+
</Flex>
|
|
47
|
+
<Table
|
|
48
|
+
size="sm"
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<Table.Head>
|
|
52
|
+
<Table.Row>
|
|
53
|
+
<Table.Header>
|
|
54
|
+
<Checkbox
|
|
55
|
+
checked={isAllChecked}
|
|
56
|
+
indeterminate={!isAllChecked && !isNoneChecked}
|
|
57
|
+
name="checkbox-name"
|
|
58
|
+
onChange={onToggleAll}
|
|
59
|
+
value="check-box value"
|
|
60
|
+
/>
|
|
61
|
+
</Table.Header>
|
|
62
|
+
<Table.Header>{"Column 1"}</Table.Header>
|
|
63
|
+
<Table.Header>{"Column 2"}</Table.Header>
|
|
64
|
+
<Table.Header>{"Column 3"}</Table.Header>
|
|
65
|
+
<Table.Header>{"Column 4"}</Table.Header>
|
|
66
|
+
<Table.Header>{"Column 5"}</Table.Header>
|
|
67
|
+
</Table.Row>
|
|
68
|
+
</Table.Head>
|
|
69
|
+
<Table.Body>
|
|
70
|
+
{checkboxes.map((checkbox, index) => (
|
|
71
|
+
<Table.Row key={index}>
|
|
72
|
+
<Table.Cell>
|
|
73
|
+
<Checkbox
|
|
74
|
+
checked={checkbox.checked}
|
|
75
|
+
name={checkbox.name}
|
|
76
|
+
onChange={() => {
|
|
77
|
+
updateCheckboxes(checkbox, index);
|
|
78
|
+
}}
|
|
79
|
+
value="check-box value"
|
|
80
|
+
/>
|
|
81
|
+
</Table.Cell>
|
|
82
|
+
<Table.Cell>
|
|
83
|
+
<Image
|
|
84
|
+
alt="picture of a misty forest"
|
|
85
|
+
size="xs"
|
|
86
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
87
|
+
/>
|
|
88
|
+
</Table.Cell>
|
|
89
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
90
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
91
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
92
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
93
|
+
</Table.Row>
|
|
94
|
+
))}
|
|
95
|
+
</Table.Body>
|
|
96
|
+
</Table>
|
|
97
|
+
</>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export default TableWithSelectableRows
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
|
|
@@ -34,6 +34,8 @@ examples:
|
|
|
34
34
|
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
|
|
35
35
|
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
|
|
36
36
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
|
37
|
+
- table_with_clickable_rows: Table with Clickable Rows
|
|
38
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
|
37
39
|
|
|
38
40
|
react:
|
|
39
41
|
- table_sm: Small
|
|
@@ -70,3 +72,5 @@ examples:
|
|
|
70
72
|
- table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
|
|
71
73
|
- table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
|
|
72
74
|
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
|
75
|
+
- table_with_clickable_rows: Table with Clickable Rows
|
|
76
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
|
@@ -32,4 +32,6 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
|
|
|
32
32
|
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
|
|
33
33
|
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
|
|
34
34
|
export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
|
|
35
|
-
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
35
|
+
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
36
|
+
export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
|
|
37
|
+
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|