playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854
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/RegularTableView.tsx +11 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +175 -16
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +56 -25
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +23 -13
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/VisibilityTree.ts +47 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -10
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +106 -0
- data/app/pb_kits/playbook/pb_advanced_table/index.js +228 -11
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -2
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +4 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +3 -0
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +3 -3
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +2 -0
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +18 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +17 -58
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
- data/app/pb_kits/playbook/pb_draggable/index.js +4 -2
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +6 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +82 -35
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +18 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +37 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +5 -1
- data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +0 -6
- data/app/pb_kits/playbook/pb_dropdown/index.js +380 -17
- data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +64 -11
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -4
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +16 -12
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +83 -17
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/MultiSelectTriggerDisplay.tsx +58 -0
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +8 -1
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +19 -0
- data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +123 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +13 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +11 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -0
- data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +7 -1
- data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +18 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +2 -2
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +19 -12
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +13 -7
- data/app/pb_kits/playbook/pb_message/_message.tsx +3 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
- data/app/pb_kits/playbook/pb_message/message.rb +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
- data/app/pb_kits/playbook/pb_person/_person.tsx +12 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +9 -9
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -2
- data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +4 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +73 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/_user.tsx +3 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
- data/app/pb_kits/playbook/pb_user/user.rb +1 -0
- data/dist/chunks/_typeahead-C-CI5Vgw.js +22 -0
- data/dist/chunks/_weekday_stacked-BCiM3zWM.js +45 -0
- data/dist/chunks/lib-D5R1BjUn.js +29 -0
- data/dist/chunks/{pb_form_validation-BWjy4bFn.js → pb_form_validation-BZ2AVAi_.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +6 -14
- 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/kit_base.rb +3 -3
- data/lib/playbook/version.rb +2 -2
- metadata +70 -22
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +0 -72
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +0 -19
- data/dist/chunks/_typeahead-D8CsVBZO.js +0 -22
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
- data/dist/chunks/lib-BmTAc7Nc.js +0 -29
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,62 @@
|
|
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 AdvancedTableColumnVisibilityCustom = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
id: "year"
|
12
|
+
},
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
label: "New Enrollments",
|
16
|
+
id: "newEnrollments"
|
17
|
+
},
|
18
|
+
{
|
19
|
+
accessor: "scheduledMeetings",
|
20
|
+
label: "Scheduled Meetings",
|
21
|
+
id: "scheduledMeetings"
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "attendanceRate",
|
25
|
+
label: "Attendance Rate",
|
26
|
+
id: "attendanceRate"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "completedClasses",
|
30
|
+
label: "Completed Classes",
|
31
|
+
id: "completedClasses"
|
32
|
+
},
|
33
|
+
{
|
34
|
+
accessor: "classCompletionRate",
|
35
|
+
label: "Class Completion Rate",
|
36
|
+
id: "classCompletionRate"
|
37
|
+
},
|
38
|
+
{
|
39
|
+
accessor: "graduatedStudents",
|
40
|
+
label: "Graduated Students",
|
41
|
+
id: "graduatedStudents"
|
42
|
+
},
|
43
|
+
]
|
44
|
+
|
45
|
+
const columnVisibilityControl = {
|
46
|
+
// This is the list of column ids that will be included in the column visibility control
|
47
|
+
includeIds:["newEnrollments", "scheduledMeetings", "attendanceRate", "completedClasses"],
|
48
|
+
}
|
49
|
+
|
50
|
+
return (
|
51
|
+
<div>
|
52
|
+
<AdvancedTable
|
53
|
+
columnDefinitions={columnDefinitions}
|
54
|
+
columnVisibilityControl={columnVisibilityControl}
|
55
|
+
tableData={MOCK_DATA}
|
56
|
+
{...props}
|
57
|
+
/>
|
58
|
+
</div>
|
59
|
+
)
|
60
|
+
}
|
61
|
+
|
62
|
+
export default AdvancedTableColumnVisibilityCustom
|
@@ -0,0 +1 @@
|
|
1
|
+
By using the `includeIds` key/value pair as shown within the `columnVisibilityControl` prop, you can control which columns show up as options in the columnVisibility dropdown.
|
@@ -0,0 +1,82 @@
|
|
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 AdvancedTableColumnVisibilityMulti = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
id: "year",
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
12
|
+
},
|
13
|
+
{
|
14
|
+
label: "Enrollment Data",
|
15
|
+
id: "enrollmentData",
|
16
|
+
columns: [
|
17
|
+
{
|
18
|
+
label: "Enrollment Stats",
|
19
|
+
id: "enrollmentStats",
|
20
|
+
columns: [
|
21
|
+
{
|
22
|
+
accessor: "newEnrollments",
|
23
|
+
label: "New Enrollments",
|
24
|
+
id: "newEnrollments",
|
25
|
+
},
|
26
|
+
{
|
27
|
+
accessor: "scheduledMeetings",
|
28
|
+
label: "Scheduled Meetings",
|
29
|
+
id: "scheduledMeetings",
|
30
|
+
},
|
31
|
+
],
|
32
|
+
},
|
33
|
+
],
|
34
|
+
},
|
35
|
+
{
|
36
|
+
label: "Performance Data",
|
37
|
+
id: "performanceData",
|
38
|
+
columns: [
|
39
|
+
{
|
40
|
+
label: "Completion Metrics",
|
41
|
+
id: "completionMetrics",
|
42
|
+
columns: [
|
43
|
+
{
|
44
|
+
accessor: "completedClasses",
|
45
|
+
label: "Completed Classes",
|
46
|
+
id: "completedClasses",
|
47
|
+
},
|
48
|
+
{
|
49
|
+
accessor: "classCompletionRate",
|
50
|
+
label: "Class Completion Rate",
|
51
|
+
id: "classCompletionRate",
|
52
|
+
},
|
53
|
+
],
|
54
|
+
},
|
55
|
+
{
|
56
|
+
label: "Attendance",
|
57
|
+
id: "attendance",
|
58
|
+
columns: [
|
59
|
+
{
|
60
|
+
accessor: "attendanceRate",
|
61
|
+
label: "Attendance Rate",
|
62
|
+
id: "attendanceRate",
|
63
|
+
},
|
64
|
+
],
|
65
|
+
},
|
66
|
+
],
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
return (
|
71
|
+
<div>
|
72
|
+
<AdvancedTable
|
73
|
+
columnDefinitions={columnDefinitions}
|
74
|
+
columnVisibilityControl={{default: true}}
|
75
|
+
tableData={MOCK_DATA}
|
76
|
+
{...props}
|
77
|
+
/>
|
78
|
+
</div>
|
79
|
+
)
|
80
|
+
}
|
81
|
+
|
82
|
+
export default AdvancedTableColumnVisibilityMulti
|
@@ -0,0 +1 @@
|
|
1
|
+
The `columnVisibilityControl` prop can also be used with multi-header columns as shown.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx
ADDED
@@ -0,0 +1,66 @@
|
|
1
|
+
import React, { useState } from "react"
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
+
|
5
|
+
const AdvancedTableColumnVisibilityWithState = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
id: "year"
|
12
|
+
},
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
label: "New Enrollments",
|
16
|
+
id: "newEnrollments"
|
17
|
+
},
|
18
|
+
{
|
19
|
+
accessor: "scheduledMeetings",
|
20
|
+
label: "Scheduled Meetings",
|
21
|
+
id: "scheduledMeetings"
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "attendanceRate",
|
25
|
+
label: "Attendance Rate",
|
26
|
+
id: "attendanceRate"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "completedClasses",
|
30
|
+
label: "Completed Classes",
|
31
|
+
id: "completedClasses"
|
32
|
+
},
|
33
|
+
{
|
34
|
+
accessor: "classCompletionRate",
|
35
|
+
label: "Class Completion Rate",
|
36
|
+
id: "classCompletionRate"
|
37
|
+
},
|
38
|
+
{
|
39
|
+
accessor: "graduatedStudents",
|
40
|
+
label: "Graduated Students",
|
41
|
+
id: "graduatedStudents"
|
42
|
+
},
|
43
|
+
]
|
44
|
+
|
45
|
+
const [columnVisibility, setColumnVisibility] = useState({
|
46
|
+
newEnrollments: false
|
47
|
+
})
|
48
|
+
|
49
|
+
const columnVisibilityControl = {
|
50
|
+
value: columnVisibility,
|
51
|
+
onChange: setColumnVisibility,
|
52
|
+
onColumnVisibilityChange: (currentState) => console.log(currentState),
|
53
|
+
}
|
54
|
+
return (
|
55
|
+
<div>
|
56
|
+
<AdvancedTable
|
57
|
+
columnDefinitions={columnDefinitions}
|
58
|
+
columnVisibilityControl={columnVisibilityControl}
|
59
|
+
tableData={MOCK_DATA}
|
60
|
+
{...props}
|
61
|
+
/>
|
62
|
+
</div>
|
63
|
+
)
|
64
|
+
}
|
65
|
+
|
66
|
+
export default AdvancedTableColumnVisibilityWithState
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md
ADDED
@@ -0,0 +1,3 @@
|
|
1
|
+
The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
|
2
|
+
|
3
|
+
The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
CHANGED
@@ -1 +1,5 @@
|
|
1
|
-
`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
|
1
|
+
`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
|
2
|
+
|
3
|
+
The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
|
4
|
+
|
5
|
+
__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.
|
@@ -2,7 +2,7 @@ import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
3
|
import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
|
4
4
|
|
5
|
-
const
|
5
|
+
const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
|
6
6
|
const columnDefinitions = [
|
7
7
|
{
|
8
8
|
accessor: "year",
|
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
|
|
49
49
|
)
|
50
50
|
}
|
51
51
|
|
52
|
-
export default
|
52
|
+
export default AdvancedTableSelectableRowsNoSubrowsReact
|
@@ -2,5 +2,6 @@
|
|
2
2
|
|
3
3
|
When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well.
|
4
4
|
|
5
|
-
|
6
|
-
|
5
|
+
The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
|
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.
|
@@ -13,8 +13,8 @@ examples:
|
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
15
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
|
-
|
17
|
-
|
16
|
+
- advanced_table_selectable_rows_rails: Selectable Rows
|
17
|
+
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
18
18
|
|
19
19
|
react:
|
20
20
|
- advanced_table_default: Default (Required Props)
|
@@ -42,8 +42,12 @@ examples:
|
|
42
42
|
- advanced_table_column_border_color: Column Group Border Color
|
43
43
|
# - advanced_table_no_subrows: Table with No Subrows
|
44
44
|
- advanced_table_selectable_rows: Selectable Rows
|
45
|
-
-
|
45
|
+
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
46
46
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
47
47
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
48
48
|
- advanced_table_inline_editing: Inline Cell Editing
|
49
49
|
- advanced_table_fullscreen: Fullscreen
|
50
|
+
- advanced_table_column_visibility: Column Visibility Control
|
51
|
+
- advanced_table_column_visibility_with_state: Column Visibility Control With State
|
52
|
+
- advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
|
53
|
+
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
|
|
15
15
|
export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
|
16
16
|
export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
|
17
17
|
export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
|
18
|
-
export { default as
|
18
|
+
export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
|
19
19
|
export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
|
20
20
|
export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
|
21
21
|
export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
|
@@ -27,4 +27,8 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
|
|
27
27
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
28
28
|
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
29
29
|
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
30
|
-
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
30
|
+
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
31
|
+
export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
|
32
|
+
export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
|
33
|
+
export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
|
34
|
+
export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element";
|
2
|
+
|
3
|
+
const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
|
4
|
+
|
5
|
+
export default class PbFlatAdvancedTable extends PbEnhancedElement {
|
6
|
+
static get selector() {
|
7
|
+
return FLAT_ADVANCED_TABLE_SELECTOR;
|
8
|
+
}
|
9
|
+
|
10
|
+
get target() {
|
11
|
+
const table = this.element.closest("table");
|
12
|
+
return table.querySelectorAll(
|
13
|
+
`"label[data-flat-advanced-table-select='true']"`
|
14
|
+
);
|
15
|
+
}
|
16
|
+
|
17
|
+
static selectedRows = new Set();
|
18
|
+
|
19
|
+
connect() {
|
20
|
+
const table = this.element.closest("table");
|
21
|
+
if (!table) return;
|
22
|
+
const mainTable = this.element.closest(".pb_advanced_table");
|
23
|
+
// Prevent double-init
|
24
|
+
if (table.dataset.flatAdvancedTableInitialized) return;
|
25
|
+
table.dataset.flatAdvancedTableInitialized = "true";
|
26
|
+
|
27
|
+
const checkboxLabels = table.querySelectorAll(
|
28
|
+
"label[data-flat-advanced-table-select='true']"
|
29
|
+
);
|
30
|
+
checkboxLabels.forEach((label) => {
|
31
|
+
const checkbox = label.querySelector("input[type='checkbox']");
|
32
|
+
if (!checkbox) return;
|
33
|
+
checkbox.addEventListener("change", () => {
|
34
|
+
const rowId = checkbox.id;
|
35
|
+
const isChecked = checkbox.checked;
|
36
|
+
|
37
|
+
if (isChecked) {
|
38
|
+
PbFlatAdvancedTable.selectedRows.add(rowId);
|
39
|
+
} else {
|
40
|
+
PbFlatAdvancedTable.selectedRows.delete(rowId);
|
41
|
+
}
|
42
|
+
|
43
|
+
// Update row background color based on checkbox state
|
44
|
+
const rowEl = checkbox.closest("tr");
|
45
|
+
if (rowEl) {
|
46
|
+
if (isChecked) {
|
47
|
+
rowEl.classList.add("bg-row-selection");
|
48
|
+
rowEl.classList.remove("bg-white");
|
49
|
+
} else {
|
50
|
+
rowEl.classList.remove("bg-row-selection");
|
51
|
+
rowEl.classList.add("bg-white");
|
52
|
+
}
|
53
|
+
}
|
54
|
+
const allCheckboxes = table.querySelectorAll(
|
55
|
+
"label[data-flat-advanced-table-select='true'] input[type='checkbox']"
|
56
|
+
);
|
57
|
+
|
58
|
+
const selectAllInput = table.querySelector(
|
59
|
+
"#select-all-rows input[type='checkbox']"
|
60
|
+
);
|
61
|
+
|
62
|
+
if (selectAllInput) {
|
63
|
+
const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
|
64
|
+
selectAllInput.checked = allChecked;
|
65
|
+
}
|
66
|
+
|
67
|
+
mainTable.dataset.selectedRows = JSON.stringify(
|
68
|
+
Array.from(PbFlatAdvancedTable.selectedRows)
|
69
|
+
);
|
70
|
+
});
|
71
|
+
|
72
|
+
});
|
73
|
+
|
74
|
+
// Handle select-all checkbox
|
75
|
+
const selectAllWrapper = table.querySelector("#select-all-rows");
|
76
|
+
if (selectAllWrapper) {
|
77
|
+
const selectAllInput = selectAllWrapper.querySelector(
|
78
|
+
'input[type="checkbox"]'
|
79
|
+
);
|
80
|
+
selectAllInput.addEventListener("change", () => {
|
81
|
+
const checkAll = selectAllInput.checked;
|
82
|
+
|
83
|
+
checkboxLabels.forEach((label) => {
|
84
|
+
const cb = label.querySelector("input[type='checkbox']");
|
85
|
+
cb.checked = checkAll;
|
86
|
+
const rowId = cb.id;
|
87
|
+
const rowEl = cb.closest("tr");
|
88
|
+
|
89
|
+
if (checkAll) {
|
90
|
+
PbFlatAdvancedTable.selectedRows.add(rowId);
|
91
|
+
rowEl?.classList.add("bg-row-selection");
|
92
|
+
rowEl?.classList.remove("bg-white");
|
93
|
+
} else {
|
94
|
+
PbFlatAdvancedTable.selectedRows.delete(rowId);
|
95
|
+
rowEl?.classList.remove("bg-row-selection");
|
96
|
+
rowEl?.classList.add("bg-white");
|
97
|
+
}
|
98
|
+
});
|
99
|
+
|
100
|
+
mainTable.dataset.selectedRows = JSON.stringify(
|
101
|
+
Array.from(PbFlatAdvancedTable.selectedRows)
|
102
|
+
);
|
103
|
+
});
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|