playbook_ui 14.23.0 → 14.24.0.pre.alpha.PLAY2116datepickercursorfix9610
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +7 -6
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +24 -25
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +10 -10
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +11 -13
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +7 -4
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +112 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +13 -7
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +14 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +16 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +43 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md +1 -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/_advanced_table_selectable_rows_header_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +107 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +4 -11
- data/app/pb_kits/playbook/pb_advanced_table/index.js +108 -125
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +7 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +7 -4
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +46 -4
- 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 +24 -5
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +12 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +2 -1
- data/app/pb_kits/playbook/pb_checkbox/index.js +218 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +10 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb +24 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md +3 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date/_date.tsx +5 -3
- data/app/pb_kits/playbook/pb_date/date.html.erb +6 -6
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx +17 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +19 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +17 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss +36 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +90 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +24 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +11 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +2 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx +43 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +6 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +35 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +26 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +45 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +59 -22
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +40 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +50 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +31 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +34 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +64 -23
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +7 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +36 -17
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +31 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +63 -31
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +35 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +41 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +107 -62
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +4 -7
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +16 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +18 -9
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx +94 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.test.jsx +212 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +12 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx +112 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md +3 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +14 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_select/select.rb +4 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +49 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +15 -0
- data/dist/chunks/_line_graph-Bs1q77QJ.js +1 -0
- data/dist/chunks/_typeahead-DDDKDPZS.js +6 -0
- data/dist/chunks/_weekday_stacked-DkFv7FEh.js +37 -0
- data/dist/chunks/lib-CY5ZPzic.js +29 -0
- data/dist/chunks/{pb_form_validation-B7kuYG-_.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -11
- 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 +2 -2
- metadata +53 -26
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +0 -202
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +0 -69
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +0 -71
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +0 -110
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +0 -10
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +0 -34
- data/dist/chunks/_circle_chart-D01WLw-z.js +0 -1
- data/dist/chunks/_typeahead-mrBE9f17.js +0 -22
- data/dist/chunks/_weekday_stacked-_LSSbN1y.js +0 -45
- data/dist/chunks/lib-CHh_1-Oj.js +0 -29
- /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_gauge/docs/{_gauge_colors.md → _gauge_colors_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_complex.md → _gauge_complex_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_line_graph/docs/{_line_graph_colors.md → _line_graph_colors_rails.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: 151efff8e8919ee754e1a1aca5222e70bc7735ea5fbbc7f5447251fec5c9253d
|
4
|
+
data.tar.gz: f150ecf4dbff7c034aef1475c0b6f10c0654da5a9e4326ef68cec2bbeded2db3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 93ac762524de32467af5a48e79dedb6ff9d146fffa4e94d31e534b49053a99d75b1961af8ffd3480503389a5f730a48102814238ed64d0166941db4eea69e23f
|
7
|
+
data.tar.gz: 889f58a73872c045d76a5fb24785ac9ec994a77a22b9c4c62f99d3472efe0e727987ac7dec8f3b7f9cbb85934365c5fc155ce07e717cb460e7805292d893289d
|
@@ -107,7 +107,6 @@
|
|
107
107
|
@import 'pb_typeahead/typeahead';
|
108
108
|
@import 'pb_user/user';
|
109
109
|
@import 'pb_user_badge/user_badge';
|
110
|
-
@import 'pb_walkthrough/walkthrough';
|
111
110
|
@import 'pb_weekday_stacked/weekday_stacked';
|
112
111
|
@import 'pb_empty_state/empty_state';
|
113
112
|
@import 'utilities/mixins';
|
@@ -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,11 +71,12 @@ export const CustomCell = ({
|
|
71
71
|
>
|
72
72
|
{row.getIsExpanded() ? (
|
73
73
|
<Icon cursor="pointer"
|
74
|
-
icon="circle-play
|
74
|
+
icon="circle-play"
|
75
|
+
rotation={90}
|
75
76
|
/>
|
76
77
|
) : (
|
77
78
|
<Icon cursor="pointer"
|
78
|
-
icon="circle-play"
|
79
|
+
icon="circle-play"
|
79
80
|
/>
|
80
81
|
)}
|
81
82
|
</button>
|
@@ -58,7 +58,9 @@ const TableCellRenderer = ({
|
|
58
58
|
// Find the “owning” colDefinition by accessor. Needed for multi column logic
|
59
59
|
const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
|
60
60
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
61
|
-
|
61
|
+
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
62
|
+
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
63
|
+
|
62
64
|
return (
|
63
65
|
<td
|
64
66
|
align={cellAlignment}
|
@@ -68,6 +70,7 @@ const TableCellRenderer = ({
|
|
68
70
|
isPinnedLeft && 'pinned-left',
|
69
71
|
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
|
70
72
|
isLastCell && 'last-cell',
|
73
|
+
paddingClass
|
71
74
|
)}
|
72
75
|
key={`${cell.id}-data`}
|
73
76
|
style={{
|
@@ -4,49 +4,48 @@ import { Header } from "@tanstack/react-table"
|
|
4
4
|
import { GenericObject } from "../../types"
|
5
5
|
|
6
6
|
import Icon from "../../pb_icon/_icon"
|
7
|
-
import { getAllIcons } from "../../utilities/icons/allicons"
|
8
7
|
|
9
8
|
import { displayIcon } from "../Utilities/IconHelpers"
|
10
9
|
|
11
10
|
type SortIconButtonProps = {
|
12
11
|
header: Header<GenericObject, unknown>
|
13
12
|
sortIcon?: string | string[]
|
13
|
+
enableSortingRemoval?: boolean
|
14
14
|
}
|
15
15
|
|
16
|
-
export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
|
17
|
-
|
18
|
-
const
|
19
|
-
const secondIcon = displayIcon(sortIcon)[1]
|
20
|
-
const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
|
21
|
-
const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
|
16
|
+
export const SortIconButton = ({ header, sortIcon, enableSortingRemoval }: SortIconButtonProps) => {
|
17
|
+
const firstIcon = displayIcon(sortIcon)[0]
|
18
|
+
const secondIcon = displayIcon(sortIcon)[1]
|
22
19
|
|
23
20
|
return (
|
24
21
|
<>
|
25
|
-
{header.column.getIsSorted() === "desc"
|
26
|
-
<div
|
22
|
+
{header.column.getIsSorted() === "desc" && (
|
23
|
+
<div
|
24
|
+
className="sort-button-icon"
|
27
25
|
key={firstIcon}
|
26
|
+
style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
|
28
27
|
>
|
29
|
-
{ firstIcon === "arrow-up-short-wide" ? (
|
30
|
-
<Icon
|
31
|
-
className="svg-inline--fa"
|
32
|
-
customIcon={upIcon}
|
33
|
-
/> ) : (
|
34
28
|
<Icon icon={firstIcon} />
|
35
|
-
)}
|
36
29
|
</div>
|
37
|
-
)
|
38
|
-
|
30
|
+
)}
|
31
|
+
{header.column.getIsSorted() === "asc" && (
|
32
|
+
<div
|
33
|
+
className="sort-button-icon"
|
39
34
|
key={secondIcon}
|
35
|
+
style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
|
40
36
|
>
|
41
|
-
{ secondIcon === "arrow-down-short-wide" ? (
|
42
|
-
<Icon
|
43
|
-
className="svg-inline--fa"
|
44
|
-
customIcon={downIcon}
|
45
|
-
/> ) : (
|
46
37
|
<Icon icon={secondIcon} />
|
47
|
-
|
38
|
+
</div>
|
39
|
+
)}
|
40
|
+
{header.column.getIsSorted() === false && (
|
41
|
+
<div
|
42
|
+
className="sort-button-icon"
|
43
|
+
key={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon}
|
44
|
+
style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
|
45
|
+
>
|
46
|
+
<Icon icon={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon} />
|
48
47
|
</div>
|
49
48
|
)}
|
50
49
|
</>
|
51
|
-
)
|
52
|
-
}
|
50
|
+
);
|
51
|
+
};
|
@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
|
|
112
112
|
paddingBottom="xs"
|
113
113
|
text={node.label}
|
114
114
|
/>
|
115
|
-
<Flex flexDirection="column"
|
115
|
+
<Flex flexDirection="column"
|
116
116
|
paddingLeft="lg"
|
117
117
|
>
|
118
118
|
{node?.children?.map((child) =>
|
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
|
|
141
141
|
setShowPopover(!shouldClose)
|
142
142
|
|
143
143
|
const popoverReference = (
|
144
|
-
<Tooltip
|
145
|
-
placement="top"
|
144
|
+
<Tooltip
|
145
|
+
placement="top"
|
146
146
|
text="Column Configuration"
|
147
147
|
>
|
148
148
|
<div onClick={togglePopover}>
|
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
|
|
170
170
|
>
|
171
171
|
{type === "row-selection" ? (
|
172
172
|
<>
|
173
|
-
<Caption color="light"
|
174
|
-
paddingLeft="xs"
|
173
|
+
<Caption color="light"
|
174
|
+
paddingLeft="xs"
|
175
175
|
size="xs"
|
176
176
|
>
|
177
177
|
{selectedCount} Selected
|
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
|
|
188
188
|
zIndex={3}
|
189
189
|
>
|
190
190
|
<>
|
191
|
-
<Caption
|
192
|
-
paddingY="sm"
|
191
|
+
<Caption
|
192
|
+
paddingY="sm"
|
193
193
|
text="Columns Config"
|
194
|
-
textAlign="center"
|
194
|
+
textAlign="center"
|
195
195
|
/>
|
196
196
|
<SectionSeparator paddingBottom="xs" />
|
197
197
|
{tree.map((node: VisibilityNode) => (
|
198
|
-
<Flex cursor="pointer"
|
199
|
-
flexDirection="column"
|
198
|
+
<Flex cursor="pointer"
|
199
|
+
flexDirection="column"
|
200
200
|
key={node.id}
|
201
201
|
paddingX="xs"
|
202
202
|
>
|
@@ -50,6 +50,7 @@ export const TableHeaderCell = ({
|
|
50
50
|
expanded,
|
51
51
|
setExpanded,
|
52
52
|
expandByDepth,
|
53
|
+
enableSortingRemoval,
|
53
54
|
onExpandByDepthClick,
|
54
55
|
toggleExpansionIcon,
|
55
56
|
sortControl,
|
@@ -64,6 +65,7 @@ export const TableHeaderCell = ({
|
|
64
65
|
|
65
66
|
type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
|
66
67
|
|
68
|
+
|
67
69
|
const toggleSortButton = (event: React.SyntheticEvent) => {
|
68
70
|
if (sortControl) {
|
69
71
|
const sortIsDesc = header?.column.getIsSorted() === "desc"
|
@@ -101,7 +103,6 @@ export const TableHeaderCell = ({
|
|
101
103
|
if (!header) return false;
|
102
104
|
|
103
105
|
if (header.colSpan > 1 && header.column.parent !== undefined) return true;
|
104
|
-
|
105
106
|
const parent = header.column.parent;
|
106
107
|
|
107
108
|
if (!parent) {
|
@@ -111,7 +112,7 @@ export const TableHeaderCell = ({
|
|
111
112
|
const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
|
112
113
|
return visibleSiblings.at(-1) === header.column;
|
113
114
|
})();
|
114
|
-
|
115
|
+
|
115
116
|
const cellClassName = classnames(
|
116
117
|
"table-header-cells",
|
117
118
|
`${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
|
@@ -120,7 +121,7 @@ const cellClassName = classnames(
|
|
120
121
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
121
122
|
isLastHeaderCell ? "last-header-cell" : "",
|
122
123
|
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
|
123
|
-
|
124
|
+
colDef?.columnStyling?.headerPadding && `p_${colDef?.columnStyling?.headerPadding}`
|
124
125
|
);
|
125
126
|
|
126
127
|
const cellId = `${loading ?
|
@@ -257,12 +258,9 @@ const isToggleExpansionEnabled =
|
|
257
258
|
)}
|
258
259
|
|
259
260
|
<Flex
|
260
|
-
className={`${header?.index === 0 &&
|
261
|
-
|
262
|
-
|
263
|
-
cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
|
264
|
-
{...(header?.index === 0 &&
|
265
|
-
enableSorting && {
|
261
|
+
className={`${header?.index === 0 && enableSorting && "header-sort-button pb_th_link"} ${header?.index !== 0 && header?.column.getCanSort() && "header-sort-secondary-columns"}`}
|
262
|
+
cursor={((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting) ? "pointer" : "default")}
|
263
|
+
{...(((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) && {
|
266
264
|
htmlOptions: {
|
267
265
|
onClick: (event: React.MouseEvent) => toggleSortButton(event),
|
268
266
|
onKeyDown: (event: React.KeyboardEvent) => {
|
@@ -280,13 +278,13 @@ const isToggleExpansionEnabled =
|
|
280
278
|
{flexRender(header?.column.columnDef.header, header?.getContext())}
|
281
279
|
</div>
|
282
280
|
|
283
|
-
{header?.index === 0 &&
|
284
|
-
header.column.getCanSort() &&
|
285
|
-
enableSorting &&
|
281
|
+
{((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) &&
|
286
282
|
(loading ? (
|
287
283
|
<div className="loading-toggle-icon" />
|
288
284
|
) : (
|
289
|
-
<SortIconButton
|
285
|
+
<SortIconButton
|
286
|
+
enableSortingRemoval={enableSortingRemoval}
|
287
|
+
header={header}
|
290
288
|
sortIcon={sortIcon}
|
291
289
|
/>
|
292
290
|
))}
|
@@ -16,8 +16,10 @@ import { createCellFunction } from "../Utilities/CellRendererUtils";
|
|
16
16
|
interface UseTableStateProps {
|
17
17
|
tableData: GenericObject[];
|
18
18
|
columnDefinitions: GenericObject[];
|
19
|
+
enableSortingRemoval?: boolean;
|
19
20
|
expandedControl?: GenericObject;
|
20
21
|
sortControl?: GenericObject;
|
22
|
+
firstColumnSort?: boolean;
|
21
23
|
onRowToggleClick?: (arg: Row<GenericObject>) => void;
|
22
24
|
selectableRows?: boolean;
|
23
25
|
initialLoadingRowsCount?: number;
|
@@ -38,6 +40,7 @@ interface UseTableStateProps {
|
|
38
40
|
export function useTableState({
|
39
41
|
tableData,
|
40
42
|
columnDefinitions,
|
43
|
+
enableSortingRemoval,
|
41
44
|
expandedControl,
|
42
45
|
sortControl,
|
43
46
|
onRowToggleClick,
|
@@ -83,19 +86,19 @@ export function useTableState({
|
|
83
86
|
const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
|
84
87
|
return columnDefinitions?.map((column, index) => {
|
85
88
|
const isFirstColumn = isRoot && index === 0;
|
86
|
-
|
87
89
|
// Handle grouped columns
|
88
90
|
if (column.columns && column.columns.length > 0) {
|
89
91
|
return {
|
90
|
-
header: column.header
|
92
|
+
header: column.header ?? column.label ?? "",
|
93
|
+
id: column.id ?? column.label ?? `group-${index}`,
|
91
94
|
columns: buildColumns(column.columns, false),
|
92
95
|
};
|
93
96
|
}
|
94
|
-
|
95
97
|
// Define the base column structure
|
96
98
|
const columnStructure = {
|
97
99
|
...columnHelper.accessor(column.accessor, {
|
98
100
|
header: column.header ?? column.label ?? "",
|
101
|
+
enableSorting: isFirstColumn || column.enableSort === true,
|
99
102
|
}),
|
100
103
|
};
|
101
104
|
|
@@ -166,7 +169,7 @@ export function useTableState({
|
|
166
169
|
getCoreRowModel: getCoreRowModel(),
|
167
170
|
getExpandedRowModel: getExpandedRowModel(),
|
168
171
|
getSortedRowModel: getSortedRowModel(),
|
169
|
-
enableSortingRemoval:
|
172
|
+
enableSortingRemoval: enableSortingRemoval,
|
170
173
|
sortDescFirst: true,
|
171
174
|
onRowSelectionChange: setRowSelection,
|
172
175
|
onRowPinningChange,
|
@@ -124,13 +124,65 @@
|
|
124
124
|
-ms-overflow-style: none !important;
|
125
125
|
scrollbar-width: none !important;
|
126
126
|
}
|
127
|
-
|
127
|
+
|
128
|
+
// When action bar is hidden, ensure proper border radius for header corners
|
129
|
+
&.hidden-action-bar {
|
130
|
+
.pb_advanced_table_header {
|
131
|
+
> tr:first-child {
|
132
|
+
th:first-child {
|
133
|
+
border-top-left-radius: 4px !important;
|
134
|
+
}
|
135
|
+
th:last-child {
|
136
|
+
border-top-right-radius: 4px !important;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
// Also handle the case when there are multiple header rows
|
142
|
+
.pb_advanced_table_header {
|
143
|
+
> tr:first-child {
|
144
|
+
th:first-child,
|
145
|
+
.table-header-cells:first-child,
|
146
|
+
.table-header-cells-custom:first-child {
|
147
|
+
border-top-left-radius: 4px !important;
|
148
|
+
}
|
149
|
+
th:last-child,
|
150
|
+
.table-header-cells:last-child,
|
151
|
+
.table-header-cells-custom:last-child {
|
152
|
+
border-top-right-radius: 4px !important;
|
153
|
+
}
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
158
|
+
// When action bar is shown, remove border radius from header
|
159
|
+
.row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
|
160
|
+
.row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
|
161
|
+
> tr:first-child {
|
162
|
+
th:first-child,
|
163
|
+
th:last-child,
|
164
|
+
.table-header-cells:first-child,
|
165
|
+
.table-header-cells:last-child,
|
166
|
+
.table-header-cells-custom:first-child,
|
167
|
+
.table-header-cells-custom:last-child {
|
168
|
+
border-top-left-radius: 0 !important;
|
169
|
+
border-top-right-radius: 0 !important;
|
170
|
+
}
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
128
174
|
|
129
175
|
.row-selection-actions-card {
|
130
176
|
border-bottom-right-radius: 0px !important;
|
131
177
|
border-bottom-left-radius: 0px !important;
|
132
178
|
border-bottom-color: transparent;
|
133
179
|
transition: height 300ms ease;
|
180
|
+
|
181
|
+
&.is-visible,
|
182
|
+
&.show-action-card {
|
183
|
+
border-top-left-radius: 4px !important;
|
184
|
+
border-top-right-radius: 4px !important;
|
185
|
+
}
|
134
186
|
}
|
135
187
|
.table-header-cells:first-child {
|
136
188
|
min-width: 180px;
|
@@ -370,6 +422,15 @@
|
|
370
422
|
padding: 2px;
|
371
423
|
}
|
372
424
|
|
425
|
+
.header-sort-secondary-columns {
|
426
|
+
color: $primary !important;
|
427
|
+
|
428
|
+
&:hover {
|
429
|
+
background-color: rgba($primary, 0.03);
|
430
|
+
border-radius: $border_radius_md;
|
431
|
+
}
|
432
|
+
}
|
433
|
+
|
373
434
|
.toggle-all-icon {
|
374
435
|
@extend .button-icon;
|
375
436
|
@extend %primary-color-pseudo;
|
@@ -910,9 +971,58 @@
|
|
910
971
|
}
|
911
972
|
}
|
912
973
|
}
|
974
|
+
|
975
|
+
// Firefox-specific fix for last-header-cell and last-cell vertical borders
|
976
|
+
@-moz-document url-prefix() {
|
977
|
+
.pb_advanced_table_header {
|
978
|
+
.last-header-cell {
|
979
|
+
border-right: none !important;
|
980
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
981
|
+
}
|
982
|
+
}
|
983
|
+
|
984
|
+
.pb_advanced_table_body {
|
985
|
+
.last-cell {
|
986
|
+
border-right: none !important;
|
987
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
988
|
+
}
|
989
|
+
}
|
990
|
+
|
991
|
+
// Dark mode Firefox fixes
|
992
|
+
&.dark {
|
993
|
+
.pb_advanced_table_header {
|
994
|
+
.last-header-cell {
|
995
|
+
border-right: none !important;
|
996
|
+
box-shadow: 1px 0 0 0 $border_dark !important;
|
997
|
+
}
|
998
|
+
}
|
999
|
+
|
1000
|
+
.pb_advanced_table_body {
|
1001
|
+
.last-cell {
|
1002
|
+
border-right: none !important;
|
1003
|
+
box-shadow: 1px 0 0 0 $border_dark !important;
|
1004
|
+
}
|
1005
|
+
}
|
1006
|
+
}
|
1007
|
+
}
|
913
1008
|
}
|
914
1009
|
|
915
1010
|
// Outside of the pb_advanced_table class for popover
|
916
1011
|
.pb-advanced-table-popover-option:hover {
|
917
1012
|
background-color: $bg_light;
|
918
|
-
}
|
1013
|
+
}
|
1014
|
+
// Removes borders when Wrapped inside the Card Kit
|
1015
|
+
[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body .last-cell,
|
1016
|
+
[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
|
1017
|
+
[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
|
1018
|
+
[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
|
1019
|
+
border-right: none !important;
|
1020
|
+
}
|
1021
|
+
|
1022
|
+
// Removes borders when Wrapped inside the Card Kit
|
1023
|
+
[class^=pb_card_kit] > .pb_advanced_table tr:last-child,
|
1024
|
+
[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
|
1025
|
+
td {
|
1026
|
+
border-bottom: none !important;
|
1027
|
+
}
|
1028
|
+
}
|
@@ -40,6 +40,7 @@ type AdvancedTableProps = {
|
|
40
40
|
dark?: boolean
|
41
41
|
data?: { [key: string]: string }
|
42
42
|
enableToggleExpansion?: "all" | "header" | "none"
|
43
|
+
enableSortingRemoval?: boolean
|
43
44
|
expandedControl?: GenericObject
|
44
45
|
expandByDepth?: { [key: string]: string | number }
|
45
46
|
onExpandByDepthClick?: (arg: number, arg1: any) => void
|
@@ -87,6 +88,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
87
88
|
dark = false,
|
88
89
|
data = {},
|
89
90
|
enableToggleExpansion = "header",
|
91
|
+
enableSortingRemoval = false,
|
90
92
|
expandedControl,
|
91
93
|
expandByDepth,
|
92
94
|
onExpandByDepthClick,
|
@@ -122,7 +124,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
122
124
|
// Component refs
|
123
125
|
const tableWrapperRef = useRef<HTMLDivElement>(null);
|
124
126
|
|
125
|
-
// Initialize table state
|
126
127
|
const {
|
127
128
|
table,
|
128
129
|
expanded,
|
@@ -137,6 +138,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
137
138
|
} = useTableState({
|
138
139
|
tableData,
|
139
140
|
columnDefinitions,
|
141
|
+
enableSortingRemoval,
|
140
142
|
expandedControl,
|
141
143
|
sortControl,
|
142
144
|
onRowToggleClick,
|
@@ -218,10 +220,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
218
220
|
)
|
219
221
|
|
220
222
|
return (
|
221
|
-
<Card
|
223
|
+
<Card
|
222
224
|
borderNone
|
223
225
|
borderRadius="none"
|
224
|
-
className="advanced-table-fullscreen-header"
|
226
|
+
className="advanced-table-fullscreen-header"
|
225
227
|
{...props}
|
226
228
|
>
|
227
229
|
<Flex justify="end">
|
@@ -250,6 +252,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
250
252
|
const ariaProps = buildAriaProps(aria);
|
251
253
|
const dataProps = buildDataProps(data);
|
252
254
|
const htmlProps = buildHtmlProps(htmlOptions);
|
255
|
+
|
256
|
+
// Visibility flag for action bar
|
257
|
+
const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
|
258
|
+
|
253
259
|
const classes = classnames(
|
254
260
|
buildCss("pb_advanced_table"),
|
255
261
|
`advanced-table-responsive-${responsive}`,
|
@@ -257,6 +263,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
257
263
|
{
|
258
264
|
'advanced-table-fullscreen': isFullscreen,
|
259
265
|
'advanced-table-allow-fullscreen': allowFullScreen,
|
266
|
+
// Add the hidden-action-bar class when action bar functionality exists but is not visible
|
267
|
+
'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
|
260
268
|
},
|
261
269
|
{'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
|
262
270
|
columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
|
@@ -270,9 +278,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
270
278
|
? getVirtualizedContainerStyles(maxHeight)
|
271
279
|
: {};
|
272
280
|
|
273
|
-
// Visibility flag for action bar
|
274
|
-
const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
|
275
|
-
|
276
281
|
// The actual Main <Table /> element
|
277
282
|
const tableElement = (
|
278
283
|
<Table
|
@@ -288,7 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
288
293
|
) : (
|
289
294
|
<>
|
290
295
|
<TableHeader />
|
291
|
-
<TableBody
|
296
|
+
<TableBody
|
292
297
|
isFetching={isFetching}
|
293
298
|
/>
|
294
299
|
</>
|
@@ -330,6 +335,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
330
335
|
columnGroupBorderColor={columnGroupBorderColor}
|
331
336
|
columnVisibilityControl={columnVisibilityControl}
|
332
337
|
customSort={customSort}
|
338
|
+
enableSortingRemoval={enableSortingRemoval}
|
333
339
|
enableToggleExpansion={enableToggleExpansion}
|
334
340
|
enableVirtualization={virtualizedRows}
|
335
341
|
expandByDepth={expandByDepth}
|
@@ -11,8 +11,8 @@
|
|
11
11
|
<% if content.present? %>
|
12
12
|
<% content.presence %>
|
13
13
|
<% else %>
|
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 }) %>
|
14
|
+
<%= pb_rails("advanced_table/table_header", props: { id: object.id, 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, row_styling: object.row_styling }) %>
|
16
16
|
<% end %>
|
17
17
|
<% end %>
|
18
18
|
<% end %>
|
@@ -31,9 +31,16 @@ 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
|
-
additional_classes = [
|
38
|
+
additional_classes = [
|
39
|
+
responsive_classname,
|
40
|
+
max_height_classname,
|
41
|
+
hide_scroll_bar_class,
|
42
|
+
hidden_action_bar_class,
|
43
|
+
]
|
37
44
|
additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
|
38
45
|
generate_classname("pb_advanced_table", *additional_classes, separator: " ")
|
39
46
|
end
|
@@ -47,7 +54,12 @@ module Playbook
|
|
47
54
|
end
|
48
55
|
|
49
56
|
def hide_scroll_bar_class
|
50
|
-
scroll_bar_none ? "advanced-table-hide-scrollbar
|
57
|
+
scroll_bar_none ? "advanced-table-hide-scrollbar" : ""
|
58
|
+
end
|
59
|
+
|
60
|
+
def hidden_action_bar_class
|
61
|
+
# Add hidden-action-bar class when action bar functionality is enabled but not currently visible
|
62
|
+
selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
|
51
63
|
end
|
52
64
|
|
53
65
|
def selected_rows
|