playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3353ATselectall20974

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5ac75f8f899c8e692ebc15d9e4c233540f1b055707c362099ca5f6bd23da085
-  data.tar.gz: 96f74ff346de6735599cbd46bf9d8b81e541b7ad7b258275e4174a922fe637ac
+  metadata.gz: f9b4809fd0eaae6c78ca3e4974fcabf0c17d94bab7faa4135164e4361aa4ea62
+  data.tar.gz: f5bd947efc3cb866c9482b95335493a56ab2b18c029cc90cd9b8329b661d1314
 SHA512:
-  metadata.gz: c8dc8cf0775094f3d738ff9fdb1bc5a7101d9f950c6503dd75c598da03e0a4353d9466a864947fbc905a42997a60f3e8ee29569179106b9c8fc796feb2fe6819
-  data.tar.gz: 119a30f2687af34eb8bfbc1c942182d128838437cb8c15f71a061600892d9fe5498fe400db526ee306120e4b90f220d0f97bb1467e829191e6b5fe9c35a09eaf
+  metadata.gz: ba18f2d83a5827bdb20795ad4e9212b1d1c4c17c0dcf5acf5f0962454d1541e93f84eaa05ddac530b755afaed46fefed09c06b1d1f81b6fb4b62e5520de036ba
+  data.tar.gz: a40e05d0bf5d74b2e58932249fca3b9087a8bf18360ce3fda60e63afaa05af9c31dd0124671ac04707ef00b0e631d4151fa1d227b9aa19b32917fd6ccaa235e1

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -1,10 +1,17 @@
-import React from "react"
+import React, { useContext } from "react"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
+  const { groupSeparators } = useContext(AdvancedTableContext)
   const style: { [key: string]: string | number } = {
     left: `${leftOffset}em`,
   }
