playbook_ui 16.4.0 → 16.5.0.pre.alpha.AVNGR110715795

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a635bc71af18602cfde24d3d052b40cbb7592f4b91017588e7c9203de44e596
-  data.tar.gz: 592c7183ddbb6d16b0dedc1680795abbb7c49b61db857fe4e93ab631e2aa22a5
+  metadata.gz: 020a93f89c099ec899d7d2fff17521fa6bf88974f7db82daf7856f3279037ca4
+  data.tar.gz: 5358edd4c8d27cd5bef021ec3ab2b58e6267e62ed8108c63a040c125e2318901
 SHA512:
-  metadata.gz: 73e7d60fb1a65ceada297940f482b0eaa54a96ce14f118b3e1bcbba4c252ceab99cab9d57c4c1db690cff3ebb9e34db5640a7193bea5187f0e29f5ca0d26fef1
-  data.tar.gz: 234064ff262cf2ac638b83a39b2b5e8acb75a17c6abd3aa0b7ab85d278ca193de4b27dd9497b38e35df82927662d74f1b7445a7bef330a647d3d08f3161a671b
+  metadata.gz: 2d2df0c132670c39ed3fbadbdb094d9025898feb06ec70e6bfe52543cf4af9cb2252d6c1b08e8f644b0a2c601a4e16d72ed76b2d65959a1fba1e116738ef0d18
+  data.tar.gz: 0c618f6b2afbe7fbb521d8413fa171925791690ecaf5121f1566c953ca075710f3e3e03a3e7ed122a8ac29b48db11fe2c281fb9d2036d1bd3e91f7b74e745836

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -33,7 +33,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const measureHeights = useCallback(() => {
     if (headerRef.current) {
-      const headerRect = headerRef.current.getBoundingClientRect();
+      const headerElement = headerRef.current as HTMLElement;
+      const headerRect = headerElement.getBoundingClientRect();
       if (headerRect.height > 0) {
         setHeaderHeight(headerRect.height);
       }
@@ -67,9 +68,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     };
   }, [measureHeights]);
 
+  const headerGroupCount = table?.getHeaderGroups()?.length ?? 0;
+
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization

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

@@ -64,14 +64,12 @@ export const TableHeader = ({
   );
 
   const renderRegularTableHeader = () => (
-    <thead className={classes} 
+    <thead className={classes}
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
-            key={`${headerGroup.id}-headerGroup`}
-            ref={index === 0 ? headerRef : null}
-        >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
             <th className={customCellClassnames}>
               <Checkbox
@@ -105,16 +103,16 @@ export const TableHeader = ({
   );
 
   const renderVirtualizedTableHeader = () => (
-    <thead 
-        className={classes} 
+    <thead
+        className={classes}
         data-virtualized="true"
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr
             className="virtualized-header-row-header"
             key={`${headerGroup.id}-headerGroup-virtualized`}
-            ref={index === 0 ? headerRef : null}
         >
           {!hasAnySubRows && selectableRows && (
             <th className={classnames(customCellClassnames, "virtualized-header-cell")}>

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

@@ -63,6 +63,51 @@
     width: 100%;
   }
 
+  // Override pb_table endcap: first and last column use same padding as rest of row
+  // First column
+  .pb_table.table-sm tbody tr td:first-child,
+  .pb_table.table-sm tbody tr .pb_table_td:first-child,
+  .pb_table.table-sm tbody .pb_table_tr td:first-child,
+  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:first-child,
+  .pb_table.table-sm .pb_table_tbody tr td:first-child,
+  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:first-child,
+  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:first-child,
+  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
+    padding-left: $space-xs;
+  }
+  .pb_table.table-md tbody tr td:first-child,
+  .pb_table.table-md tbody tr .pb_table_td:first-child,
+  .pb_table.table-md tbody .pb_table_tr td:first-child,
+  .pb_table.table-md tbody .pb_table_tr .pb_table_td:first-child,
+  .pb_table.table-md .pb_table_tbody tr td:first-child,
+  .pb_table.table-md .pb_table_tbody tr .pb_table_td:first-child,
+  .pb_table.table-md .pb_table_tbody .pb_table_tr td:first-child,
+  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
+    padding-left: $space-sm;
+  }
+
+  // Last column
+  .pb_table.table-sm tbody tr td:last-child,
+  .pb_table.table-sm tbody tr .pb_table_td:last-child,
+  .pb_table.table-sm tbody .pb_table_tr td:last-child,
+  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:last-child,
+  .pb_table.table-sm .pb_table_tbody tr td:last-child,
+  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:last-child,
+  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:last-child,
+  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
+    padding-right: $space-xs;
+  }
+  .pb_table.table-md tbody tr td:last-child,
+  .pb_table.table-md tbody tr .pb_table_td:last-child,
+  .pb_table.table-md tbody .pb_table_tr td:last-child,
+  .pb_table.table-md tbody .pb_table_tr .pb_table_td:last-child,
+  .pb_table.table-md .pb_table_tbody tr td:last-child,
+  .pb_table.table-md .pb_table_tbody tr .pb_table_td:last-child,
+  .pb_table.table-md .pb_table_tbody .pb_table_tr td:last-child,
+  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
+    padding-right: $space-sm;
+  }
+
   // Virtualized Table and Rows for Infinite Scroll
   scrollbar-gutter: stable right-edges;
   .virtualized-header-row-header {
@@ -629,12 +674,18 @@
     @each $color_name, $color_value in $border_color_options {
       &.column-group-border-#{$color_name} {
         @if $theme == "light" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $white,
             lighten($silver, $opacity_7)
           );
         } @else if $theme == "dark" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $bg_dark_card,
@@ -670,6 +721,10 @@
       width: 100%;
       @include scrollbar-styling;
 
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_light);
+      }
+
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
@@ -720,7 +775,7 @@
     }
   }
 
