playbook_ui 14.22.0.pre.alpha.customheaderat8564 → 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +6 -7
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +13 -4
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
- data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_circle_chart-BZmlhBs2.js +1 -0
- data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-B1tu_vWi.js} +3 -3
- data/dist/chunks/_weekday_stacked-CKk0dR5s.js +45 -0
- data/dist/chunks/{lib-Carqm8Ip.js → lib-DYpq0k8j.js} +1 -1
- data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BUOKwfvW.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +68 -8
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +27 -18
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- data/dist/chunks/_weekday_stacked-CEJcIpjK.js +0 -45
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c1951f86a585c70927101907cbfa6aa6d83d222baafc563fa470eeb490fb4439
|
4
|
+
data.tar.gz: ac23e64cf6d33417c71e6f4282e441b249b934808abc397679f1988f6d2f19f1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: adfb1539088a12f382b08121237037bbf7b9d89ea1acbaa74aeb6e34df20c84bd57fc0c6c73f696d513651948d3cd138d9132a2164132c4d7074bfee8c97312c
|
7
|
+
data.tar.gz: 0a457e8d1e1abce99a8228ec489d17bbfc84e66789153d865ea391fc044777546e9761645d16d31ad43a315362262aaa698a020588d004766fdf184b62d69665
|
@@ -20,7 +20,7 @@ interface CustomCellProps {
|
|
20
20
|
customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
|
21
21
|
selectableRows?: boolean
|
22
22
|
customStyle?: GenericObject
|
23
|
-
}
|
23
|
+
}
|
24
24
|
|
25
25
|
export const CustomCell = ({
|
26
26
|
getValue,
|
@@ -35,7 +35,7 @@ export const CustomCell = ({
|
|
35
35
|
|
36
36
|
const handleOnExpand = (row: Row<GenericObject>) => {
|
37
37
|
onRowToggleClick && onRowToggleClick(row);
|
38
|
-
|
38
|
+
|
39
39
|
if (!expandedControl) {
|
40
40
|
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
|
41
41
|
}
|
@@ -46,8 +46,8 @@ export const CustomCell = ({
|
|
46
46
|
|
47
47
|
return (
|
48
48
|
<div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
|
49
|
-
<Flex
|
50
|
-
alignItems="center"
|
49
|
+
<Flex
|
50
|
+
alignItems="center"
|
51
51
|
columnGap="xs"
|
52
52
|
justify="start"
|
53
53
|
orientation="row"
|
@@ -71,12 +71,11 @@ export const CustomCell = ({
|
|
71
71
|
>
|
72
72
|
{row.getIsExpanded() ? (
|
73
73
|
<Icon cursor="pointer"
|
74
|
-
icon="circle-play"
|
75
|
-
rotation={90}
|
74
|
+
icon="circle-play-down"
|
76
75
|
/>
|
77
76
|
) : (
|
78
77
|
<Icon cursor="pointer"
|
79
|
-
icon="circle-play"
|
78
|
+
icon="circle-play"
|
80
79
|
/>
|
81
80
|
)}
|
82
81
|
</button>
|
@@ -7,6 +7,7 @@ import { GlobalProps } from "../../utilities/globalProps"
|
|
7
7
|
|
8
8
|
import Flex from "../../pb_flex/_flex"
|
9
9
|
import Caption from "../../pb_caption/_caption"
|
10
|
+
import Icon from "../../pb_icon/_icon"
|
10
11
|
|
11
12
|
import { ToggleIconButton } from "./ToggleIconButton"
|
12
13
|
import { renderCollapsibleTrail } from "./CollapsibleTrail"
|
@@ -32,17 +33,19 @@ export const SubRowHeaderRow = ({
|
|
32
33
|
subRowHeaders,
|
33
34
|
table,
|
34
35
|
}: SubRowHeaderRowProps & GlobalProps) => {
|
35
|
-
const { inlineRowLoading } = useContext(AdvancedTableContext)
|
36
|
+
const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
|
36
37
|
|
37
38
|
const numberOfColumns = table.getAllFlatColumns().length
|
38
39
|
const rowHasChildren = row.original.children ? true : false
|
39
40
|
const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
|
41
|
+
const hasSubrowsToSort = row.getParentRow()?.subRows
|
42
|
+
|
40
43
|
|
41
44
|
return (
|
42
45
|
<tr className="custom-row bg-silver">
|
43
46
|
<td
|
44
47
|
className={`custom-row-first-column ${
|
45
|
-
|
48
|
+
isChrome() ? "chrome-styles" : ""
|
46
49
|
}`}
|
47
50
|
colSpan={1}
|
48
51
|
>
|
@@ -50,21 +53,39 @@ export const SubRowHeaderRow = ({
|
|
50
53
|
<div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
|
51
54
|
<Flex align="center"
|
52
55
|
columnGap="xs"
|
56
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
57
|
+
//@ts-ignore
|
58
|
+
justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
|
53
59
|
>
|
54
|
-
|
55
|
-
|
56
|
-
|
60
|
+
<Flex columnGap="xs">
|
61
|
+
{enableToggleExpansion === "all" && canExpand ? (
|
62
|
+
<ToggleIconButton onClick={onClick}
|
63
|
+
row={row}
|
64
|
+
/>
|
65
|
+
) : null}
|
66
|
+
<Caption
|
67
|
+
marginLeft={canExpand ? "none" : "xs"}
|
68
|
+
text={subRowHeaders[row.depth - 1]}
|
57
69
|
/>
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
70
|
+
</Flex>
|
71
|
+
{customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
|
72
|
+
<button
|
73
|
+
aria-label="Sort this group"
|
74
|
+
className="sort-button-icon gray-icon"
|
75
|
+
onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
|
76
|
+
>
|
77
|
+
<Icon
|
78
|
+
cursor="pointer"
|
79
|
+
fixedWidth
|
80
|
+
icon="sort"
|
81
|
+
/>
|
82
|
+
</button>
|
83
|
+
)}
|
63
84
|
</Flex>
|
64
85
|
</div>
|
65
86
|
</td>
|
66
87
|
|
67
88
|
<td colSpan={numberOfColumns - 1} />
|
68
89
|
</tr>
|
69
|
-
)
|
90
|
+
);
|
70
91
|
}
|
@@ -36,6 +36,7 @@ type AdvancedTableProps = {
|
|
36
36
|
columnDefinitions: GenericObject[]
|
37
37
|
columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
|
38
38
|
columnVisibilityControl?: GenericObject
|
39
|
+
customSort?:boolean;
|
39
40
|
dark?: boolean
|
40
41
|
data?: { [key: string]: string }
|
41
42
|
enableToggleExpansion?: "all" | "header" | "none"
|
@@ -67,6 +68,7 @@ type AdvancedTableProps = {
|
|
67
68
|
tableProps?: GenericObject
|
68
69
|
toggleExpansionIcon?: string | string[]
|
69
70
|
onRowSelectionChange?: (arg: RowSelectionState) => void
|
71
|
+
onCustomSortClick?: (arg: GenericObject[]) => void
|
70
72
|
virtualizedRows?: boolean
|
71
73
|
allowFullScreen?: boolean
|
72
74
|
fullScreenControl?: (controls: FullscreenControls) => void
|
@@ -81,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
81
83
|
columnDefinitions,
|
82
84
|
columnGroupBorderColor,
|
83
85
|
columnVisibilityControl,
|
86
|
+
customSort,
|
84
87
|
dark = false,
|
85
88
|
data = {},
|
86
89
|
enableToggleExpansion = "header",
|
@@ -95,6 +98,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
95
98
|
maxHeight,
|
96
99
|
onRowToggleClick,
|
97
100
|
onToggleExpansionClick,
|
101
|
+
onCustomSortClick,
|
98
102
|
pagination = false,
|
99
103
|
paginationProps,
|
100
104
|
pinnedRows,
|
@@ -325,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
325
329
|
columnDefinitions={columnDefinitions}
|
326
330
|
columnGroupBorderColor={columnGroupBorderColor}
|
327
331
|
columnVisibilityControl={columnVisibilityControl}
|
332
|
+
customSort={customSort}
|
328
333
|
enableToggleExpansion={enableToggleExpansion}
|
329
334
|
enableVirtualization={virtualizedRows}
|
330
335
|
expandByDepth={expandByDepth}
|
@@ -336,6 +341,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
336
341
|
isActionBarVisible={isActionBarVisible}
|
337
342
|
isFullscreen={isFullscreen}
|
338
343
|
loading={loading}
|
344
|
+
onCustomSortClick={onCustomSortClick}
|
339
345
|
onExpandByDepthClick={onExpandByDepthClick}
|
340
346
|
pinnedRows={pinnedRows}
|
341
347
|
responsive={responsive}
|
@@ -12,7 +12,7 @@
|
|
12
12
|
<% content.presence %>
|
13
13
|
<% else %>
|
14
14
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
|
15
|
-
<%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
|
15
|
+
<%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
|
16
16
|
<% end %>
|
17
17
|
<% end %>
|
18
18
|
<% end %>
|
@@ -31,6 +31,8 @@ module Playbook
|
|
31
31
|
default: []
|
32
32
|
prop :scroll_bar_none, type: Playbook::Props::Boolean,
|
33
33
|
default: false
|
34
|
+
prop :row_styling, type: Playbook::Props::Array,
|
35
|
+
default: []
|
34
36
|
|
35
37
|
def classname
|
36
38
|
additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
+
|
5
|
+
const AdvancedTableCustomSort = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
id: "year",
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
12
|
+
},
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
id: "newEnrollments",
|
16
|
+
label: "New Enrollments",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
accessor: "scheduledMeetings",
|
20
|
+
id: "scheduledMeetings",
|
21
|
+
label: "Scheduled Meetings",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "attendanceRate",
|
25
|
+
id: "attendanceRate",
|
26
|
+
label: "Attendance Rate",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "completedClasses",
|
30
|
+
id: "completedClasses",
|
31
|
+
label: "Completed Classes",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
accessor: "classCompletionRate",
|
35
|
+
id: "classCompletionRate",
|
36
|
+
label: "Class Completion Rate",
|
37
|
+
},
|
38
|
+
{
|
39
|
+
accessor: "graduatedStudents",
|
40
|
+
id: "graduatedStudents",
|
41
|
+
label: "Graduated Students",
|
42
|
+
},
|
43
|
+
]
|
44
|
+
|
45
|
+
//Render the subRow header rows
|
46
|
+
const subRowHeaders = ["Quarter", "Month", "Day"]
|
47
|
+
|
48
|
+
return (
|
49
|
+
<div>
|
50
|
+
<AdvancedTable
|
51
|
+
columnDefinitions={columnDefinitions}
|
52
|
+
customSort
|
53
|
+
enableToggleExpansion="all"
|
54
|
+
onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
|
55
|
+
tableData={MOCK_DATA}
|
56
|
+
{...props}
|
57
|
+
>
|
58
|
+
<AdvancedTable.Header enableSorting />
|
59
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders} />
|
60
|
+
</AdvancedTable>
|
61
|
+
</div>
|
62
|
+
)
|
63
|
+
}
|
64
|
+
|
65
|
+
export default AdvancedTableCustomSort
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
|
2
|
+
|
3
|
+
The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table.
|
4
|
+
|
5
|
+
__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.
|
@@ -0,0 +1,46 @@
|
|
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
|
+
<% row_styling = [
|
34
|
+
{
|
35
|
+
row_id: "1",
|
36
|
+
background_color: "#F9BB00",
|
37
|
+
},
|
38
|
+
{
|
39
|
+
row_id: "8",
|
40
|
+
background_color: "#0056CF",
|
41
|
+
font_color: "white",
|
42
|
+
expand_button_color: "white",
|
43
|
+
},
|
44
|
+
] %>
|
45
|
+
|
46
|
+
<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
|
2
|
+
|
3
|
+
- `background_color` : use this to control the background color of the row
|
4
|
+
- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
|
5
|
+
- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
|
6
|
+
|
7
|
+
**NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
@@ -12,21 +12,23 @@ examples:
|
|
12
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
|
-
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
15
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
17
16
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
18
17
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
19
18
|
- advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
|
20
19
|
- advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
|
21
20
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
22
|
-
|
23
|
-
|
21
|
+
- advanced_table_row_styling: Row Styling
|
22
|
+
- advanced_table_column_styling_rails: Column Styling
|
23
|
+
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
24
|
+
- advanced_table_column_border_color_rails: Column Group Border Color
|
25
|
+
|
24
26
|
|
25
27
|
react:
|
26
28
|
- advanced_table_default: Default (Required Props)
|
27
|
-
- advanced_table_loading: Loading State
|
28
29
|
- advanced_table_sort: Enable Sorting
|
29
30
|
- advanced_table_sort_control: Sort Control
|
31
|
+
- advanced_table_custom_sort: Custom Sort
|
30
32
|
- advanced_table_expanded_control: Expanded Control
|
31
33
|
- advanced_table_expand_by_depth: Expand by Depth
|
32
34
|
- advanced_table_subrow_headers: SubRow Headers
|
@@ -37,30 +39,31 @@ examples:
|
|
37
39
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
38
40
|
- advanced_table_sticky_columns: Sticky Columns
|
39
41
|
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
40
|
-
- advanced_table_inline_row_loading: Inline Row Loading
|
41
42
|
- advanced_table_responsive: Responsive Tables
|
42
43
|
- advanced_table_custom_cell: Custom Components for Cells
|
43
44
|
- advanced_table_with_custom_header: Custom Header Cell
|
44
45
|
- advanced_table_pagination: Pagination
|
45
46
|
- advanced_table_pagination_with_props: Pagination Props
|
47
|
+
- advanced_table_loading: Loading State
|
48
|
+
- advanced_table_inline_row_loading: Inline Row Loading
|
46
49
|
- advanced_table_column_headers: Multi-Header Columns
|
47
50
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
48
51
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
49
|
-
- advanced_table_column_border_color: Column Group Border Color
|
50
52
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
53
|
+
- advanced_table_pinned_rows: Pinned Rows
|
51
54
|
- advanced_table_selectable_rows: Selectable Rows
|
52
55
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
53
56
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
54
57
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
55
58
|
- advanced_table_inline_editing: Inline Cell Editing
|
56
|
-
- advanced_table_fullscreen: Fullscreen
|
57
59
|
- advanced_table_column_visibility: Column Visibility Control
|
58
60
|
- advanced_table_column_visibility_with_state: Column Visibility Control With State
|
59
61
|
- advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
|
60
62
|
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
61
|
-
- advanced_table_pinned_rows: Pinned Rows
|
62
63
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
63
64
|
- advanced_table_row_styling: Row Styling
|
64
65
|
- advanced_table_column_styling: Column Styling
|
65
66
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
67
|
+
- advanced_table_column_border_color: Column Group Border Color
|
68
|
+
- advanced_table_fullscreen: Fullscreen
|
66
69
|
- advanced_table_infinite_scroll: Infinite Scroll
|
@@ -38,4 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
|
|
38
38
|
export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
|
39
39
|
export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
|
40
40
|
export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
|
41
|
-
export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
|
41
|
+
export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
|
42
|
+
export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
|
@@ -23,6 +23,8 @@ module Playbook
|
|
23
23
|
default: "scroll"
|
24
24
|
prop :selectable_rows, type: Playbook::Props::Boolean,
|
25
25
|
default: false
|
26
|
+
prop :row_styling, type: Playbook::Props::Array,
|
27
|
+
default: []
|
26
28
|
|
27
29
|
def flatten_columns(columns)
|
28
30
|
columns.flat_map do |col|
|
@@ -66,7 +68,7 @@ module Playbook
|
|
66
68
|
end
|
67
69
|
|
68
70
|
# Additional class and data attributes needed for toggle logic
|
69
|
-
output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
|
71
|
+
output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
|
70
72
|
|
71
73
|
if row[:children].present?
|
72
74
|
row[:children].each do |child_row|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
<%
|
2
|
+
row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s }
|
3
|
+
button_color = row_style&.[](:expand_button_color)
|
4
|
+
bg_color = row_style&.[](:background_color)
|
5
|
+
font_color = row_style&.[](:font_color)
|
6
|
+
%>
|
7
|
+
|
1
8
|
<%= pb_content_tag(:tr) do %>
|
2
9
|
<% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
|
3
10
|
<% if has_separate_checkbox %>
|
@@ -5,7 +12,7 @@
|
|
5
12
|
<% end %>
|
6
13
|
<% object.column_definitions.each_with_index do |column, index| %>
|
7
14
|
<% next unless column[:accessor].present? %>
|
8
|
-
<%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
|
15
|
+
<%= pb_rails("table/table_cell", props: { html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
|
9
16
|
<%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
|
10
17
|
<% if collapsible_trail && index.zero? %>
|
11
18
|
<% (1..depth).each do |i| %>
|
@@ -28,13 +35,15 @@
|
|
28
35
|
<button
|
29
36
|
id="<%= "#{object.id}_#{object.row.object_id}" %>"
|
30
37
|
class="gray-icon expand-toggle-icon"
|
31
|
-
data-advanced-table="true"
|
38
|
+
data-advanced-table="true"
|
39
|
+
style="color: <%= button_color %>"
|
40
|
+
>
|
32
41
|
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
33
|
-
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer"
|
42
|
+
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
|
34
43
|
</button>
|
35
44
|
<% end %>
|
36
45
|
<% end %>
|
37
|
-
<%= pb_rails("flex/flex_item") do %>
|
46
|
+
<%= pb_rails("flex/flex_item") do %>
|
38
47
|
<% if column[:custom_renderer].present? %>
|
39
48
|
<%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
|
40
49
|
<% elsif index.zero? %>
|
@@ -27,6 +27,8 @@ module Playbook
|
|
27
27
|
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
|
28
28
|
values: %w[all header none],
|
29
29
|
default: "header"
|
30
|
+
prop :row_styling, type: Playbook::Props::Array,
|
31
|
+
default: []
|
30
32
|
|
31
33
|
def data
|
32
34
|
Hash(prop(:data)).merge(table_data_attributes)
|
@@ -5,7 +5,7 @@
|
|
5
5
|
@import "../tokens/typography";
|
6
6
|
|
7
7
|
[class^=pb_badge_kit] {
|
8
|
-
$
|
8
|
+
$pb_badge_height_rounded: 16px;
|
9
9
|
|
10
10
|
display: inline-flex;
|
11
11
|
align-items: center;
|
@@ -13,7 +13,6 @@
|
|
13
13
|
border-radius: $border_rad_light;
|
14
14
|
padding: 0 $space_xs/2;
|
15
15
|
border-width: 1px;
|
16
|
-
border-style: solid;
|
17
16
|
border-color: $card_light;
|
18
17
|
white-space: nowrap;
|
19
18
|
|
@@ -31,10 +30,10 @@
|
|
31
30
|
}
|
32
31
|
|
33
32
|
&[class*=_rounded] {
|
34
|
-
height: $
|
35
|
-
min-height: $
|
36
|
-
min-width: $
|
37
|
-
border-radius: $
|
33
|
+
height: $pb_badge_height_rounded;
|
34
|
+
min-height: $pb_badge_height_rounded;
|
35
|
+
min-width: $pb_badge_height_rounded;
|
36
|
+
border-radius: $pb_badge_height_rounded / 2;
|
38
37
|
}
|
39
38
|
|
40
39
|
&[class*=_notification] {
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import colors from '../tokens/exports/_colors.module.scss'
|
2
|
+
import typography from '../tokens/exports/_typography.module.scss'
|
3
|
+
|
4
|
+
const barGraphTheme = {
|
5
|
+
title: {
|
6
|
+
text: "",
|
7
|
+
style: {
|
8
|
+
color: colors.text_lt_default,
|
9
|
+
fontFamily: typography.font_family_base,
|
10
|
+
fontWeight: typography.bold,
|
11
|
+
fontSize: typography.heading_3,
|
12
|
+
},
|
13
|
+
},
|
14
|
+
subtitle: {
|
15
|
+
text: "",
|
16
|
+
style: {
|
17
|
+
fontFamily: typography.font_family_base,
|
18
|
+
color: colors.text_lt_light,
|
19
|
+
fontWeight: typography.regular,
|
20
|
+
fontSize: typography.text_base,
|
21
|
+
},
|
22
|
+
},
|
23
|
+
chart: {
|
24
|
+
type: "column",
|
25
|
+
},
|
26
|
+
tooltip: {
|
27
|
+
backgroundColor: {
|
28
|
+
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
29
|
+
stops: [
|
30
|
+
[0, colors.bg_dark],
|
31
|
+
[1, colors.bg_dark],
|
32
|
+
],
|
33
|
+
},
|
34
|
+
style: {
|
35
|
+
fontFamily: typography.font_family_base,
|
36
|
+
color: colors.text_dk_default,
|
37
|
+
fontWeight: typography.regular,
|
38
|
+
fontSize: typography.text_smaller,
|
39
|
+
},
|
40
|
+
},
|
41
|
+
colors: [
|
42
|
+
colors.data_1,
|
43
|
+
colors.data_2,
|
44
|
+
colors.data_3,
|
45
|
+
colors.data_4,
|
46
|
+
colors.data_5,
|
47
|
+
colors.data_6,
|
48
|
+
colors.data_7,
|
49
|
+
],
|
50
|
+
credits: { enabled: false },
|
51
|
+
legend: {
|
52
|
+
enabled: false,
|
53
|
+
itemStyle: {
|
54
|
+
color: colors.text_lt_light,
|
55
|
+
fill: colors.text_lt_light,
|
56
|
+
fontSize: typography.text_smaller,
|
57
|
+
},
|
58
|
+
},
|
59
|
+
xAxis: {
|
60
|
+
gridLineWidth: 0,
|
61
|
+
lineColor: colors.border_light,
|
62
|
+
tickColor: colors.border_light,
|
63
|
+
labels: {
|
64
|
+
style: {
|
65
|
+
fontFamily: typography.font_family_base,
|
66
|
+
color: colors.text_lt_lighter,
|
67
|
+
fontWeight: typography.bold,
|
68
|
+
fontSize: typography.text_smaller,
|
69
|
+
},
|
70
|
+
},
|
71
|
+
title: {
|
72
|
+
style: {
|
73
|
+
color: colors.text_lt_default,
|
74
|
+
fontFamily: typography.font_family_base,
|
75
|
+
fontWeight: typography.regular,
|
76
|
+
fontSize: typography.heading_4,
|
77
|
+
},
|
78
|
+
},
|
79
|
+
},
|
80
|
+
yAxis: {
|
81
|
+
alternateGridColor: undefined as string | undefined,
|
82
|
+
minorTickInterval: null as number | null,
|
83
|
+
gridLineColor: colors.border_light,
|
84
|
+
minorGridLineColor: colors.border_light,
|
85
|
+
lineWidth: 0,
|
86
|
+
tickWidth: 0,
|
87
|
+
labels: {
|
88
|
+
style: {
|
89
|
+
fontFamily: typography.font_family_base,
|
90
|
+
color: colors.text_lt_lighter,
|
91
|
+
fontWeight: typography.bold,
|
92
|
+
fontSize: typography.text_smaller,
|
93
|
+
},
|
94
|
+
},
|
95
|
+
title: {
|
96
|
+
style: {
|
97
|
+
fontFamily: typography.font_family_base,
|
98
|
+
color: colors.text_lt_lighter,
|
99
|
+
fontWeight: typography.bold,
|
100
|
+
fontSize: typography.text_smaller,
|
101
|
+
},
|
102
|
+
},
|
103
|
+
},
|
104
|
+
}
|
105
|
+
|
106
|
+
export default barGraphTheme;
|