playbook_ui_docs 14.9.0.pre.rc.8 → 14.9.0.pre.rc.9

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f8be8e4de5818fe6f52511db390de3fc76f29aa46b2f5f7cfab68d67b54af9d2
4
- data.tar.gz: c0bc22d98df3a4f70a822ccb0d4169ff0e9e3bf5575ffb7e901bb0d682384461
3
+ metadata.gz: 2ed68fdf82c1b710877b76a6c4f06f2aca624d64d428e0cdd1be758dcf53a636
4
+ data.tar.gz: 90059eae3d22b070801b24742031b7ff0f5ac33fe788e40bfa7aec775cf553c2
5
5
  SHA512:
6
- metadata.gz: 06075ecc01e2658a2739e967a16bce71dc4ee3eaa49fb3510d5f3e709b584b2831216b6f9bcbe5d3cd7b4578ce60ee400bc401a96ae853683db2002a87b8b917
7
- data.tar.gz: ba0eaf8b17d3c83c59cad37596586bd96b8dd15e92ec01782185ec0ae58ab2015215e521e7d9785448e64709ff6cd8ddb912c9d91f77a49ec5be5d889fcee584
6
+ metadata.gz: c3d1d37290cbb8e3e4ffa050969138ddb2357cef1855e8fb924fbd4e8deee2d8a1277860c1788a5c8d12814d09befeebe687806f3f107eebe961944badfe64bd
7
+ data.tar.gz: 6bc296b4197cdd798d0dd4e1aa41bbb87c6015550060a90e0eec093934f6dbde48bccab49eb7022aef4b63f28c6c6d715874f2cd49e62c6221a7ed37c6009efb
@@ -0,0 +1,87 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableStickyLeftColumns = () => {
5
+ return (
6
+ <Table
7
+ responsive="scroll"
8
+ size="md"
9
+ stickyLeftcolumn={["1", "2", "3"]}
10
+ >
11
+ <thead>
12
+ <tr>
13
+ <th id="1">{'Column 1'}</th>
14
+ <th id="2">{'Column 2'}</th>
15
+ <th id="3">{'Column 3'}</th>
16
+ <th>{'Column 4'}</th>
17
+ <th>{'Column 5'}</th>
18
+ <th>{'Column 6'}</th>
19
+ <th>{'Column 7'}</th>
20
+ <th>{'Column 8'}</th>
21
+ <th>{'Column 9'}</th>
22
+ <th>{'Column 10'}</th>
23
+ <th>{'Column 11'}</th>
24
+ <th>{'Column 12'}</th>
25
+ <th>{'Column 13'}</th>
26
+ <th>{'Column 14'}</th>
27
+ <th>{'Column 15'}</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ <tr>
32
+ <td id="1">{'Value 1'}</td>
33
+ <td id="2">{'Value 2'}</td>
34
+ <td id="3">{'Value 3'}</td>
35
+ <td>{'Value 4'}</td>
36
+ <td>{'Value 5'}</td>
37
+ <td>{'Value 6'}</td>
38
+ <td>{'Value 7'}</td>
39
+ <td>{'Value 8'}</td>
40
+ <td>{'Value 9'}</td>
41
+ <td>{'Value 10'}</td>
42
+ <td>{'Value 11'}</td>
43
+ <td>{'Value 12'}</td>
44
+ <td>{'Value 13'}</td>
45
+ <td>{'Value 14'}</td>
46
+ <td>{'Value 15'}</td>
47
+ </tr>
48
+ <tr>
49
+ <td id="1">{'Value 1'}</td>
50
+ <td id="2">{'Value 2'}</td>
51
+ <td id="3">{'Value 3'}</td>
52
+ <td>{'Value 4'}</td>
53
+ <td>{'Value 5'}</td>
54
+ <td>{'Value 6'}</td>
55
+ <td>{'Value 7'}</td>
56
+ <td>{'Value 8'}</td>
57
+ <td>{'Value 9'}</td>
58
+ <td>{'Value 10'}</td>
59
+ <td>{'Value 11'}</td>
60
+ <td>{'Value 12'}</td>
61
+ <td>{'Value 13'}</td>
62
+ <td>{'Value 14'}</td>
63
+ <td>{'Value 15'}</td>
64
+ </tr>
65
+ <tr>
66
+ <td id="1">{'Value 1'}</td>
67
+ <td id="2">{'Value 2'}</td>
68
+ <td id="3">{'Value 3'}</td>
69
+ <td>{'Value 4'}</td>
70
+ <td>{'Value 5'}</td>
71
+ <td>{'Value 6'}</td>
72
+ <td>{'Value 7'}</td>
73
+ <td>{'Value 8'}</td>
74
+ <td>{'Value 9'}</td>
75
+ <td>{'Value 10'}</td>
76
+ <td>{'Value 11'}</td>
77
+ <td>{'Value 12'}</td>
78
+ <td>{'Value 13'}</td>
79
+ <td>{'Value 14'}</td>
80
+ <td>{'Value 15'}</td>
81
+ </tr>
82
+ </tbody>
83
+ </Table>
84
+ )
85
+ }
86
+
87
+ export default TableStickyLeftColumns
@@ -0,0 +1,2 @@
1
+ The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
+ If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
25
25
  export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
27
  export { default as TableOuterPadding } from './_table_outer_padding.jsx'
28
+ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'