playbook_ui 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0.pre.alpha.PLAY12572402

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +19 -21
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +3 -6
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +8 -12
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +9 -14
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +5 -9
  9. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +12 -14
  10. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +10 -12
  11. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +2 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +54 -2
  14. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +81 -82
  15. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  29. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  30. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  31. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  32. data/app/pb_kits/playbook/pb_table/_table.tsx +13 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +5 -5
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  38. data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -3
  39. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  40. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +64 -0
  41. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +66 -0
  42. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +64 -0
  43. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +66 -0
  44. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +74 -0
  45. data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx +5 -0
  46. data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
  47. data/app/pb_kits/playbook/utilities/_positioning.scss +48 -7
  48. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -1
  49. data/dist/playbook-rails.js +6 -6
  50. data/lib/playbook/bottom.rb +33 -0
  51. data/lib/playbook/classnames.rb +4 -0
  52. data/lib/playbook/kit_base.rb +8 -0
  53. data/lib/playbook/left.rb +33 -0
  54. data/lib/playbook/right.rb +33 -0
  55. data/lib/playbook/top.rb +33 -0
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +19 -8
  58. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +0 -13
  59. data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
  60. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_subcomponents.html.erb → _table_with_subcomponents_rails.html.erb} +0 -0
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableExpandedControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableExpandedControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //State for manually effecting what is expanded
39
39
  const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
@@ -53,7 +53,7 @@ const AdvancedTableExpandedControl = (props) => {
53
53
  {...props}
54
54
  />
55
55
  </div>
56
- )
57
- }
56
+ );
57
+ };
58
58
 
59
- export default AdvancedTableExpandedControl
59
+ export default AdvancedTableExpandedControl;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
4
4
 
5
5
  const AdvancedTableInlineRowLoading = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableInlineRowLoading = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -52,7 +52,7 @@ const AdvancedTableInlineRowLoading = (props) => {
52
52
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
53
  </AdvancedTable>
54
54
  </div>
55
- )
56
- }
55
+ );
56
+ };
57
57
 
58
- export default AdvancedTableInlineRowLoading
58
+ export default AdvancedTableInlineRowLoading;
@@ -1,4 +1,4 @@
1
- As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
1
+ As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
2
2
 
3
3
  In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
4
4
 
@@ -1,7 +1,7 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../../"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../../";
3
3
  import { Button } from "../../"
4
- import { MOCK_DATA } from "./_mock_data"
4
+ import { MOCK_DATA } from "./_mock_data";
5
5
 
6
6
  const AdvancedTableLoading = (props) => {
7
7
 
@@ -37,7 +37,7 @@ const [isloading, setIsLoading] = useState(true)
37
37
  accessor: "graduatedStudents",
38
38
  label: "Graduated Students",
39
39
  },
40
- ]
40
+ ];
41
41
 
42
42
  return (
43
43
  <div>
@@ -54,7 +54,7 @@ const [isloading, setIsLoading] = useState(true)
54
54
  {...props}
55
55
  />
56
56
  </div>
57
- )
58
- }
57
+ );
58
+ };
59
59
 
60
- export default AdvancedTableLoading
60
+ export default AdvancedTableLoading;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSort = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSort = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableSort = (props) => {
46
46
  <AdvancedTable.Body />
47
47
  </AdvancedTable>
48
48
  </div>
49
- )
50
- }
49
+ );
50
+ };
51
51
 
52
- export default AdvancedTableSort
52
+ export default AdvancedTableSort;
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSortControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSortControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //State for sort direction
39
39
  const [isSortDesc, setIsSortDesc] = useState({desc: false})
@@ -57,7 +57,7 @@ const AdvancedTableSortControl = (props) => {
57
57
  <AdvancedTable.Body />
58
58
  </AdvancedTable>
59
59
  </div>
60
- )
61
- }
60
+ );
61
+ };
62
62
 
63
- export default AdvancedTableSortControl
63
+ export default AdvancedTableSortControl;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSubrowHeaders = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSubrowHeaders = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -51,7 +51,7 @@ const AdvancedTableSubrowHeaders = (props) => {
51
51
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
52
52
  </AdvancedTable>
53
53
  </div>
54
- )
55
- }
54
+ );
55
+ };
56
56
 
