playbook_ui 14.10.0.pre.rc.12 → 14.10.0.pre.rc.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +9 -4
  5. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  7. data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
  8. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  9. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  10. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  11. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  12. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  13. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  14. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  18. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  19. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  20. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
  21. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
  22. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
  23. data/dist/chunks/{_typeahead-4sdDeM4X.js → _typeahead-D-DFD48D.js} +3 -3
  24. data/dist/chunks/_weekday_stacked-CraWIVot.js +45 -0
  25. data/dist/chunks/{lib-CVPInSs5.js → lib-CuCy3_xO.js} +3 -3
  26. data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-D37k10a0.js} +1 -1
  27. data/dist/chunks/vendor.js +1 -1
  28. data/dist/menu.yml +1 -1
  29. data/dist/playbook-doc.js +1 -1
  30. data/dist/playbook-rails-react-bindings.js +1 -1
  31. data/dist/playbook-rails.js +1 -1
  32. data/dist/playbook.css +1 -1
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +17 -6
  35. data/dist/chunks/_weekday_stacked-CblTZ9cd.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 29b83c5d563fa743874b777b218ea8fea787f16392fd1deccf770f975fca4c08
4
- data.tar.gz: 0ddabe14782efff2b89d9ec2acf07b86ea96c368abf5dff6187a1e5995bac6bb
3
+ metadata.gz: 7e4cea86435c121396a3c4c3fcb62b259a18c7fccf93cbd2f0e60b58cf2f0f8a
4
+ data.tar.gz: c8137ec80bbd56509d6438ac12e70a44290eb0046fc9fa023ec89e21b11a7289
5
5
  SHA512:
6
- metadata.gz: 1be170c7b44118a6ffb280cdcaae1af1b57a731745f2c39e96bfca8e27c53bd1ea0997a7419f21ad66fea073d5300f1881176ca7379e948bbc3d6c144d6f7346
7
- data.tar.gz: 66672ce8158fdb541b06a3132bf948bc9106c27ff4d20e3a576b0f7db92bb358d05a100743f663515d7738fba219d2d46a72bf2670fc77abe4caa963fe165566
6
+ metadata.gz: 1fbac4b36d5261df555acd4826e5ee368aad30cd4d03828d3dff72b7ae4880f562bfb7c1a2d3c20046b9e4b10cfffd7c3a4875c86f47483c25804cc45e1c8a08
7
+ data.tar.gz: d2b05614499a535f55f33d1421c717bf95096899d3eff693f1f14eebc2ce08165bf3ef1e52d02dd100b4db5320b8a80c2cc472a188734efca2ccce8427f6f5cd
@@ -1,66 +1,70 @@
1
1
  import React from 'react'
2
-
2
+ import ReactDOMServer from 'react-dom/server'
3
3
  import BarGraph from '../_bar_graph'
4
+ import Icon from '../../pb_icon/_icon'
5
+
6
+ const chartData = [
7
+ {
8
+ name: 'Role',
9
+ data: [0, 200, 300, 654, 656],
10
+ },
11
+ {
12
+ name: 'Company',
13
+ data: [150, 524, 320, 440, 500],
14
+ },
15
+ ]
4
16
 
5
- const chartData = [{
6
- name: 'Installation',
7
- data: [1475, 200, 3000, 654, 656],
8
- }, {
9
- name: 'Manufacturing',
10
- data: [4434, 524, 2320, 440, 500],
11
- }, {
12
- name: 'Sales & Distribution',
13
- data: [3387, 743, 1344, 434, 440],
14
- }, {
15
- name: 'Project Development',
16
- data: [3227, 878, 999, 780, 1000],
17
- }, {
18
- name: 'Other',
19
- data: [1111, 677, 3245, 500, 200],
20
- }]
17
+ const renderIcon = (iconName, color) => {
18
+ return ReactDOMServer.renderToStaticMarkup(
19
+ <Icon
20
+ color={color}
21
+ icon={iconName}
22
+ />)
23
+ };
21
24
 