-  // Row Pinning - additional inline styles in RegularTableView.tsx
+  // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
@@ -963,6 +1018,11 @@
       .sticky-left {
         background-color: $bg_dark;
       }
+
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_dark);
+      }
+
       @include advanced-table-sticky-mixin(
         $border_dark,
         $bg_dark_card,
@@ -981,6 +1041,10 @@
           }
         }
 
+        &:not(.advanced-table-no-table-container) {
+          @include advanced-table-sticky-wrapper-frame($border_dark);
+        }
+
         // These are the responsive borders that should NOT inherit the custom color
         @include advanced-table-sticky-mixin(
           $border_dark,

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

@@ -127,6 +127,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
+  const noTableCardContainer = tableProps?.container === false;
+
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -281,6 +283,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),

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

@@ -7,12 +7,12 @@
     }) %>
   <% end %>
 
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props || {})) do %>
     <% if content.present? %>
       <% 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 }) %>
+      <%= 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, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,6 +37,8 @@ module Playbook
                                 default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
+      prop :pinned_rows, type: Playbook::Props::HashProp,
+                         default: {}
 
       def classname
         additional_classes = [
@@ -46,9 +48,16 @@ module Playbook
           hidden_action_bar_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
+        additional_classes << "advanced-table-no-table-container" if no_table_card_container?
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
+      def no_table_card_container?
+        return false unless table_props.is_a?(Hash)
+
+        table_props[:container] == false || table_props["container"] == false
+      end
+
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx

@@ -0,0 +1,235 @@
+/* eslint-disable react/no-multi-comp, react/prop-types */
+import React, { useCallback, useState } from "react"
+
+import AdvancedTable from "../_advanced_table"
+import Flex from "../../pb_flex/_flex"
+import Icon from "../../pb_icon/_icon"
+import List from "../../pb_list/_list"
+import ListItem from "../../pb_list/_list_item"
+import PbReactPopover from "../../pb_popover/_popover"
+import SectionSeparator from "../../pb_section_separator/_section_separator"
+import StarRating from "../../pb_star_rating/_star_rating"
+import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+const LEAF_COUNT = "newEnrollments"
+const LEAF_SCHEDULED = "scheduledMeetings"
+
+const ICON_UNSORTED = "arrow-up-arrow-down"
+const iconSorted = (desc) => (desc ? "arrow-up-wide-short" : "arrow-down-short-wide")
+
+const STAR_MENU = [
+  { id: LEAF_COUNT, label: "Count" },
+  { id: LEAF_SCHEDULED, label: "Scheduled" },
+]
+
+const MENU_BTN = {
+  alignItems: "center",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  font: "inherit",
+  gap: 12,
+  justifyContent: "space-between",
+  padding: "8px 14px",
+  textAlign: "left",
+  width: "100%",
+}
+
+const labelStyle = (active) => ({
+  color: active ? "#0056cf" : "#242930",
+  flex: 1,
+  fontSize: 14,
+  fontWeight: active ? 600 : 400,
+})
+
+/** Hooks + popover; `header` callback cannot use hooks directly. */
+const StarMetricGroupHeader = ({ table }) => {
+  const [open, setOpen] = useState(false)
+  const menuId = "playbook-star-metric-sort-menu"
+
+  const sort0 = table.getState().sorting[0]
+  const groupActive =
+    sort0?.id === LEAF_COUNT || sort0?.id === LEAF_SCHEDULED
+
+  const close = useCallback((shouldClose) => setOpen(!shouldClose), [])
+  const toggle = useCallback((e) => {
+    e.stopPropagation()
+    setOpen((v) => !v)
+  }, [])
+
+  const applySort = useCallback(
+    (columnId, e) => {
+      e.stopPropagation()
+      const cur = table.getState().sorting[0]
+      const nextDesc = cur?.id === columnId ? !cur.desc : true
+      table.setSorting([{ desc: nextDesc, id: columnId }])
+      setOpen(false)
+    },
+    [table]
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        padding="none"
+        placement="bottom-start"
+        reference={
+          <button
+              aria-controls={menuId}
+              aria-expanded={open}
+              aria-haspopup="menu"
+              aria-label="Sort by Count or Scheduled"
+              onClick={toggle}
+              style={{
+                background: open ? "rgba(115, 134, 169, 0.14)" : "transparent",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                font: "inherit",
+                margin: 0,
+                padding: "2px 4px",
+              }}
+              title="Open menu to sort by Count or Scheduled"
+              type="button"
+          >
+            <Flex alignItems="center"
+                gap="xs"
+                justifyContent="center"
+            >
+              <StarRating
+                  backgroundType="outline"
+                  colorOption="primary"
+                  justifyContent="center"
+                  maxWidth="102px"
+                  rating={5}
+              />
+              <Icon
+                  color={groupActive ? "primary" : "default"}
+                  fixedWidth
+                  icon={
+                    groupActive
+                      ? iconSorted(Boolean(sort0?.desc))
+                      : ICON_UNSORTED
+                  }
+                  size="md"
+              />
+            </Flex>
+          </button>
+        }
+        shouldClosePopover={close}
+        show={open}
+        zIndex={1200}
+    >
+      <Flex id={menuId}
+          minWidth="220px"
+          orientation="column"
+      >
+        <List borderless
+            padding="none"
+        >
+          {STAR_MENU.map(({ id, label }, i) => {
+            const active = sort0?.id === id
+            return (
+              <React.Fragment key={id}>
+                {i > 0 ? <SectionSeparator margin="none" /> : null}
+                <ListItem padding="none">
+                  <button
+                      onClick={(e) => applySort(id, e)}
+                      style={MENU_BTN}
+                      type="button"
+                  >
+                    <span style={labelStyle(active)}>{label}</span>
+                    <Icon
+                        color={active ? "primary" : "default"}
+                        fixedWidth
+                        icon={
+                          active
+                            ? iconSorted(Boolean(sort0?.desc))
+                            : ICON_UNSORTED
+                        }
+                        size="md"
+                    />
+                  </button>
+                </ListItem>
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Flex>
+    </PbReactPopover>
+  )
+}
+
+const AdvancedTableGroupedHeadersComposition = (props) => {
+  const [pinnedRows, setPinnedRows] = useState({ top: ["12"] })
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      cellAccessors: ["quarter", "month", "day"],
+      label: "Year",
+    },
+    {
+      columns: [
+        {
+          columns: [
+            {
+              accessor: "newEnrollments",
+              enableSort: true,
+              id: LEAF_COUNT,
+              label: "Count",
+            },
+            {
+              accessor: "scheduledMeetings",
+              enableSort: true,
+              id: LEAF_SCHEDULED,
+              label: "Scheduled",
+            },
+          ],
+          id: "starLeafPair",
+          label: "Metrics",
+        },
+      ],
+      header: ({ table }) => (
+        <Flex justify="center">
+          <StarMetricGroupHeader table={table} />
+        </Flex>
+      ),
+      id: "starMetricGroup",
+      label: "Rating group (custom header)",
+    },
+    {
+      columns: [
+        { accessor: "attendanceRate", label: "Attendance" },
+        {
+          accessor: "classCompletionRate",
+          enableSort: true,
+          id: "classCompletionRate",
+          label: "Completion %",
+        },
+      ],
+      label: "Performance",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          maxHeight="md"
+          pinnedRows={{ onChange: setPinnedRows, value: pinnedRows }}
+          tableData={COMPOSITION_MOCK_DATA}
+          tableProps={{ sticky: true }}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableGroupedHeadersComposition

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md

@@ -0,0 +1,17 @@
+### Grouped headers, custom UI, sort, and pinned rows
+
+This example combines patterns that often show up together in product tables:
+
+1. **Multi-level headers** — nested `columns` in `columnDefinitions`.
+2. **Custom group header** — a `header` function returning React (here: `StarRating`, sort icon, `PbReactPopover` menu). Parent groups are not sort targets; **only leaf columns** use `enableSort: true` (see **Enable Sort By Column (Multi-Column)**).
+3. **Programmatic sort** — the group `header` receives TanStack’s **`table`**. Call **`table.setSorting([{ id: "<leafColumnId>", desc: boolean }])`** using the same **`id`** values as your leaf columns. Match **direction icons** to the built-in kit (`arrow-up-arrow-down` unsorted; `arrow-up-wide-short` / `arrow-down-short-wide` when sorted).
+4. **Pinned row + sticky header** — `pinnedRows` with row **`id`**s and `tableProps={{ sticky: true }}` (see **Pinned Rows**).
+
+**Implementation notes**
+
+- **`header` must be a child component** if you need hooks (e.g. popover open state). Render it from `header: ({ table }) => <YourHeader table={table} />`.
+- **Avoid wrapping the primary control in `Tooltip`** — it can steal the first tap/click. Use a **`title`** on the button or copy in the doc instead.
+- **Popover rows:** use a plain **`<button>`** as `reference`, `closeOnClick="outside"`. Picking the **same** metric again should **toggle** `desc`; switching to another leaf column often defaults to **`desc: true`** to align with **`sortDescFirst`**.
+- **Data:** **`advanced_table_grouped_headers_composition_mock_data.json`** — twelve flat rows (2015–2026) with **varied** Count / Scheduled / % values so sorting is obvious; **`id` `"12"`** is **2026** and is pinned by default.
+
+Other building blocks on this kit: **Custom Header with Multiple Headers**, **Sticky Header**.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md

@@ -0,0 +1,7 @@
+Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+
+**NOTE:**
+- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
+- Row ids required: 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.
+- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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

@@ -0,0 +1,98 @@
+[
+  {
+    "id": "1",
+    "year": "2015",
+    "newEnrollments": "12",
+    "scheduledMeetings": "40",
+    "attendanceRate": "62%",
+    "classCompletionRate": "28%"
+  },
+  {
+    "id": "2",
+    "year": "2016",
+    "newEnrollments": "88",
+    "scheduledMeetings": "12",
+    "attendanceRate": "71%",
+    "classCompletionRate": "55%"
+  },
+  {
+    "id": "3",
+    "year": "2017",
+    "newEnrollments": "34",
+    "scheduledMeetings": "67",
+    "attendanceRate": "58%",
+    "classCompletionRate": "41%"
+  },
+  {
+    "id": "4",
+    "year": "2018",
+    "newEnrollments": "05",
+    "scheduledMeetings": "91",
+    "attendanceRate": "44%",
+    "classCompletionRate": "73%"
+  },
+  {
+    "id": "5",
+    "year": "2019",
+    "newEnrollments": "61",
+    "scheduledMeetings": "19",
+    "attendanceRate": "83%",
+    "classCompletionRate": "36%"
+  },
+  {
+    "id": "6",
+    "year": "2020",
+    "newEnrollments": "19",
+    "scheduledMeetings": "54",
+    "attendanceRate": "67%",
+    "classCompletionRate": "62%"
+  },
+  {
+    "id": "7",
+    "year": "2021",
+    "newEnrollments": "73",
+    "scheduledMeetings": "08",
+    "attendanceRate": "52%",
+    "classCompletionRate": "49%"
+  },
+  {
+    "id": "8",
+    "year": "2022",
+    "newEnrollments": "50",
+    "scheduledMeetings": "50",
+    "attendanceRate": "75%",
+    "classCompletionRate": "45%"
+  },
+  {
+    "id": "9",
+    "year": "2023",
+    "newEnrollments": "95",
+    "scheduledMeetings": "03",
+    "attendanceRate": "69%",
+    "classCompletionRate": "81%"
+  },
+  {
+    "id": "10",
+    "year": "2024",
+    "newEnrollments": "27",
+    "scheduledMeetings": "76",
+    "attendanceRate": "91%",
+    "classCompletionRate": "22%"
+  },
+  {
+    "id": "11",
+    "year": "2025",
+    "newEnrollments": "41",
+    "scheduledMeetings": "33",
+    "attendanceRate": "48%",
+    "classCompletionRate": "94%"
+  },
+  {
+    "id": "12",
+    "year": "2026",
+    "newEnrollments": "66",
+    "scheduledMeetings": "66",
+    "attendanceRate": "55%",
+    "classCompletionRate": "58%"
+  }
+]