playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_group_separators.json

@@ -0,0 +1,328 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": [
+      {
+        "year": "2021",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "8",
+        "scheduledMeetings": "12",
+        "attendanceRate": "40%",
+        "completedClasses": "2",
+        "classCompletionRate": "40%",
+        "graduatedStudents": "10",
+        "children": [
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "4",
+            "scheduledMeetings": "6",
+            "attendanceRate": "38%",
+            "completedClasses": "1",
+            "classCompletionRate": "35%",
+            "graduatedStudents": "5"
+          },
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "February",
+            "day": null,
+            "newEnrollments": "4",
+            "scheduledMeetings": "6",
+            "attendanceRate": "42%",
+            "completedClasses": "1",
+            "classCompletionRate": "45%",
+            "graduatedStudents": "5"
+          }
+        ]
+      },
+      {
+        "year": "2021",
+        "quarter": "Q2",
+        "month": null,
+        "day": null,
+        "newEnrollments": "12",
+        "scheduledMeetings": "14",
+        "attendanceRate": "55%",
+        "completedClasses": "3",
+        "classCompletionRate": "50%",
+        "graduatedStudents": "12",
+        "children": [
+          {
+            "year": "2021",
+            "quarter": "Q2",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "6",
+            "scheduledMeetings": "7",
+            "attendanceRate": "52%",
+            "completedClasses": "1",
+            "classCompletionRate": "48%",
+            "graduatedStudents": "6"
+          },
+          {
+            "year": "2021",
+            "quarter": "Q2",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "6",
+            "scheduledMeetings": "7",
+            "attendanceRate": "58%",
+            "completedClasses": "2",
+            "classCompletionRate": "52%",
+            "graduatedStudents": "6"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": [
+      {
+        "year": "2022",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "12",
+        "scheduledMeetings": "20",
+        "attendanceRate": "70%",
+        "completedClasses": "3",
+        "classCompletionRate": "48%",
+        "graduatedStudents": "18",
+        "children": [
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "7",
+            "scheduledMeetings": "12",
+            "attendanceRate": "68%",
+            "completedClasses": "2",
+            "classCompletionRate": "46%",
+            "graduatedStudents": "10",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "15",
+                "newEnrollments": "3",
+                "scheduledMeetings": "5",
+                "attendanceRate": "72%",
+                "completedClasses": "1",
+                "classCompletionRate": "50%",
+                "graduatedStudents": "4"
+              },
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "25",
+                "newEnrollments": "4",
+                "scheduledMeetings": "7",
+                "attendanceRate": "64%",
+                "completedClasses": "1",
+                "classCompletionRate": "42%",
+                "graduatedStudents": "6"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "5",
+            "scheduledMeetings": "8",
+            "attendanceRate": "74%",
+            "completedClasses": "1",
+            "classCompletionRate": "55%",
+            "graduatedStudents": "8",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "May",
+                "day": "2",
+                "newEnrollments": "5",
+                "scheduledMeetings": "8",
+                "attendanceRate": "74%",
+                "completedClasses": "1",
+                "classCompletionRate": "55%",
+                "graduatedStudents": "8"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "year": "2022",
+        "quarter": "Q2",
+        "month": null,
+        "day": null,
+        "newEnrollments": "13",
+        "scheduledMeetings": "18",
+        "attendanceRate": "78%",
+        "completedClasses": "4",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "20",
+        "children": [
+          {
+            "year": "2022",
+            "quarter": "Q2",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "6",
+            "scheduledMeetings": "9",
+            "attendanceRate": "76%",
+            "completedClasses": "2",
+            "classCompletionRate": "50%",
+            "graduatedStudents": "9",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q2",
+                "month": "April",
+                "day": "10",
+                "newEnrollments": "3",
+                "scheduledMeetings": "4",
+                "attendanceRate": "80%",
+                "completedClasses": "1",
+                "classCompletionRate": "60%",
+                "graduatedStudents": "4"
+              },
+              {
+                "year": "2022",
+                "quarter": "Q2",
+                "month": "April",
+                "day": "22",
+                "newEnrollments": "3",
+                "scheduledMeetings": "5",
+                "attendanceRate": "72%",
+                "completedClasses": "1",
+                "classCompletionRate": "40%",
+                "graduatedStudents": "5"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "quarter": "Q2",
+            "month": "June",
+            "day": null,
+            "newEnrollments": "7",
+            "scheduledMeetings": "9",
+            "attendanceRate": "80%",
+            "completedClasses": "2",
+            "classCompletionRate": "54%",
+            "graduatedStudents": "11",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q2",
+                "month": "June",
+                "day": "5",
+                "newEnrollments": "7",
+                "scheduledMeetings": "9",
+                "attendanceRate": "80%",
+                "completedClasses": "2",
+                "classCompletionRate": "54%",
+                "graduatedStudents": "11"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": [
+      {
+        "year": "2023",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "5",
+        "scheduledMeetings": "8",
+        "attendanceRate": "60%",
+        "completedClasses": "2",
+        "classCompletionRate": "45%",
+        "graduatedStudents": "14",
+        "children": [
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "March",
+            "day": null,
+            "newEnrollments": "5",
+            "scheduledMeetings": "8",
+            "attendanceRate": "60%",
+            "completedClasses": "2",
+            "classCompletionRate": "45%",
+            "graduatedStudents": "14"
+          }
+        ]
+      },
+      {
+        "year": "2023",
+        "quarter": "Q2",
+        "month": null,
+        "day": null,
+        "newEnrollments": "5",
+        "scheduledMeetings": "7",
+        "attendanceRate": "70%",
+        "completedClasses": "2",
+        "classCompletionRate": "53%",
+        "graduatedStudents": "15",
+        "children": [
+          {
+            "year": "2023",
+            "quarter": "Q2",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "5",
+            "scheduledMeetings": "7",
+            "attendanceRate": "70%",
+            "completedClasses": "2",
+            "classCompletionRate": "53%",
+            "graduatedStudents": "15"
+          }
+        ]
+      }
+    ]
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -37,6 +37,7 @@ examples:
   - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_inline_row_loading_rails: Inline Row Loading
+  - advanced_table_group_separators_rails: Group Separators
 
 
   react:
@@ -87,6 +88,7 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_column_visibility_multi_select_all: Column Visibility Control with Select All and Multi-Header Columns
   - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
@@ -99,4 +101,5 @@ examples:
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
+  - advanced_table_group_separators: Group Separators
   - advanced_table_infinite_scroll: Infinite Scroll

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -34,6 +34,7 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
+export { default as AdvancedTableColumnVisibilityMultiSelectAll } from './_advanced_table_column_visibility_multi_select_all.jsx'
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
@@ -54,6 +55,7 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
 export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableGroupSeparators } from './_advanced_table_group_separators.jsx'
 export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
 export { default as AdvancedTableSkippingSubrowHeaders } from './_advanced_table_skipping_subrow_headers.jsx'
 export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -46,6 +46,28 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return this.childRowsMap.get(parentId);
   }
 
+  // True when expand shows real data rows (not only the inline_row_loading placeholder).
+  // Match React: keep the group separator while subRows.length === 0.
+  static hasRealChildRows(childRows) {
+    return childRows.some(
+      (row) => !row.classList.contains("inline-loading-row")
+    );
+  }
+
+  get groupSeparatorsEnabled() {
+    return Boolean(this.mainTable?.dataset.groupSeparators);
+  }
+
+  // Restore deferred separator hiding only when nested data rows exist.
+  restoreExpandedClass(elem) {
+    if (!this.groupSeparatorsEnabled) return;
+    const toggleId = elem.querySelector("[data-advanced-table]")?.id;
+    if (!toggleId || !PbAdvancedTable.expandedRows.has(toggleId)) return;
+    if (PbAdvancedTable.hasRealChildRows(this.childRowsFor(toggleId))) {
+      elem.classList.add("group-separator-expanded");
+    }
+  }
+
   updateTableSelectedRowsAttribute() {
     const mainTable = this.mainTable;
     if (!mainTable) return;
@@ -298,14 +320,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const isExpanded =
         toggleBtn.querySelector(UP_ARROW_SELECTOR).style.display ===
         "inline-block";
+      const parentRow = toggleBtn.closest("tr");
+      const childRows = this.childRowsFor(toggleBtn.id);
       if (!isExpanded) {
         PbAdvancedTable.expandedRows.add(toggleBtn.id);
+        // Only defer the separator when real children exist — a lone loading
+        // row must not clear group-separator-row via :not(.group-separator-expanded).
+        if (
+          this.groupSeparatorsEnabled &&
+          PbAdvancedTable.hasRealChildRows(childRows)
+        ) {
+          parentRow?.classList.add("group-separator-expanded");
+        }
       } else {
         PbAdvancedTable.expandedRows.delete(toggleBtn.id);
+        if (this.groupSeparatorsEnabled) {
+          parentRow?.classList.remove("group-separator-expanded");
+        }
       }
 
-      // Find direct child rows
-      const childRows = this.childRowsFor(toggleBtn.id);
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -401,6 +434,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
+      this.restoreExpandedClass(elem);
       const childRowsAll = this.table.querySelectorAll(
         `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
       );
@@ -443,6 +477,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         if (allAncestorsExpanded || checkIfParentIsExpanded()) {
           childRow.style.display = "table-row";
           childRow.classList.add("is-visible");
+          this.restoreExpandedClass(childRow);
         } else {
           childRow.style.display = "none";
           childRow.classList.remove("is-visible");
@@ -455,6 +490,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "none";
       elem.classList.remove("is-visible");
+      // Keep `group-separator-expanded` while hidden so re-expanding an ancestor
+      // still defers the separator to descendants (toggle click clears it when collapsing).
 
       // Remove the row ID from expandedRows when this row is hidden
       if (PbAdvancedTable.expandedRows.has(elem.id)) {

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -21,7 +21,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "columnDefinitions": {
       "type": "array",
@@ -36,15 +37,28 @@
         "react",
         "rails"
       ],
-      "values": [
-        "text_lt_default",
-        "text_lt_light",
-        "text_lt_lighter",
-        "text_dk_default",
-        "text_dk_light",
-        "text_dk_lighter"
-      ],
-      "default": "none"
+      "values": {
+        "react": [
+          "text_lt_default",
+          "text_lt_light",
+          "text_lt_lighter",
+          "text_dk_default",
+          "text_dk_light",
+          "text_dk_lighter"
+        ],
+        "rails": [
+          "text_lt_default",
+          "text_lt_light",
+          "text_lt_lighter",
+          "text_dk_default",
+          "text_dk_light",
+          "text_dk_lighter",
+          "none"
+        ]
+      },
+      "default": {
+        "rails": "none"
+      }
     },
     "columnVisibilityControl": {
       "type": "GenericObject",
@@ -75,7 +89,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "expandedControl": {
       "type": "GenericObject",
@@ -103,11 +118,20 @@
       ],
       "default": false
     },
+    "groupSeparators": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "initialLoadingRowsCount": {
       "type": "number",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": 10
     },
     "inlineRowLoading": {
       "type": "boolean",
@@ -162,7 +186,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "paginationProps": {
       "type": "GenericObject",
@@ -238,7 +263,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "stickyLeftColumn": {
       "type": "array",
@@ -270,7 +296,8 @@
       "type": "string | string[]",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "arrows-from-line"
     },
     "onRowSelectionChange": {
       "type": "function",
@@ -288,7 +315,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "enableSorting": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb

@@ -4,7 +4,7 @@
     <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
       <% next_index = 0 %>
       <% object.pinned_top_root_rows.each do |root_info| %>
-        <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "top", initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
+        <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "top", group_closes_from_depth: root_info[:group_closes_from_depth], initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
         <%= row_output %>
       <% end %>
     <% end %>
@@ -20,7 +20,7 @@
       <% next_index = 0 %>
       <% bottom_total = object.pinned_bottom_row_count %>
       <% object.pinned_bottom_root_rows.each do |root_info| %>
-        <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "bottom", pinned_bottom_total: bottom_total, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
+        <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "bottom", pinned_bottom_total: bottom_total, group_closes_from_depth: root_info[:group_closes_from_depth], initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
         <%= row_output %>
       <% end %>
     <% end %>