22
25
  const barGraphOptions = {
23
- subtitle: {
24
- text: "Overwritten subtitle",
25
- style: {
26
- color: "red"
27
- }
26
+ yAxis: {
27
+ tickInterval: 5,
28
28
  },
29
29
  xAxis: {
30
- labels: {
31
- useHTML: true,
32
- formatter: function() {
33
- switch (this.value) {
34
- case 'Jan':
35
- return `<i class="far fa-apple-whole"></i> ${this.value}`
36
- case 'Feb':
37
- return `<i class="far fa-strawberry"></i> ${this.value}`
38
- case 'Mar':
39
- return `<i class="far fa-lemon"></i> ${this.value}`
40
- case 'Apr':
41
- return `<i class="far fa-pear"></i> ${this.value}`
42
- case 'May':
43
- return `<i class="far fa-peach"></i> ${this.value}`
44
- default:
45
- return ''
46
- }
47
- }
48
- }
49
- }
30
+ categories: ['1', '2', '3', '4', '5'],
31
+ labels: {
32
+ useHTML: true,
33
+ formatter: function () {
34
+ switch (this.value) {
35
+ case '1':
36
+ return `${renderIcon('frown', 'error')}`;
37
+ case '2':
38
+ return `${renderIcon('frown', 'warning')}`;
39
+ case '3':
40
+ return `${renderIcon('frown-open', 'neutral')}`;
41
+ case '4':
42
+ return `${renderIcon('smile', 'category_7')}`;
43
+ case '5':
44
+ return `${renderIcon('smile-beam', 'success')}`;
45
+ default:
46
+ return ''
47
+ }
48
+ },
49
+ style: {
50
+ fontSize: '1.4em',
51
+ },
52
+ y: 42,
53
+ },
54
+ },
55
+ legend: {
56
+ itemMarginTop: 62,
57
+ },
50
58
  }
51
59
 
52
- const BarGraphCustom = (props) => (
60
+ const BarGraphCustom = () => (
53
61
  <div>
54
62
  <BarGraph
55
- axisTitle="Number of Employees"
56
63
  chartData={chartData}
57
64
  customOptions={barGraphOptions}
58
- id="bar-custom"
59
- subTitle="Subtitle to replace"
65
+ id="happiness-dashboard"
66
+ legend
60
67
  title="Bar Graph with Custom Overrides"
61
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
62
- yAxisMin={0}
63
- {...props}
64
68
  />
65
69
  </div>
66
70
  )
@@ -1,49 +1,42 @@
1
1
  <% data = [{
2
- name: 'Installation',
3
- data: [1475,200,3000,654,656]
2
+ name: 'Role',
3
+ data: [0, 200, 300, 654, 656],
4
4
  }, {
5
- name: 'Manufacturing',
6
- data: [4434,524,2320,440,500]
7
- }, {
8
- name: 'Sales & Distribution',
9
- data: [3387,743,1344,434,440,]
10
- }, {
11
- name: 'Project Development',
12
- data: [3227,878,999,780,1000]
13
- }, {
14
- name: 'Other',
15
- data: [1111,677,3245,500,200]
5
+ name: 'Company',
6
+ data: [150, 524, 320, 440, 500],
16
7
  }] %>
17
8
 
18
9
  <% bar_graph_options = {
19
- customOptions: {
20
- subtitle: {
21
- text: "Overwritten subtitle",
22
- style: {
23
- color: "red"
24
- }
10
+ customOptions: {
11
+ yAxis: {
12
+ tickInterval: 5,
13
+ },
14
+ xAxis: {
15
+ categories: [
16
+ raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
17
+ raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
18
+ raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
19
+ raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
20
+ raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
21
+ ],
22
+ labels: {
23
+ useHTML: true,
24
+ sytle: {
25
+ fontSize: '1.4em',
25
26
  },
26
- xAxis: {
27
- categories: [
28
- '<i class="far fa-apple-whole"></i> Jan',
29
- '<i class="far fa-strawberry"></i> Feb',
30
- '<i class="far fa-lemon"></i> Mar',
31
- '<i class="far fa-pear"></i> Apr',
32
- '<i class="far fa-peach"></i> May'
33
- ],
34
- labels: {
35
- useHTML: true,
36
- }
37
- }
38
- }
27
+ y: 42,
28
+ },
29
+ },
30
+ legend: {
31
+ itemMarginTop: 62,
32
+ },
33
+ }
39
34
  } %>
40
35
 
41
36
  <%= pb_rails("bar_graph", props: {
42
- axis_title: 'Number of Employees',
43
37
  chart_data: data,
44
38
  id: "bar-default",
45
- y_axis_min: 0,
46
- subtitle: 'Subtitle to replace',
39
+ legend: true,
47
40
  title: 'Bar Graph with Custom Overrides',
48
41
  custom_options: bar_graph_options
49
- }) %>
42
+ }) %>
@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import useCollapsible from './useCollapsible'
4
4
 
