playbook_ui 15.3.0.pre.alpha.play249512047 → 15.3.0.pre.alpha.play259311731
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_advanced_table/Hooks/useTableState.ts +0 -15
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +2 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_category.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +11 -25
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -2
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md +1 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +1 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +14 -7
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +15 -6
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md +1 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +1 -1
- data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +34 -69
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_popover/popover.test.js +0 -80
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -29
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +1 -67
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +6 -68
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -2
- data/dist/chunks/{_line_graph-CqE0-dq5.js → _line_graph-CUts2R88.js} +1 -1
- data/dist/chunks/_typeahead--U_6fwUM.js +6 -0
- data/dist/chunks/{_weekday_stacked-BFB3mjtE.js → _weekday_stacked-GooEyiGT.js} +2 -2
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -12
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +0 -68
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb +0 -63
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx +0 -89
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md +0 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md +0 -3
- data/dist/chunks/_typeahead-3ZAbZUqU.js +0 -6
- /data/app/pb_kits/playbook/pb_popover/docs/{_popover_append_to_rails.md → _popover_append_to.md} +0 -0
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.3.0.pre.alpha.
|
|
4
|
+
version: 15.3.0.pre.alpha.play259311731
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-
|
|
12
|
+
date: 2025-10-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -2638,9 +2638,7 @@ files:
|
|
|
2638
2638
|
- app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb
|
|
2639
2639
|
- app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx
|
|
2640
2640
|
- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb
|
|
2641
|
-
- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.
|
|
2642
|
-
- app/pb_kits/playbook/pb_popover/docs/_popover_append_to_rails.md
|
|
2643
|
-
- app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md
|
|
2641
|
+
- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md
|
|
2644
2642
|
- app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
|
|
2645
2643
|
- app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
|
|
2646
2644
|
- app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
|
|
@@ -3180,10 +3178,6 @@ files:
|
|
|
3180
3178
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
|
|
3181
3179
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
|
|
3182
3180
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
|
|
3183
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb
|
|
3184
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
|
|
3185
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
|
|
3186
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
|
|
3187
3181
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
3188
3182
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
3189
3183
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
@@ -3800,9 +3794,9 @@ files:
|
|
|
3800
3794
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
|
3801
3795
|
- app/pb_kits/playbook/utilities/text.ts
|
|
3802
3796
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
|
3803
|
-
- dist/chunks/_line_graph-
|
|
3804
|
-
- dist/chunks/_typeahead
|
|
3805
|
-
- dist/chunks/_weekday_stacked-
|
|
3797
|
+
- dist/chunks/_line_graph-CUts2R88.js
|
|
3798
|
+
- dist/chunks/_typeahead--U_6fwUM.js
|
|
3799
|
+
- dist/chunks/_weekday_stacked-GooEyiGT.js
|
|
3806
3800
|
- dist/chunks/componentRegistry-DzmmLR2x.js
|
|
3807
3801
|
- dist/chunks/lazysizes-B7xYodB-.js
|
|
3808
3802
|
- dist/chunks/lib-CGxXTQ75.js
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
|
|
3
|
-
|
|
4
|
-
const PopoverAppendTo = (props) => {
|
|
5
|
-
const [showParentPopover, setShowParentPopover] = useState(false);
|
|
6
|
-
const [showSelectorPopover, setShowSelectorPopover] = useState(false);
|
|
7
|
-
|
|
8
|
-
const parentPopoverReference = (
|
|
9
|
-
<CircleIconButton
|
|
10
|
-
icon="info"
|
|
11
|
-
onClick={() => setShowParentPopover(!showParentPopover)}
|
|
12
|
-
variant="secondary"
|
|
13
|
-
/>
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
const selectorPopoverReference = (
|
|
17
|
-
<CircleIconButton
|
|
18
|
-
icon="info"
|
|
19
|
-
onClick={() => setShowSelectorPopover(!showSelectorPopover)}
|
|
20
|
-
variant="secondary"
|
|
21
|
-
/>
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<>
|
|
26
|
-
<Flex
|
|
27
|
-
marginBottom="md"
|
|
28
|
-
orientation="row"
|
|
29
|
-
vertical="center"
|
|
30
|
-
{...props}
|
|
31
|
-
>
|
|
32
|
-
<Body text="Click info for more details" />
|
|
33
|
-
|
|
34
|
-
<PbReactPopover
|
|
35
|
-
appendTo="parent"
|
|
36
|
-
offset
|
|
37
|
-
placement="top"
|
|
38
|
-
reference={parentPopoverReference}
|
|
39
|
-
show={showParentPopover}
|
|
40
|
-
{...props}
|
|
41
|
-
>
|
|
42
|
-
{'I\'m a popover. I have been appended to my parent element.'}
|
|
43
|
-
</PbReactPopover>
|
|
44
|
-
</Flex>
|
|
45
|
-
|
|
46
|
-
<Flex
|
|
47
|
-
orientation="row"
|
|
48
|
-
vertical="center"
|
|
49
|
-
{...props}
|
|
50
|
-
>
|
|
51
|
-
<Body text="Click info for more details" />
|
|
52
|
-
|
|
53
|
-
<PbReactPopover
|
|
54
|
-
appendTo=".kit-show-wrapper"
|
|
55
|
-
offset
|
|
56
|
-
placement="top"
|
|
57
|
-
reference={selectorPopoverReference}
|
|
58
|
-
show={showSelectorPopover}
|
|
59
|
-
{...props}
|
|
60
|
-
>
|
|
61
|
-
{'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
|
|
62
|
-
</PbReactPopover>
|
|
63
|
-
</Flex>
|
|
64
|
-
</>
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export default PopoverAppendTo;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<% content = capture do %>
|
|
2
|
-
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
-
<%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
|
|
4
|
-
<% end %>
|
|
5
|
-
<% end %>
|
|
6
|
-
|
|
7
|
-
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
8
|
-
<%= pb_rails("table/table_head") do %>
|
|
9
|
-
<%= pb_rails("table/table_row") do %>
|
|
10
|
-
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
11
|
-
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
12
|
-
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
13
|
-
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
14
|
-
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
15
|
-
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
16
|
-
<% end %>
|
|
17
|
-
<% end %>
|
|
18
|
-
<%= pb_rails("table/table_body") do %>
|
|
19
|
-
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
|
|
20
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
|
|
21
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
|
|
22
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
|
|
23
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
|
|
24
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
|
|
25
|
-
<%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
|
|
26
|
-
<%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
27
|
-
<%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
|
|
28
|
-
<% end %>
|
|
29
|
-
<% end %>
|
|
30
|
-
<%= pb_rails("table/table_row") do %>
|
|
31
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
32
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
33
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
34
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
35
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
36
|
-
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
37
|
-
<% end %>
|
|
38
|
-
<%= pb_rails("table/table_row") do %>
|
|
39
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
40
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
41
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
42
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
43
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
44
|
-
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
45
|
-
<% end %>
|
|
46
|
-
<% end %>
|
|
47
|
-
<% end %>
|
|
48
|
-
|
|
49
|
-
<script>
|
|
50
|
-
const downArrow = document.getElementById("chevron-icon-down");
|
|
51
|
-
const upArrow = document.getElementById("chevron-icon-up");
|
|
52
|
-
|
|
53
|
-
upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
|
|
54
|
-
|
|
55
|
-
function toggleArrows() {
|
|
56
|
-
if (downArrow) {
|
|
57
|
-
downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
|
|
58
|
-
}
|
|
59
|
-
if (upArrow) {
|
|
60
|
-
upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
</script>
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import Table from '../_table'
|
|
3
|
-
import Icon from '../../pb_icon/_icon'
|
|
4
|
-
import Card from '../../pb_card/_card'
|
|
5
|
-
import Body from '../../pb_body/_body'
|
|
6
|
-
|
|
7
|
-
const TableWithDynamicCollapsible = (props) => {
|
|
8
|
-
|
|
9
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
-
|
|
11
|
-
const handleToggleArrows = () => {
|
|
12
|
-
setIsOpen(!isOpen)
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const Content = () => {
|
|
16
|
-
return (
|
|
17
|
-
<Card
|
|
18
|
-
borderNone
|
|
19
|
-
borderRadius="none"
|
|
20
|
-
padding="md"
|
|
21
|
-
{...props}
|
|
22
|
-
>
|
|
23
|
-
<Body {...props}>Nested content inside a Table Row</Body>
|
|
24
|
-
</Card>
|
|
25
|
-
);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<Table
|
|
30
|
-
size="sm"
|
|
31
|
-
{...props}
|
|
32
|
-
>
|
|
33
|
-
<Table.Head>
|
|
34
|
-
<Table.Row>
|
|
35
|
-
<Table.Header>{'Column 1'}</Table.Header>
|
|
36
|
-
<Table.Header>{'Column 2'}</Table.Header>
|
|
37
|
-
<Table.Header>{'Column 3'}</Table.Header>
|
|
38
|
-
<Table.Header>{'Column 4'}</Table.Header>
|
|
39
|
-
<Table.Header>{'Column 5'}</Table.Header>
|
|
40
|
-
<Table.Header>{''}</Table.Header>
|
|
41
|
-
</Table.Row>
|
|
42
|
-
|
|
43
|
-
</Table.Head>
|
|
44
|
-
<Table.Body>
|
|
45
|
-
|
|
46
|
-
<Table.Row collapsible
|
|
47
|
-
collapsibleContent={<Content />}
|
|
48
|
-
{...props}
|
|
49
|
-
>
|
|
50
|
-
<Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
|
|
51
|
-
<Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
|
|
52
|
-
<Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
|
|
53
|
-
<Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
|
|
54
|
-
<Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
|
|
55
|
-
<Table.Cell
|
|
56
|
-
htmlOptions={{ onClick: handleToggleArrows }}
|
|
57
|
-
textAlign="right"
|
|
58
|
-
>
|
|
59
|
-
{
|
|
60
|
-
<Icon
|
|
61
|
-
color="primary"
|
|
62
|
-
fixedWidth
|
|
63
|
-
icon={isOpen ? 'chevron-up' : 'chevron-down'}
|
|
64
|
-
/>}
|
|
65
|
-
</Table.Cell>
|
|
66
|
-
|
|
67
|
-
</Table.Row>
|
|
68
|
-
<Table.Row>
|
|
69
|
-
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
70
|
-
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
71
|
-
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
72
|
-
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
73
|
-
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
74
|
-
<Table.Cell>{''}</Table.Cell>
|
|
75
|
-
</Table.Row>
|
|
76
|
-
<Table.Row>
|
|
77
|
-
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
78
|
-
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
79
|
-
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
80
|
-
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
81
|
-
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
82
|
-
<Table.Cell>{''}</Table.Cell>
|
|
83
|
-
</Table.Row>
|
|
84
|
-
</Table.Body>
|
|
85
|
-
</Table>
|
|
86
|
-
)
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
export default TableWithDynamicCollapsible
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
|
|
2
|
-
Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
|
|
3
|
-
|
|
4
|
-
Follow this example to make the icons dynamic following the state of the collapsible.
|