57
- export default AdvancedTableSubrowHeaders
57
+ export default AdvancedTableSubrowHeaders;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableTableOptions = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableOptions = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  const tableOptions = {
39
39
  initialState: {
@@ -55,7 +55,7 @@ const AdvancedTableTableOptions = (props) => {
55
55
  {...props}
56
56
  />
57
57
  </div>
58
- )
59
- }
58
+ );
59
+ };
60
60
 
61
- export default AdvancedTableTableOptions
61
+ export default AdvancedTableTableOptions;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableTableProps = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableProps = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  const tableProps = {
39
39
  container: false,
@@ -49,7 +49,7 @@ const AdvancedTableTableProps = (props) => {
49
49
  {...props}
50
50
  />
51
51
  </div>
52
- )
53
- }
52
+ );
53
+ };
54
54
 
55
- export default AdvancedTableTableProps
55
+ export default AdvancedTableTableProps;
@@ -275,4 +275,4 @@ export const MOCK_DATA = [
275
275
  },
276
276
  ],
277
277
  },
278
- ]
278
+ ];
@@ -196,5 +196,5 @@ export const MOCK_DATA_INLINE_LOADING = [
196
196
  },
197
197
  ],
198
198
  },
199
- ]
199
+ ];
200
200
 
@@ -1,11 +1,31 @@
1
1
  ![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
2
2
 
3
3
  ```swift
4
-
5
- VStack(spacing: Spacing.small) {
6
- PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
7
- PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
8
- PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
4
+ VStack(spacing: Spacing.small) {
5
+ HStack {
6
+ PBDate(
7
+ Date().makeDate(year: 1995, month: 12, day: 25),
8
+ variant: .standard,
9
+ typography: .title4
10
+ )
11
+ }
12
+ .frame(maxWidth: .infinity, alignment: .leading)
13
+ HStack {
14
+ PBDate(
15
+ Date().makeDate(year: 2020, month: 12, day: 25),
16
+ variant: .withIcon(isStandard: true),
17
+ typography: .title4,
18
+ iconSize: .x1
19
+ )
20
+ }
21
+ .frame(maxWidth: .infinity, alignment: .center)
22
+ HStack {
23
+ PBDate(
24
+ Date(),
25
+ variant: .short,
26
+ typography: .title4
27
+ )
28
+ }
29
+ .frame(maxWidth: .infinity, alignment: .trailing)
9
30
  }
10
-
11
31
  ```
@@ -2,15 +2,34 @@
2
2
 
3
3
 
4
4
  ```swift
5
-
6
5
  VStack(alignment: .leading, spacing: Spacing.small) {
7
- PBDate(Date(), variant: .short)
8
- PBDate(Date(), variant: .dayDate)
9
- PBDate(Date(), variant: .standard)
6
+ PBDate(
7
+ Date(),
8
+ variant: .short
9
+ )
10
+ PBDate(
11
+ Date().makeDate(year: 2012, month: 8, day: 3),
12
+ variant: .standard
13
+ )
14
+ PBDate(
15
+ Date().makeDate(year: 2017, month: 12, day: 3),
16
+ variant: .dayDate(showYear: true)
17
+ )
10
18
  Spacer()
11
- PBDate(Date(), variant: .short, typography: .title4)
12
- PBDate(Date(), variant: .dayDate, typography: .title4)
13
- PBDate(Date(), variant: .standard, typography: .title4)
19
+ PBDate(
20
+ Date(),
21
+ variant: .short,
22
+ typography: .title4
23
+ )
24
+ PBDate(
25
+ Date().makeDate(year: 2012, month: 8, day: 3),
26
+ variant: .standard,
27
+ typography: .title4
28
+ )
29
+ PBDate(
30
+ Date().makeDate(year: 2017, month: 12, day: 3),
31
+ variant: .dayDate(showYear: true),
32
+ typography: .title4
33
+ )
14
34
  }
15
-
16
35
  ```
@@ -1 +1 @@
1
- This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
1
+ This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.
@@ -3,6 +3,13 @@ import classnames from 'classnames'
3
3
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
+ import {
7
+ TableHead,
8
+ TableHeader,
9
+ TableBody,
10
+ TableRow,
11
+ TableCell,
12
+ } from "./subcomponents";
6
13
 
7
14
  type TableProps = {
8
15
  aria?: { [key: string]: string },
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
105
112
  )
106
113
  }
107
114
 
115
+ Table.Head = TableHead
116
+ Table.Header = TableHeader
117
+ Table.Body = TableBody
118
+ Table.Row = TableRow
119
+ Table.Cell = TableCell
120
+
108
121
  export default Table
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Table from '../_table'
4
- import TableRow from '../_table_row'
5
4
 
