playbook_ui_docs 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment5060

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb +36 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md +1 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
  7. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb +17 -1
  8. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +15 -0
  9. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md +2 -1
  10. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +166 -0
  11. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -0
  12. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +89 -0
  13. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +2 -1
  14. data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  25. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  26. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  27. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
  28. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  29. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +9 -2
  31. data/dist/playbook-doc.js +1 -1
  32. metadata +17 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f7f29e70760c2884a9d873f33abb639029cba5211794a3b7204a2c9ce130b525
4
- data.tar.gz: 0ae3f331a9c4f17f5e4d864853f0a3aed9ed29c4a50836fd55e2ae5b1eca964c
3
+ metadata.gz: 22a3ee4da00e1fdd3633b3eb41ece4c2f795f076dd012f05e9883e667864e139
4
+ data.tar.gz: 982e423cf5cb3c6f798a1d5957364f9a7705bcc8440f6502abf6b730add37ad1
5
5
  SHA512:
6
- metadata.gz: 3266bad6029a5160c35f223ce860bb513f4bd8690b2a19c09fc10ced020341077f01fd9fa34e41d8868d8611c469aae672c2bdb29e2d57089ff78f35af0e703e
7
- data.tar.gz: e6abd41cfdde709d1a148ec1d21480dae28ff5cdd72452e36a3aac3909dee85e9659c4fe2e1e9cece83b759c46daa675e6015b8b86bd61d36e5c868d1e8f4f4f
6
+ metadata.gz: 15150f3a8a9542f4d6093510d03c703b70115a6d2c6f01cee552563bf1c50d0f76cc5e2ec830c3019893870c0ea144341c61d7208fda627dd3fd4d46abf848aa
7
+ data.tar.gz: 9b0a589f06976d149dd7832f61bfceb13c2d4922a32255685b8e8a0dd5bd8163d4ef6f3890f2515aec348fc6f821422aac1a6a87525541dffc73efca586b7e29
@@ -0,0 +1,36 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
34
+ <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
35
+ <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
36
+ <% end %>
@@ -0,0 +1 @@
1
+ `collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.
@@ -2,6 +2,7 @@ examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
4
  - advanced_table_beta_subrow_headers: SubRow Headers
5
+ - advanced_table_collapsible_trail_rails: Collapsible Trail
5
6
  - advanced_table_beta_sort: Enable Sorting
6
7
  - advanced_table_custom_cell_rails: Custom Components for Cells
7
8
 
@@ -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
+ }) %>
@@ -24,4 +24,20 @@
24
24
  state: "PA",
25
25
  zipcode: "19382",
26
26
  territory: "PHL",
27
- }) %>
27
+ }) %>
28
+
29
+ <br>
30
+ <br>
31
+
32
+ <%= pb_rails("home_address_street", props: {
33
+ address: "70 Prospect Ave",
34
+ address_cont: "Apt M18",
35
+ city: "West Chester",
36
+ emphasis: "none",
37
+ home_id: 8250263,
38
+ home_url: "https://powerhrg.com/",
39
+ house_style: "Colonial",
40
+ state: "PA",
41
+ zipcode: "19382",
42
+ territory: "PHL",
43
+ }) %>
@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
32
32
  zipcode="19382"
33
33
  {...props}
34
34
  />
35
+ <br />
36
+ <br />
37
+ <HomeAddressStreet
38
+ address="70 Prospect Ave"
39
+ addressCont="Apt M18"
40
+ city="West Chester"
41
+ emphasis="none"
42
+ homeId="8250263"
43
+ homeUrl="https://powerhrg.com/"
44
+ houseStyle="Colonial"
45
+ state="PA"
46
+ territory="PHL"
47
+ zipcode="19382"
48
+ {...props}
49
+ />
35
50
  </div>
36
51
  )
37
52
  }
@@ -1,2 +1,3 @@
1
1
  Emphasis on street happens by default. (no prop needed)
2
- Emphasis on "city" makes the city emphasized, rather than the street.
2
+ Emphasis on "city" makes the city emphasized, rather than the street.
3
+ Adding "none" to emphasis prop will provide no emphasis.
@@ -0,0 +1,166 @@
1
+ import React from 'react';
2
+ import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
3
+
4
+ const SortingChangeCallback = (sortOptions) => {
5
+ alert(JSON.stringify(sortOptions[0]))
6
+ }
7
+
8
+ const SkeletonLoadingFilter = (props) => {
9
+ const isLoading = true
10
+
11
+ const options = [
12
+ { value: 'USA' },
13
+ { value: 'Canada' },
14
+ { value: 'Brazil' },
15
+ { value: 'Philippines' },
16
+ { value: 'A galaxy far far away, like really far away...' },
17
+ ]
18
+
19
+ return (
20
+ <div>
21
+ <div>
22
+ {isLoading ? (
23
+ <Card
24
+ marginBottom="lg"
25
+ {...props}
26
+ >
27
+ <Flex
28
+ alignItems="center"
29
+ justify="between"
30
+ orientation="row"
31
+ >
32
+ <Flex
33
+ alignItems="center"
34
+ justify="start"
35
+ orientation="row"
36
+ >
37
+ <SkeletonLoading
38
+ borderRadius="rounded"
39
+ height="40px"
40
+ marginRight="sm"
41
+ width="40px"
42
+ {...props}
43
+ />
44
+ <SkeletonLoading
45
+ height="16px"
46
+ marginRight="md"
47
+ width="80px"
48
+ {...props}
49
+ />
50
+ </Flex>
51
+ <Flex
52
+ alignItems="center"
53
+ justify="end"
54
+ orientation="row"
55
+ >
56
+ <SkeletonLoading
57
+ height="18px"
58
+ width="120px"
59
+ {...props}
60
+ />
61
+ </Flex>
62
+ </Flex>
63
+ </Card>
64
+ ) : (
65
+ <Filter
66
+ filters={{ 'Full Name': 'John Wick' }}
67
+ marginBottom="lg"
68
+ minWidth="375px"
69
+ results={546}
70
+ sortOptions={{
71
+ popularity: 'Popularity',
72
+ // eslint-disable-next-line
73
+ manager_title: 'Manager\'s Title',
74
+ // eslint-disable-next-line
75
+ manager_name: 'Manager\'s Name',
76
+ }}
77
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
78
+ >
79
+ {({ closePopover }) => (
80
+ <form>
81
+ <TextInput
82
+ label="Example Text Field"
83
+ placeholder="Enter Text"
84
+ />
85
+ <Select
86
+ blankSelection="Select One..."
87
+ label="Example Collection Select"
88
+ name="Collection Select"
89
+ options={options}
90
+ />
91
+ <Flex spacing="between">
92
+ <Button
93
+ onClick={closePopover}
94
+ text="Filter"
95
+ />
96
+ <Button
97
+ text="Defaults"
98
+ variant="secondary"
99
+ />
100
+ </Flex>
101
+ </form>
102
+ )}
103
+ </Filter>
104
+ )}
105
+ </div>
106
+ <div>
107
+ {isLoading ? (
108
+ <SkeletonLoading
109
+ height="127px"
110
+ marginBottom="lg"
111
+ width="100%"
112
+ {...props}
113
+ />
114
+ ) : (
115
+ <Filter
116
+ double
117
+ filters={{
118
+ 'Full Name': 'John Wick',
119
+ 'City': 'San Francisco',
120
+ }}
121
+ marginBottom="xl"
122
+ minWidth="375px"
123
+ onSortChange={SortingChangeCallback}
124
+ results={1}
125
+ sortOptions={{
126
+ popularity: 'Popularity',
127
+ // eslint-disable-next-line
128
+ manager_title: 'Manager\'s Title',
129
+ // eslint-disable-next-line
130
+ manager_name: 'Manager\'s Name',
131
+ }}
132
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
133
+ >
134
+ {({ closePopover }) => (
135
+ <form>
136
+ <TextInput
137
+ label="Full Name"
138
+ placeholder="Enter name"
139
+ />
140
+ <Select
141
+ blankSelection="Select One..."
142
+ label="Territory"
143
+ maxWidth="sm"
144
+ name="location"
145
+ options={options}
146
+ />
147
+ <Flex spacing="between">
148
+ <Button
149
+ onClick={closePopover}
150
+ text="Filter"
151
+ />
152
+ <Button
153
+ text="Defaults"
154
+ variant="secondary"
155
+ />
156
+ </Flex>
157
+ </form>
158
+ )}
159
+ </Filter>
160
+ )}
161
+ </div>
162
+ </div>
163
+ )
164
+ }
165
+
166
+ export default SkeletonLoadingFilter;
@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
20
20
  <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
21
21
  marginBottom="md"
22
22
  padding="none"
23
+ {...props}
23
24
  >
24
25
  <SkeletonLoading
25
26
  borderRadius="md"
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
31
32
  </Card>
32
33
  <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
33
34
  padding="none"
35
+ {...props}
34
36
  >
35
37
  <SkeletonLoading
36
38
  borderRadius="md"
@@ -0,0 +1,89 @@
1
+ import React from 'react';
2
+ import { Flex, SkeletonLoading, User } from "playbook-ui";
3
+
4
+ const SkeletonLoadingUser = (props) => {
5
+ const isLoading = true
6
+
7
+ return (
8
+ <div>
9
+ <div>
10
+ {isLoading ? (
11
+ <Flex alignItems="center">
12
+ <SkeletonLoading
13
+ borderRadius="rounded"
14
+ height="38px"
15
+ paddingRight="sm"
16
+ width="38px"
17
+ {...props}
18
+ />
19
+ <SkeletonLoading
20
+ gap="xxs"
21
+ height="18px"
22
+ stack="2"
23
+ width="161px"
24
+ {...props}
25
+ />
26
+ </Flex>
27
+ ) : (
28
+ <User
29
+ align="left"
30
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
31
+ name="Anna Black"
32
+ orientation="horizontal"
33
+ title="Remodeling Consultant"
34
+ {...props}
35
+ />
36
+ )}
37
+ </div>
38
+ <div>
39
+ {isLoading ? (
40
+ <Flex
41
+ alignItems="start"
42
+ paddingTop="md"
43
+ >
44
+ <Flex
45
+ alignItems="center"
46
+ flexDirection="column"
47
+ >
48
+ <SkeletonLoading
49
+ borderRadius="rounded"
50
+ height="80px"
51
+ paddingBottom="xs"
52
+ width="80px"
53
+ {...props}
54
+ />
55
+ <SkeletonLoading
56
+ height="32px"
57
+ paddingBottom="xxs"
58
+ width="144px"
59
+ {...props}
60
+ />
61
+ <SkeletonLoading
62
+ height="21px"
63
+ width="164px"
64
+ {...props}
65
+ />
66
+ </Flex>
67
+ </Flex>
68
+ ) : (
69
+ <Flex
70
+ alignItems="start"
71
+ paddingTop="md"
72
+ >
73
+ <User
74
+ align="center"
75
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
76
+ name="Anna Black"
77
+ orientation="vertical"
78
+ size="lg"
79
+ title="Remodeling Consultant"
80
+ {...props}
81
+ />
82
+ </Flex>
83
+ )}
84
+ </div>
85
+ </div>
86
+ )
87
+ }
88
+
89
+ export default SkeletonLoadingUser;
@@ -10,4 +10,5 @@ examples:
10
10
  - skeleton_loading_layout: Layout
11
11
  - skeleton_loading_border_radius: Border Radius
12
12
  - skeleton_loading_height_width: Height & Width
13
-
13
+ - skeleton_loading_user: User Component Example
14
+ - skeleton_loading_filter: Filter Component Example
@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
3
3
  export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
4
4
  export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
5
5
  export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
6
+ export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
7
+ export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'
@@ -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