5
- import { globalProps, globalInlineProps } from '../utilities/globalProps'
5
+ import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
6
6
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
7
 
8
8
  import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
32
32
  onClick?: ()=> void,
33
33
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
34
34
  id?: string,
35
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
35
36
  }
36
37
 
37
38
  const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
47
48
  onIconClick,
48
49
  onClick,
49
50
  id,
51
+ tag = 'div',
50
52
  ...props
51
- }: CollapsibleProps): React.ReactElement => {
53
+ }: CollapsibleProps & GlobalProps): React.ReactElement => {
52
54
  const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
53
55
 
54
56
  useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
76
78
  className
77
79
  )
78
80
  const dynamicInlineProps = globalInlineProps(props)
81
+
82
+ const Tag: React.ReactElement | any = `${tag}`;
83
+
79
84
  return (
80
85
  <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
81
- <div
86
+ <Tag
82
87
  {...ariaProps}
83
88
  {...dataProps}
84
89
  {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
96
101
  <CollapsibleContent {...contentProps}>
97
102
  {contentChildren}
98
103
  </CollapsibleContent>
99
- </div>
104
+ </Tag>
100
105
  </CollapsibleContext.Provider>
101
106
  )
102
107
  }
@@ -1,7 +1,7 @@
1
1
  import classnames from 'classnames'
2
2
  import React, { useContext, useRef, useEffect } from 'react'
3
3
  import { buildCss } from '../../utilities/props'
4
- import { globalProps } from '../../utilities/globalProps'
4
+ import { globalProps, GlobalProps } from '../../utilities/globalProps'
5
5
  import { hideElement, showElement } from '../_helper_functions'
6
6
 
7
7
  import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
15
15
  children,
16
16
  className,
17
17
  ...props
18
- }: CollapsibleContentProps): React.ReactElement => {
18
+ }: CollapsibleContentProps & GlobalProps): React.ReactElement => {
19
19
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
20
20
  const contentCSS = buildCss('pb_collapsible_content_kit')
21
21
  const contentSpacing = globalProps(props)
@@ -3,7 +3,7 @@
3
3
  import classnames from 'classnames'
4
4
  import React, { useContext } from 'react'
5
5
  import { buildCss } from '../../utilities/props'
6
- import { globalProps } from '../../utilities/globalProps'
6
+ import { globalProps, GlobalProps } from '../../utilities/globalProps'
7
7
 
8
8
  import Flex from '../../pb_flex/_flex'
9
9
  import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
25
25
  className,
26
26
  cursor = 'pointer',
27
27
  ...props
28
- }: CollapsibleMainProps): React.ReactElement=> {
28
+ }: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
29
29
  const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
30
30
  const mainCSS = buildCss('pb_collapsible_main_kit')
31
31
  const mainSpacing = globalProps(props, { cursor })
@@ -17,7 +17,7 @@
17
17
  outline-offset: 2px;
18
18
  }
19
19
  &:visited {
20
- color: $data_3;
20
+ color: darken($primary_action, 10%);
21
21
  }
22
22
  &.dark {
23
23
  @include pb_link($active_dark);
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  &:visited {
37
- color: $data_3;
37
+ color: darken($primary_action, 10%);
38
38
  }
39
39
  }
40
40
  }
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  &:visited {
51
- color: $data_3;
51
+ color: darken($primary_action, 10%);
52
52
  }
53
53
  }
