playbook_ui_docs 14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 → 14.11.1.pre.alpha.PBNTR769sticky5359
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_responsive.jsx +52 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/dist/playbook-doc.js +1 -1
- metadata +3 -8
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f3bdb49fc5fa2ae41cef519b8fc54c5a9fa804baecf7583ef6b16d0dbd1167d4
|
4
|
+
data.tar.gz: c61ffaa7be0fb6b1421dd77dcaa4c7653006377abfc564278064e3fea0a9cf94
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fae106e1a12690322c17c135dd21c65cf7af1fc23ddbab77855f4d958e7afce6ee4194b9bcd1a52a2e2395d947365f5a793d1de56de09ecc2ef4f499d4059282
|
7
|
+
data.tar.gz: '078f33440cc6284dc9d29952c1d500727d7957b76a147b50af05c62d4005fc16625828295c72e361d64e1dd7cffde0f3ecd884851ca807d392595e4a4f2fef20'
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { AdvancedTable } from "playbook-ui"
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
+
|
5
|
+
const AdvancedTableStickyHeaderResponsive = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
accessor: "newEnrollments",
|
14
|
+
label: "New Enrollments",
|
15
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
|
39
|
+
return (
|
40
|
+
<div>
|
41
|
+
<AdvancedTable
|
42
|
+
columnDefinitions={columnDefinitions}
|
43
|
+
htmlOptions={{style: { maxHeight: "100vh" }}}
|
44
|
+
tableData={MOCK_DATA}
|
45
|
+
tableProps={{sticky:true}}
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
</div>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
|
52
|
+
export default AdvancedTableStickyHeaderResponsive
|
@@ -22,6 +22,7 @@ examples:
|
|
22
22
|
- advanced_table_table_props: Table Props
|
23
23
|
- advanced_table_inline_row_loading: Inline Row Loading
|
24
24
|
- advanced_table_responsive: Responsive Tables
|
25
|
+
- advanced_table_sticky_header_responsive: Sticky Header and Responsive
|
25
26
|
- advanced_table_custom_cell: Custom Components for Cells
|
26
27
|
- advanced_table_pagination: Pagination
|
27
28
|
- advanced_table_pagination_with_props: Pagination Props
|
@@ -13,4 +13,5 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
|
|
13
13
|
export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
|
14
14
|
export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
|
15
15
|
export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
|
16
|
-
export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
|
16
|
+
export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
|
17
|
+
export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'
|
@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
|
|
2
2
|
|
3
3
|
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
4
4
|
|
5
|
-
|
5
|
+
|
@@ -1,3 +1,3 @@
|
|
1
|
-
The `
|
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
2
|
|
3
|
-
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `
|
3
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
|
@@ -5,8 +5,6 @@ examples:
|
|
5
5
|
- table_lg: Large
|
6
6
|
- table_sticky: Sticky Header
|
7
7
|
- table_sticky_left_columns: Sticky Left Column
|
8
|
-
- table_sticky_right_columns: Sticky Right Column
|
9
|
-
- table_sticky_columns: Sticky Left and Right Columns
|
10
8
|
- table_header: Table Header
|
11
9
|
- table_alignment_row_rails: Row Alignment
|
12
10
|
- table_alignment_column_rails: Cell Alignment
|