6
5
  const TableSideHighlight = (props) => {
7
6
  return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
20
19
  </tr>
21
20
  </thead>
22
21
  <tbody>
23
- <TableRow
22
+ <Table.Row
24
23
  sideHighlightColor="product_1_highlight"
25
24
  {...props}
26
25
  >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
29
28
  <td>{'Value 3'}</td>
30
29
  <td>{'Value 4'}</td>
31
30
  <td>{'Value 5'}</td>
32
- </TableRow>
33
- <TableRow
31
+ </Table.Row>
32
+ <Table.Row
34
33
  sideHighlightColor="product_2_highlight"
35
34
  {...props}
36
35
  >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
39
38
  <td>{'Value 3'}</td>
40
39
  <td>{'Value 4'}</td>
41
40
  <td>{'Value 5'}</td>
42
- </TableRow>
43
- <TableRow
41
+ </Table.Row>
42
+ <Table.Row
44
43
  sideHighlightColor="product_3_highlight"
45
44
  {...props}
46
45
  >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
49
48
  <td>{'Value 3'}</td>
50
49
  <td>{'Value 4'}</td>
51
50
  <td>{'Value 5'}</td>
52
- </TableRow>
53
- <TableRow
51
+ </Table.Row>
52
+ <Table.Row
54
53
  sideHighlightColor="none"
55
54
  {...props}
56
55
  >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
59
58
  <td>{'Value 3'}</td>
60
59
  <td>{'Value 4'}</td>
61
60
  <td>{'Value 5'}</td>
62
- </TableRow>
61
+ </Table.Row>
63
62
  </tbody>
64
63
  </Table>
65
64
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
79
78
  </tr>
80
79
  </thead>
81
80
  <tbody>
82
- <TableRow
81
+ <Table.Row
83
82
  sideHighlightColor="success"
84
83
  {...props}
85
84
  >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
88
87
  <td>{'Value 3'}</td>
89
88
  <td>{'Value 4'}</td>
90
89
  <td>{'Value 5'}</td>
91
- </TableRow>
92
- <TableRow
90
+ </Table.Row>
91
+ <Table.Row
93
92
  sideHighlightColor="warning"
94
93
  {...props}
95
94
  >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
98
97
  <td>{'Value 3'}</td>
99
98
  <td>{'Value 4'}</td>
100
99
  <td>{'Value 5'}</td>
101
- </TableRow>
102
- <TableRow
100
+ </Table.Row>
101
+ <Table.Row
103
102
  sideHighlightColor="error"
104
103
  {...props}
105
104
  >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
108
107
  <td>{'Value 3'}</td>
109
108
  <td>{'Value 4'}</td>
110
109
  <td>{'Value 5'}</td>
111
- </TableRow>
112
- <TableRow
110
+ </Table.Row>
111
+ <Table.Row
113
112
  sideHighlightColor="none"
114
113
  {...props}
115
114
  >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
118
117
  <td>{'Value 3'}</td>
119
118
  <td>{'Value 4'}</td>
120
119
  <td>{'Value 5'}</td>
121
- </TableRow>
120
+ </Table.Row>
122
121
  </tbody>
123
122
  </Table>
124
123
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
138
137
  </tr>
139
138
  </thead>
140
139
  <tbody>
141
- <TableRow
140
+ <Table.Row
142
141
  sideHighlightColor="category_1"
143
142
  {...props}
144
143
  >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
147
146
  <td>{'Value 3'}</td>
148
147
  <td>{'Value 4'}</td>
149
148
  <td>{'Value 5'}</td>
150
- </TableRow>
151
- <TableRow
149
+ </Table.Row>
150
+ <Table.Row
152
151
  sideHighlightColor="category_2"
153
152
  {...props}
154
153
  >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
157
156
  <td>{'Value 3'}</td>
158
157
  <td>{'Value 4'}</td>
159
158
  <td>{'Value 5'}</td>
160
- </TableRow>
161
- <TableRow
159
+ </Table.Row>
160
+ <Table.Row
162
161
  sideHighlightColor="category_3"
163
162
  {...props}
164
163
  >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
167
166
  <td>{'Value 3'}</td>
168
167
  <td>{'Value 4'}</td>
169
168
  <td>{'Value 5'}</td>
170
- </TableRow>
171
- <TableRow
169
+ </Table.Row>
170
+ <Table.Row
172
171
  sideHighlightColor="none"
173
172
  {...props}
174
173
  >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
177
176
  <td>{'Value 3'}</td>
178
177
  <td>{'Value 4'}</td>
179
178
  <td>{'Value 5'}</td>
180
- </TableRow>
179
+ </Table.Row>
181
180
  </tbody>
182
181
  </Table>
183
182
  </div>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+
5
+ const TableWithSubcomponents = (props) => {
6
+ return (
7
+ <Table
8
+ size="sm"
9
+ {...props}
10
+ >
11
+ <Table.Head>
12
+ <Table.Row>
13
+ <Table.Header>{'Column 1'}</Table.Header>
14
+ <Table.Header>{'Column 2'}</Table.Header>
15
+ <Table.Header>{'Column 3'}</Table.Header>
16
+ <Table.Header>{'Column 4'}</Table.Header>
17
+ <Table.Header>{'Column 5'}</Table.Header>
18
+ </Table.Row>
19
+ </Table.Head>
20
+ <Table.Body>
21
+ <Table.Row>
22
+ <Table.Cell>{'Value 1'}</Table.Cell>
23
+ <Table.Cell>{'Value 2'}</Table.Cell>
24
+ <Table.Cell>{'Value 3'}</Table.Cell>
25
+ <Table.Cell>{'Value 4'}</Table.Cell>
26
+ <Table.Cell>{'Value 5'}</Table.Cell>
27
+ </Table.Row>
28
+ <Table.Row>
29
+ <Table.Cell>{'Value 1'}</Table.Cell>
30
+ <Table.Cell>{'Value 2'}</Table.Cell>
31
+ <Table.Cell>{'Value 3'}</Table.Cell>
32
+ <Table.Cell>{'Value 4'}</Table.Cell>
33
+ <Table.Cell>{'Value 5'}</Table.Cell>
34
+ </Table.Row>
35
+ <Table.Row>
36
+ <Table.Cell>{'Value 1'}</Table.Cell>
37
+ <Table.Cell>{'Value 2'}</Table.Cell>
38
+ <Table.Cell>{'Value 3'}</Table.Cell>
39
+ <Table.Cell>{'Value 4'}</Table.Cell>
40
+ <Table.Cell>{'Value 5'}</Table.Cell>
41
+ </Table.Row>
42
+ </Table.Body>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableWithSubcomponents
@@ -1,7 +1,7 @@
1
1
  You can optionally build your table using our sub-components, which map to their respective html table elements:
2
2
 
3
- `table_head` = `thead`
4
- `table_body` = `tbody`
5
- `table_row` = `tr`
6
- `table_header` = `th`
7
- `table_cell` = `td`
3
+ `Table.Head` = `thead`
4
+ `Table.Body` = `tbody`
5
+ `Table.Row` = `tr`
6
+ `Table.Header` = `th`
7
+ `Table.Cell` = `td`
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+
5
+ const TableWithSubcomponentsAsDivs = (props) => {
6
+ return (
7
+ <Table
8
+ size="sm"
9
+ tag="div"
10
+ {...props}
11
+ >
12
+ <Table.Head tag="div">
13
+ <Table.Row tag="div">
14
+ <Table.Header tag="div">{'Column 1'}</Table.Header>
15
+ <Table.Header tag="div">{'Column 2'}</Table.Header>
16
+ <Table.Header tag="div">{'Column 3'}</Table.Header>
17
+ <Table.Header tag="div">{'Column 4'}</Table.Header>
18
+ <Table.Header tag="div">{'Column 5'}</Table.Header>
19
+ </Table.Row>
20
+ </Table.Head>
21
+ <Table.Body tag="div">
22
+ <Table.Row tag="div">
23
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
24
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
25
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
26
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
27
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
28
+ </Table.Row>
29
+ <Table.Row tag="div">
30
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
31
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
32
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
33
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
34
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
35
+ </Table.Row>
36
+ <Table.Row>
37
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
38
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
39
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
40
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
41
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
42
+ </Table.Row>
43
+ </Table.Body>
44
+ </Table>
45
+ )
46
+ }
47
+
48
+ export default TableWithSubcomponentsAsDivs
@@ -0,0 +1,7 @@
1
+ You can optionally build your table using our sub-components, which map to their respective html table elements:
2
+
3
+ `table_head` = `thead`
4
+ `table_body` = `tbody`
5
+ `table_row` = `tr`
6
+ `table_header` = `th`
7
+ `table_cell` = `td`