+  // Read by groupSeparators CSS to decide which trails stop at the stroke
+  if (groupSeparators) {
+    style["--collapsible-trail-left"] = `${leftOffset}em`
+  }
 
   return (
     <div 

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext, useEffect, useMemo } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -125,6 +125,7 @@ export const RegularTableView = ({
 }: RegularTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -158,14 +159,30 @@ export const RegularTableView = ({
     (obj: Record<string, unknown>) => "columns" in obj
   );
 
-  // Row pinning
-  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
+  // One map from the full row model so pinning a non-last sibling cannot
+  // invent a second separator just because that section only sees that row.
+  const rowModelRows = table.getRowModel().rows
+  const groupSeparatorInsets = useMemo(
+    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
+    [groupSeparators, rowModelRows]
+  )
+
+  function PinnedRow({
+    position,
+    row,
+  }: {
+    position: 'top' | 'bottom'
+    row: Row<any>
+  }) {
     const customRowStyle = getRowStyle(rowStyling, row);
     const bottomRowsCount = table.getBottomRows().length;
+    const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+    const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
     return (
       <tr
           className={classnames('pinned-row', {
+            'group-separator-row': showGroupSeparator,
             'pinned-row-bottom': position === 'bottom',
           })}
           style={{
@@ -182,6 +199,9 @@ export const RegularTableView = ({
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
+            ...(showGroupSeparator && {
+              ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+            }),
           }}
       >
         <TableCellRenderer
@@ -198,11 +218,13 @@ export const RegularTableView = ({
     )
   }
 
-  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
+  const totalRows = pinnedRows ? table.getCenterRows() : rowModelRows
+  const topRows = pinnedRows ? table.getTopRows() : []
+  const bottomRows = pinnedRows ? table.getBottomRows() : []
 
   return (
     <>
-      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
+      {topRows.map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="top"
             row={row}
@@ -219,6 +241,8 @@ export const RegularTableView = ({
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
         const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
+        const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+        const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -234,13 +258,20 @@ export const RegularTableView = ({
             )}
 
             <tr
-                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
                 style={{
                   backgroundColor: customRowStyle?.backgroundColor,
                   color: customRowStyle?.fontColor,
                   fontWeight: getFontWeight(customRowStyle),
+                  ...(showGroupSeparator && {
+                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+                  }),
                 }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
@@ -280,7 +311,7 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
-      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
+      {bottomRows.map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="bottom"
             row={row}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -105,7 +105,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       }
     };
     return (
-      <>
+      <React.Fragment key={node.id}>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
@@ -120,7 +120,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
           )}
         </Flex>
-      </>
+      </React.Fragment>
     );
   };
 // ------------ End of column visibility logic --------
@@ -143,6 +143,47 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   const handleShouldClose = (shouldClose: boolean) =>
     setShowPopover(!shouldClose)
 
+  // Select All only changes columns listed in the popover that can be hidden.
+  // The first column and ids omitted by includeIds stay as they are.
+  // Skip the leaf walk unless the checkbox is enabled.
+  const selectAllRequested = columnVisibilityControl?.showSelectAll === true
+  const availableColumns = selectAllRequested
+    ? tree.flatMap(gatherLeafIds).flatMap((id) => {
+        const column = table.getColumn(id)
+        return column?.getCanHide() ? [column] : []
+      })
+    : []
+  const allAvailableVisible =
+    availableColumns.length > 0 &&
+    availableColumns.every((column) => column.getIsVisible())
+  const someAvailableVisible = availableColumns.some((column) => column.getIsVisible())
+  const showSelectAll = availableColumns.length > 0
+  const selectAllLabel = allAvailableVisible ? "Deselect All" : "Select All"
+
+  // Uses the same updater form as toggleVisibility, so onChange gets the same kind of value.
+  const handleSelectAllChange = () => {
+    const selectAllVisibility = Object.fromEntries(
+      availableColumns.map((column) => [column.id, !allAvailableVisible])
+    )
+    table.setColumnVisibility((previousVisibility: { [id: string]: boolean }) => ({
+      ...previousVisibility,
+      ...selectAllVisibility,
+    }))
+
+    if (columnVisibilityControl?.onColumnVisibilityChange) {
+      const nextVisibility = { ...table.getState().columnVisibility, ...selectAllVisibility }
+      // Same shape as the single toggles: root column ids, groups visible if any leaf is visible
+      const updatedVisibilityState = table.getAllColumns().reduce((
+        acc: { [id: string]: boolean },
+        column: { getLeafColumns: () => { id: string }[]; id: string }
+      ) => {
+        acc[column.id] = column.getLeafColumns().some((leaf) => nextVisibility[leaf.id] ?? true)
+        return acc
+      }, {})
+      columnVisibilityControl.onColumnVisibilityChange(updatedVisibilityState)
+    }
+  }
+
   const popoverReference = (
     <Tooltip
         placement="top"
@@ -197,6 +238,25 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                   textAlign="center"
               />
               <SectionSeparator paddingBottom="xs" />
+              {showSelectAll && (
+                <>
+                  <Flex
+                      cursor="pointer"
+                      flexDirection="column"
+                      paddingX="xs"
+                  >
+                    <Checkbox
+                        aria={{ label: selectAllLabel }}
+                        checked={allAvailableVisible}
+                        indeterminate={!allAvailableVisible && someAvailableVisible}
+                        onChange={handleSelectAllChange}
+                        paddingBottom="xs"
+                        text={selectAllLabel}
+                    />
+                  </Flex>
+                  <SectionSeparator paddingBottom="xs" />
+                </>
+              )}
               {tree.map((node: VisibilityNode) => (
                 <Flex cursor="pointer"
                     flexDirection="column"

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from "react"
 import classnames from "classnames"
 import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
@@ -7,7 +7,7 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-import { getRowColorClass } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -34,6 +34,7 @@ export const VirtualizedTableView = ({
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -119,6 +120,13 @@ export const VirtualizedTableView = ({
     };
   }, [table, selectableRows, hasAnySubRows]);
 
+  // Memoize against scroll-driven re-renders; only rebuild when the row model changes.
+  const rowModelRows = table.getRowModel().rows
+  const groupSeparatorInsets = useMemo(
+    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
+    [groupSeparators, rowModelRows]
+  )
+
   // Safety check
   if (!virtualizer || !flattenedItems) {
     return (
@@ -180,10 +188,17 @@ export const VirtualizedTableView = ({
 
           // Use the utility function to get consistent row color
           const rowColor = getRowColorClass(row, inlineRowLoading || false);
+          const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+          const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
           return (
             <tr
-                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  "virtualized-table-row",
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 data-index={virtualRow.index}
                 key={`row-${item.id}-sort-${sortingState}`}
                 ref={(node) => {
@@ -195,7 +210,12 @@ export const VirtualizedTableView = ({
                     }
                   }
                 }}
-                style={virtualItemStyle}
+                style={{
+                  ...virtualItemStyle,
+                  ...(showGroupSeparator && {
+                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+                  }),
+                }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -32,6 +32,7 @@ export const TableHeader = ({
   ...props
 }: TableHeaderProps) => {
   const {
+    columnVisibilityControl,
     enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
@@ -63,11 +64,40 @@ export const TableHeader = ({
     `${responsive === "scroll" && "pinned-left"}`,
   );
 
+  // TanStack drops header rows when every leaf in a group is hidden.
+  // Spacer rows keep that height only when Select All can hide a whole group.
+  const showSelectAll = columnVisibilityControl?.showSelectAll === true
+  let hiddenHeaderRowCount = 0
+  let spacerColSpan = 0
+  if (showSelectAll) {
+    const columnHeaderDepth = Math.max(
+      ...table.getAllFlatColumns().map((column: GenericObject) => column.depth + 1)
+    )
+    hiddenHeaderRowCount = columnHeaderDepth - table.getHeaderGroups().length
+    spacerColSpan = table.getVisibleLeafColumns().length + (!hasAnySubRows && selectableRows ? 1 : 0)
+  }
+
+  const renderSpacerRows = (rowClassName?: string) =>
+    Array.from({ length: Math.max(0, hiddenHeaderRowCount) }, (_, index) => (
+      <tr
+          aria-hidden="true"
+          className={classnames("header-spacer-row", rowClassName)}
+          key={`header-spacer-${index}`}
+      >
+        {/* header-spacer-cell stays off .table-header-cells so width measurement and sticky-left styles skip it. */}
+        <th
+            className="header-spacer-cell"
+            colSpan={spacerColSpan}
+        />
+      </tr>
+    ))
+
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
+      {renderSpacerRows()}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
@@ -109,6 +139,7 @@ export const TableHeader = ({
         id={id}
         ref={headerRef}
     >
+      {renderSpacerRows("virtualized-header-row-header")}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr
             className="virtualized-header-row-header"

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -53,6 +53,35 @@ export const getFontWeight = (rowStyle?: GenericObject) => {
   if (rowStyle?.fontWeight === "regular") return 400
 }
 
+// Matches the `left` of the nth collapsible-trail (see CollapsibleTrail.tsx).
+const getCollapsibleTrailLeftEm = (trailIndex: number): number =>
+  trailIndex * 1.0 + (trailIndex > 1 ? (trailIndex - 1) * 0.25 : 0)
+
+/**
+ * One O(n) pass over the full visible row model → Map of row id to its
+ * `--group-separator-inset` (em). Call once (and memoize) for the whole table —
+ * do not rebuild per pinned section, or a pinned non-last sibling can look like
+ * a last sibling and invent a second separator.
+ *
+ * A row closes every group between its depth and the next visible row's depth
+ * (so expanded parents defer to their last visible descendant, and sort/filter
+ * is respected). One stroke is drawn, inset to the outermost closed group:
+ * year-level → 0 / full-bleed, otherwise that group's collapsible-trail.
+ */
+export const buildGroupSeparatorInsets = (
+  visibleRows: Row<GenericObject>[]
+): Map<string, number> => {
+  const insets = new Map<string, number>()
+
+  visibleRows.forEach((row, index) => {
+    if (row.depth === 0) return
+    const nextDepth = visibleRows[index + 1]?.depth ?? 0
+    if (nextDepth >= row.depth) return
+    insets.set(row.id, nextDepth === 0 ? 0 : getCollapsibleTrailLeftEm(nextDepth + 1))
+  })
+  return insets
+}
+
 /**
  * Creates a virtual item style object for virtualized rows
  */

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -15,6 +15,8 @@
 
   // Base vertical border color variable setup
   --column-border-color: #{$border_light};
+  --group-separator-color: #{$input_border_default};
+  --group-separator-row-border-color: #{$border_light};
 
   // Define color tokens once
   $border_color_options: (
@@ -249,6 +251,10 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
+    // Spacer rows have no text, so give them one line of header height.
+    .header-spacer-cell::before {
+      content: "\00a0";
+    }
     .table-header-cells-custom {
       text-align: center;
       [class^="pb_checkbox_kit"] .pb_checkbox_label {
@@ -524,6 +530,48 @@
     border-bottom-color: $border_light !important;
   }
 
+  // 2px group separator on last sibling of each nested group. It replaces the
+  // default border-bottom: the border goes transparent and the stroke paints
+  // over its spot, with a 1px default line underneath for any part left of
+  // --group-separator-inset (0 = year-level full-bleed). Rails:
+  // .group-separator-expanded defers to the leaf.
+  tr.group-separator-row:not(.group-separator-expanded) {
+    > td,
+    > .pb_table_td {
+      border-bottom-color: transparent !important;
+      background-image:
+        linear-gradient(var(--group-separator-color), var(--group-separator-color)),
+        linear-gradient(var(--group-separator-row-border-color), var(--group-separator-row-border-color));
+      // Padding-box origin so the inset matches the trails' `left` (a first-cell
+      // border-left would otherwise shift the stroke 1px past its trail); the
+      // +1px pushes both layers down over the 1px bottom border.
+      background-origin: padding-box;
+      background-position: 0 calc(100% + 1px), 0 calc(100% + 1px);
+      background-repeat: no-repeat;
+      background-size: 100% 2px, 100% 1px;
+      // Table hover sets `transition: all` on cells, which slides the stroke in
+      // from the top when a row becomes a separator. Keep only the hover border fade.
+      transition-property: border-color !important;
+    }
+
+    > td:first-child:not(.checkbox-cell),
+    > .pb_table_td:first-child:not(.checkbox-cell),
+    > td.checkbox-cell + td,
+    > td.checkbox-cell + .pb_table_td {
+      background-position: var(--group-separator-inset, 0em) calc(100% + 1px), 0 calc(100% + 1px);
+      background-size: calc(100% - var(--group-separator-inset, 0em)) 2px, 100% 1px;
+
+      // Trails left of the inset belong to groups that stay open, so they run
+      // through; trails at or past it stop on top of the stroke, which rises
+      // 1px above the (now transparent) border (0 or 1px).
+      // Avoid `* 1000` inside this clamp: dart-sass strips the calc() and leaves
+      // `(var() - var()) * 1000`, which SassC rejects when nitro recompiles playbook.css.
+      .collapsible-trail {
+        bottom: clamp(0px, calc(var(--collapsible-trail-left, 0em) - var(--group-separator-inset, 0em) + 1px), 1px);
+      }
+    }
+  }
+
   // Apply border colors when columnGroupBorderColor is set
   &[class*="column-group-border-"] {
     // For top-level column groups
@@ -789,6 +837,8 @@
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};
+    --group-separator-color: #{$input_border_default_dark};
+    --group-separator-row-border-color: #{$border_dark};
 
     // Dark mode default border colors for trails and horizontal borders
     .collapsible-trail {
@@ -800,6 +850,26 @@
       border-bottom-color: $border_dark !important;
     }
 
+    // table-dark sets `border-color: … !important` (rest + hover), and
+    // column-group-border sets `.toggle-content td { border-bottom: … !important }`.
+    // Those beat the shared separator rule, so the opaque border paints over the
+    // 2px stroke. Reassert transparent bottom with higher specificity.
+    .pb_table.dark,
+    .pb_table.table-dark {
+      tbody > tr.group-separator-row:not(.group-separator-expanded),
+      .pb_table_tbody > .pb_table_tr.group-separator-row:not(.group-separator-expanded) {
+        > td,
+        > .pb_table_td {
+          border-bottom-color: transparent !important;
+        }
+
+        &:hover > td,
+        &:hover > .pb_table_td {
+          border-bottom-color: transparent !important;
+        }
+      }
+    }
+
     .pb-bg-row-white {
       background: $bg_dark_card;
     }
@@ -808,21 +878,22 @@
       background: $bg_dark;
     }
 
-    // Dark mode virtualized rows
+    // Dark mode virtualized rows — use background-color (not the background
+    // shorthand) so group-separator background-image is not cleared.
     .virtualized-table-row {
       &.pb-bg-row-white {
-        background: $bg_dark_card !important;
+        background-color: $bg_dark_card !important;
 
         td:first-child {
-          background: $bg_dark_card !important;
+          background-color: $bg_dark_card !important;
         }
       }
 
       &.bg-silver {
-        background: $bg_dark;
+        background-color: $bg_dark;
 
         td:first-child {
-          background: $bg_dark;
+          background-color: $bg_dark;
         }
       }
     }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -37,6 +37,7 @@ type AdvancedTableProps = {
   expandByDepth?: GenericObject[]
   onExpandByDepthClick?: (arg: number, arg1: any) => void
   fullWidthCell?: boolean
+  groupSeparators?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -100,6 +101,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expandByDepth,
     onExpandByDepthClick,
     fullWidthCell = false,
+    groupSeparators = false,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -326,6 +328,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
+            groupSeparators={groupSeparators}
             handleExpandOrCollapse={handleExpandOrCollapse}
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}

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

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_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, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_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, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_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, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, group_separators: object.group_separators, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -37,11 +37,19 @@ module Playbook
                                 default: false
       prop :full_width_cell, type: Playbook::Props::Boolean,
                              default: false
+      prop :group_separators, type: Playbook::Props::Boolean,
+                              default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
       prop :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
+      # Marker for Rails JS: only toggle group-separator-expanded when this is set.
+      # Use merge (not tap/mutate) so we don't write onto the shared default {} or a caller-owned data hash.
+      def data
+        Hash(prop(:data)).merge(group_separators ? { group_separators: true } : {})
+      end
+
       def classname
         additional_classes = [
           responsive_classname,