54
54
  }
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import { Table, Icon, Body, Card } from 'playbook-ui'
3
+
4
+ const TableWithCollapsible = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ padding="md"
12
+ {...props}
13
+ >
14
+ <Body {...props}>Nested content inside a Table Row</Body>
15
+ </Card>
16
+ );
17
+ };
18
+
19
+ return (
20
+ <Table
21
+ size="sm"
22
+ {...props}
23
+ >
24
+ <Table.Head>
25
+ <Table.Row>
26
+ <Table.Header>{'Column 1'}</Table.Header>
27
+ <Table.Header>{'Column 2'}</Table.Header>
28
+ <Table.Header>{'Column 3'}</Table.Header>
29
+ <Table.Header>{'Column 4'}</Table.Header>
30
+ <Table.Header>{'Column 5'}</Table.Header>
31
+ <Table.Header>{''}</Table.Header>
32
+ </Table.Row>
33
+
34
+ </Table.Head>
35
+ <Table.Body>
36
+ <Table.Row collapsible
37
+ collapsibleContent={<Content/>}
38
+ {...props}
39
+ >
40
+ <Table.Cell>{'Value 1'}</Table.Cell>
41
+ <Table.Cell>{'Value 2'}</Table.Cell>
42
+ <Table.Cell>{'Value 3'}</Table.Cell>
43
+ <Table.Cell>{'Value 4'}</Table.Cell>
44
+ <Table.Cell>{'Value 5'}</Table.Cell>
45
+ <Table.Cell textAlign="right">{
46
+ <Icon
47
+ color="primary"
48
+ fixedWidth
49
+ icon="chevron-down"
50
+ />}
51
+ </Table.Cell>
52
+
53
+ </Table.Row>
54
+ <Table.Row>
55
+ <Table.Cell>{'Value 1'}</Table.Cell>
56
+ <Table.Cell>{'Value 2'}</Table.Cell>
57
+ <Table.Cell>{'Value 3'}</Table.Cell>
58
+ <Table.Cell>{'Value 4'}</Table.Cell>
59
+ <Table.Cell>{'Value 5'}</Table.Cell>
60
+ <Table.Cell>{''}</Table.Cell>
61
+ </Table.Row>
62
+ <Table.Row>
63
+ <Table.Cell>{'Value 1'}</Table.Cell>
64
+ <Table.Cell>{'Value 2'}</Table.Cell>
65
+ <Table.Cell>{'Value 3'}</Table.Cell>
66
+ <Table.Cell>{'Value 4'}</Table.Cell>
67
+ <Table.Cell>{'Value 5'}</Table.Cell>
68
+ <Table.Cell>{''}</Table.Cell>
69
+ </Table.Row>
70
+ </Table.Body>
71
+ </Table>
72
+ )
73
+ }
74
+
75
+ export default TableWithCollapsible
@@ -0,0 +1 @@
1
+ The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
@@ -0,0 +1,108 @@
1
+ import React from 'react'
2
+ import { Table, Card, Icon, Body } from 'playbook-ui'
3
+
4
+ const TableWithCollapsibleWithCustomClick = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ padding="md"
12
+ {...props}
13
+ >
14
+ <Body {...props}>Nested content inside a Table Row</Body>
15
+ </Card>
16
+ );
17
+ };
18
+
19
+
20
+ return (
21
+ <Table
22
+ size="sm"
23
+ {...props}
24
+ >
25
+ <Table.Head>
26
+ <Table.Row>
27
+ <Table.Header>{'Column 1'}</Table.Header>
28
+ <Table.Header>{'Column 2'}</Table.Header>
29
+ <Table.Header>{'Column 3'}</Table.Header>
30
+ <Table.Header>{'Column 4'}</Table.Header>
31
+ <Table.Header>{'Column 5'}</Table.Header>
32
+ <Table.Header>{''}</Table.Header>
33
+ </Table.Row>
34
+
35
+ </Table.Head>
36
+ <Table.Body>
37
+ <Table.Row collapsible
38
+ collapsibleContent={<Content/>}
39
+ toggleCellId="cell-1"
40
+ {...props}
41
+ >
42
+ <Table.Cell>{'Value 1'}</Table.Cell>
43
+ <Table.Cell>{'Value 2'}</Table.Cell>
44
+ <Table.Cell>{'Value 3'}</Table.Cell>
45
+ <Table.Cell>{'Value 4'}</Table.Cell>
46
+ <Table.Cell>{'Value 5'}</Table.Cell>
47
+ <Table.Cell cursor="pointer"
48
+ id="cell-1"
49
+ textAlign="right"
50
+ >
51
+ <Icon
52
+ color="primary"
53
+ fixedWidth
54
+ icon="chevron-down"
55
+ />
56
+ </Table.Cell>
57
+
58
+ </Table.Row>
59
+ <Table.Row collapsible
60
+ collapsibleContent={<Content/>}
61
+ toggleCellId="cell-2"
62
+ {...props}
63
+ >
64
+ <Table.Cell>{'Value 1'}</Table.Cell>
65
+ <Table.Cell>{'Value 2'}</Table.Cell>
66
+ <Table.Cell>{'Value 3'}</Table.Cell>
67
+ <Table.Cell>{'Value 4'}</Table.Cell>
68
+ <Table.Cell>{'Value 5'}</Table.Cell>
69
+ <Table.Cell cursor="pointer"
70
+ id="cell-2"
71
+ textAlign="right"
72
+ >
73
+ <Icon
74
+ color="primary"
75
+ fixedWidth
76
+ icon="chevron-down"
77
+ />
78
+ </Table.Cell>
79
+
80
+ </Table.Row>
81
+ <Table.Row collapsible
82
+ collapsibleContent={<Content/>}
83
+ toggleCellId="cell-3"
84
+ {...props}
85
+ >
86
+ <Table.Cell>{'Value 1'}</Table.Cell>
87
+ <Table.Cell>{'Value 2'}</Table.Cell>
88
+ <Table.Cell>{'Value 3'}</Table.Cell>
89
+ <Table.Cell>{'Value 4'}</Table.Cell>
90
+ <Table.Cell>{'Value 5'}</Table.Cell>
91
+ <Table.Cell cursor="pointer"
92
+ id="cell-3"
93
+ textAlign="right"
94
+ >
95
+ <Icon
96
+ color="primary"
97
+ fixedWidth
98
+ icon="chevron-down"
99
+ />
100
+ </Table.Cell>
101
+
102
+ </Table.Row>
103
+ </Table.Body>
104
+ </Table>
105
+ )
106
+ }
107
+
108
+ export default TableWithCollapsibleWithCustomClick
@@ -0,0 +1,2 @@
1
+ When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
2
+ __NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
@@ -0,0 +1,94 @@
1
+ import React from 'react'
2
+ import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
3
+
4
+ const TableWithCollapsibleWithCustomContent = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ color="light"
12
+ paddingX="xl"
13
+ paddingY="md"
14
+ {...props}
15
+ >
16
+ <Body paddingBottom="sm"
17
+ text="Expanded Custom Layout"
18
+ {...props}
19
+ />
20
+ <Flex justify="between">
21
+ <Image
22
+ url="https://via.placeholder.com/150"
23
+ />
24
+ <Image
25
+ url="https://via.placeholder.com/150"
26
+ />
27
+ <Image
28
+ url="https://via.placeholder.com/150"
29
+ />
30
+ <Image
31
+ url="https://via.placeholder.com/150"
32
+ />
33
+ </Flex>
34
+ </Card>
35
+ );
36
+ };
37
+
38
+ return (
39
+ <Table
40
+ size="sm"
41
+ {...props}
42
+ >
43
+ <Table.Head>
44
+ <Table.Row>
45
+ <Table.Header>{'Column 1'}</Table.Header>
46
+ <Table.Header>{'Column 2'}</Table.Header>
47
+ <Table.Header>{'Column 3'}</Table.Header>
48
+ <Table.Header>{'Column 4'}</Table.Header>
49
+ <Table.Header>{'Column 5'}</Table.Header>
50
+ <Table.Header>{''}</Table.Header>
51
+ </Table.Row>
52
+
53
+ </Table.Head>
54
+ <Table.Body>
55
+ <Table.Row collapsible
56
+ collapsibleContent={<Content/>}
57
+ {...props}
58
+ >
59
+ <Table.Cell>{'Value 1'}</Table.Cell>
60
+ <Table.Cell>{'Value 2'}</Table.Cell>
61
+ <Table.Cell>{'Value 3'}</Table.Cell>
62
+ <Table.Cell>{'Value 4'}</Table.Cell>
63
+ <Table.Cell>{'Value 5'}</Table.Cell>
64
+ <Table.Cell textAlign="right">{
65
+ <Icon
66
+ color="primary"
67
+ fixedWidth
68
+ icon="chevron-down"
69
+ />}
70
+ </Table.Cell>
71
+
72
+ </Table.Row>
73
+ <Table.Row>
74
+ <Table.Cell>{'Value 1'}</Table.Cell>
75
+ <Table.Cell>{'Value 2'}</Table.Cell>
76
+ <Table.Cell>{'Value 3'}</Table.Cell>
77
+ <Table.Cell>{'Value 4'}</Table.Cell>
78
+ <Table.Cell>{'Value 5'}</Table.Cell>
79
+ <Table.Cell>{''}</Table.Cell>
80
+ </Table.Row>
81
+ <Table.Row>
82
+ <Table.Cell>{'Value 1'}</Table.Cell>
83
+ <Table.Cell>{'Value 2'}</Table.Cell>
84
+ <Table.Cell>{'Value 3'}</Table.Cell>
85
+ <Table.Cell>{'Value 4'}</Table.Cell>
86
+ <Table.Cell>{'Value 5'}</Table.Cell>
87
+ <Table.Cell>{''}</Table.Cell>
88
+ </Table.Row>
89
+ </Table.Body>
90
+ </Table>
91
+ )
92
+ }
93
+
94
+ export default TableWithCollapsibleWithCustomContent