playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6e2aff174ff5639403b1af402319a9bae7900aa80c6e1f11f23e330309d5d5a
-  data.tar.gz: 524f88effff9cd94eb4624f5c13e828e764511e61ed784646537ff7e238a28cf
+  metadata.gz: 31a01c81d8013032547d3d5fdecadec787d6f2f8d64591898561444dea9d1197
+  data.tar.gz: cce4942d95c7cd06969a18b909971122ee75b0d0e650df4bc3acfb497b53f489
 SHA512:
-  metadata.gz: 76e16078f40f3142228a9eae24d47f272c84bfd8ccf231eba35ef3861490405524757078d83cb3d44fd0c73d1c40be6aa10c8ff513f6069af5187ce1c18d50b1
-  data.tar.gz: ee5c545edfcfaee49b9fd319bff32a53c681c961a3292ef1bfc20ffab4d036621938c5f6c06115f7156bd63e993af9e02eb4ba9bddf4850fd69f91bc81b14b7e
+  metadata.gz: 54c76487f36cfd1f04cdf9b17b39233250edb2f6be394797f117b40089b3b45c5e3fe498b7c4c85c2b1a430c8b475a33a30f6afabdd819135f236b4f5b982af0
+  data.tar.gz: aa703b2f6075230c4b1bdb9dd6f5add9dcee7905292eb5167e34bbf7f5ce8c0ac8a3a031610da6e29f72286f3f0a3814de80ac92e2d8b2de6903a99a30c8c6a1

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

@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
@@ -94,6 +95,7 @@ const TableCellRenderer = ({
               )}
               key={`${cell.id}-data`}
               style={{
+                ...playbookColumnLayoutStylesFromMeta(column.columnDef),
                 left: isPinnedLeft
                   ? i === 1 // Accounting for set min-width for first column
                     ? '180px'

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

@@ -16,6 +16,7 @@ import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -198,6 +199,7 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
+          ...playbookColumnLayoutStylesFromMeta(header?.column?.columnDef),
           backgroundColor: headerBackgroundColor,
           color: headerFontColor,
           left: isPinnedLeft

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

@@ -19,6 +19,7 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -224,7 +225,10 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{ width: cellWidth }}
+                      style={{
+                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
+                        width: cellWidth,
+                      }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,6 +12,10 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import {
+  buildPlaybookColumnLayoutStyles,
+  buildTanStackSizingFromColumn,
+} from "../Utilities/ColumnLayoutHelper";
 import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
@@ -105,11 +109,31 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
+      const tanStackSizing = buildTanStackSizingFromColumn(column);
+      const layoutStyles = buildPlaybookColumnLayoutStyles(column, tanStackSizing);
+      const userMeta =
+        column.meta &&
+        typeof column.meta === "object" &&
+        !Array.isArray(column.meta)
+          ? column.meta
+          : {};
+      const hasLayoutStyles =
+        layoutStyles.width !== undefined ||
+        layoutStyles.minWidth !== undefined ||
+        layoutStyles.maxWidth !== undefined;
+
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
           enableSorting: isFirstColumn || column.enableSort === true,
+          ...tanStackSizing,
+          meta: {
+            ...userMeta,
+            ...(hasLayoutStyles
+              ? { playbookColumnLayoutStyles: layoutStyles }
+              : {}),
+          },
         }),
       };
 

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

@@ -0,0 +1,138 @@
+import type { CSSProperties } from "react"
+
+import { GenericObject } from "../../types"
+
+/**
+ * Converts a Playbook column width value to a CSS length string.
+ * Numbers are treated as pixels; strings are passed through (e.g. `"12rem"`, `"200px"`).
+ */
+export function cssLength(
+  value: number | string | undefined | null
+): string | undefined {
+  if (value === undefined || value === null || value === "") return undefined
+  if (typeof value === "number" && Number.isFinite(value)) return `${value}px`
+  return String(value)
+}
+
+const columnStylingKeys = (column: GenericObject) =>
+  (column.columnStyling || column.column_styling || {}) as GenericObject
+
+function readStylingLength(
+  styling: GenericObject,
+  camel: string,
+  snake?: string
+): string | number | undefined {
+  if (snake) return styling[camel] ?? styling[snake]
+  return styling[camel] as string | number | undefined
+}
+
+/**
+ * TanStack Table v8 `ColumnDef` sizing fields we forward from each `columnDefinitions` entry.
+ * See AdvancedTable kit docs for precedence with `columnStyling` width keys.
+ */
+export const PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS = [
+  "size",
+  "minSize",
+  "maxSize",
+] as const
+
+export type PlaybookForwardedColumnSizing = Partial<
+  Record<(typeof PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS)[number], number>
+>
+
+export function buildTanStackSizingFromColumn(
+  column: GenericObject
+): PlaybookForwardedColumnSizing {
+  const out: PlaybookForwardedColumnSizing = {}
+  PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS.forEach((key) => {
+    const v = column[key]
+    if (typeof v === "number" && Number.isFinite(v)) out[key] = v
+  })
+
+  const styling = columnStylingKeys(column)
+
+  if (out.size === undefined && readStylingLength(styling, "width") !== undefined) {
+    const w = readStylingLength(styling, "width")
+    if (typeof w === "number" && Number.isFinite(w)) out.size = w
+  }
+  if (out.minSize === undefined && readStylingLength(styling, "minWidth", "min_width") !== undefined) {
+    const w = readStylingLength(styling, "minWidth", "min_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.minSize = w
+  }
+  if (out.maxSize === undefined && readStylingLength(styling, "maxWidth", "max_width") !== undefined) {
+    const w = readStylingLength(styling, "maxWidth", "max_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.maxSize = w
+  }
+
+  // width/size only → fixed column (min and max match preferred)
+  if (out.size !== undefined && out.minSize === undefined && out.maxSize === undefined) {
+    out.minSize = out.size
+    out.maxSize = out.size
+  }
+
+  return out
+}
+
+/**
+ * Inline width styles for `<th>` / `<td>` so `table-layout: fixed` tables keep stable
+ * columns when row content changes (e.g. expand/collapse). Values mirror TanStack sizing
+ * and/or `columnStyling` width keys; string values in `columnStyling` win over numeric
+ * TanStack fields when both describe the same axis.
+ */
+export function buildPlaybookColumnLayoutStyles(
+  column: GenericObject,
+  tanStackSizing: PlaybookForwardedColumnSizing
+): CSSProperties {
+  const styling = columnStylingKeys(column)
+  const styles: CSSProperties = {}
+
+  const stylingWidth = readStylingLength(styling, "width")
+  const stylingMin = readStylingLength(styling, "minWidth", "min_width")
+  const stylingMax = readStylingLength(styling, "maxWidth", "max_width")
+
+  const hasStylingWidth = stylingWidth !== undefined && stylingWidth !== ""
+  const hasStylingMin = stylingMin !== undefined && stylingMin !== ""
+  const hasStylingMax = stylingMax !== undefined && stylingMax !== ""
+
+  let widthValue: string | number | undefined = hasStylingWidth
+    ? stylingWidth
+    : tanStackSizing.size
+  let minValue: string | number | undefined = hasStylingMin
+    ? stylingMin
+    : tanStackSizing.minSize
+  let maxValue: string | number | undefined = hasStylingMax
+    ? stylingMax
+    : tanStackSizing.maxSize
+
+  const preferredForLock = hasStylingWidth ? stylingWidth : tanStackSizing.size
+  const explicitMin = hasStylingMin || tanStackSizing.minSize !== undefined
+  const explicitMax = hasStylingMax || tanStackSizing.maxSize !== undefined
+
+  if (
+    preferredForLock !== undefined &&
+    preferredForLock !== "" &&
+    !explicitMin &&
+    !explicitMax
+  ) {
+    minValue = preferredForLock
+    maxValue = preferredForLock
+    widthValue = preferredForLock
+  }
+
+  const widthCss = cssLength(widthValue)
+  const minCss = cssLength(minValue)
+  const maxCss = cssLength(maxValue)
+
+  if (widthCss !== undefined) styles.width = widthCss
+  if (minCss !== undefined) styles.minWidth = minCss
+  if (maxCss !== undefined) styles.maxWidth = maxCss
+
+  return styles
+}
+
+export function playbookColumnLayoutStylesFromMeta(
+  columnDef: GenericObject | undefined
+): CSSProperties {
+  const meta = columnDef?.meta as GenericObject | undefined
+  return (meta?.playbookColumnLayoutStyles || {}) as CSSProperties
+}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -774,6 +774,150 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
+test("columnStyling minWidth, width, and maxWidth apply to header and body cells", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      columnStyling: { minWidth: 240, width: 260, maxWidth: 400 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const yearHeader = screen.getByText("Year").closest("th");
+  expect(yearHeader).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
+
+  const yearCell = screen.getAllByText("2021")[0].closest("td");
+  expect(yearCell).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
+});
+
+test("columnStyling width only locks minWidth and maxWidth to the same value", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      columnStyling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const yearHeader = screen.getByText("Year").closest("th");
+  expect(yearHeader).toHaveStyle({
+    width: "128px",
+    minWidth: "128px",
+    maxWidth: "128px",
+  });
+});
+
+test("columnDefinitions size only locks minSize and maxSize to the same value", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      size: 200,
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
+  expect(enrollmentsHeader).toHaveStyle({
+    width: "200px",
+    minWidth: "200px",
+    maxWidth: "200px",
+  });
+});
+
+test("columnDefinitions size, minSize, and maxSize apply layout styles", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      size: 180,
+      minSize: 160,
+      maxSize: 320,
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
+  expect(enrollmentsHeader).toHaveStyle({
+    width: "180px",
+    minWidth: "160px",
+    maxWidth: "320px",
+  });
+
+  const enrollmentsCell = screen.getAllByText("20")[0].closest("td");
+  expect(enrollmentsCell).toHaveStyle({
+    width: "180px",
+    minWidth: "160px",
+    maxWidth: "320px",
+  });
+});
+
 test("columnStyling.fontColor sets cell font color", () => {
   const styledColumnDefs = [
     {

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

@@ -10,6 +10,7 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
+      columnStyling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,4 +6,10 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 3) `fontColor`: This will allow you to control the font color for a given column.
 
+4) Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
+
+Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
+
+See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
+
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -0,0 +1,57 @@
+import React from "react"
+import AdvancedTable from "../_advanced_table"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+/**
+ * Kit doc: compares fixed width, floor-only, TanStack band, and min/preferred/max band.
+ */
+const AdvancedTableColumnStylingWidth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year (fixed)",
+      cellAccessors: ["quarter", "month", "day"],
+      // width alone locks min + max to the same value (128px).
+      columnStyling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "Enrollments (floor)",
+      columnStyling: { minWidth: 160 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Meetings (TanStack band)",
+      size: 200,
+      minSize: 160,
+      maxSize: 240,
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance (min / pref / max)",
+      columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Completion %",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated",
+    },
+  ]
+
+  return (
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        tableData={MOCK_DATA}
+        {...props}
+    />
+  )
+}
+
+export default AdvancedTableColumnStylingWidth

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

@@ -0,0 +1,66 @@
+AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
+
+1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
+
+- Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
+- Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
+- Maximum width (ceiling): `columnStyling` `maxWidth` maps to TanStack `maxSize`.
+
+Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g. `"12rem"`, `"200px"`). TanStack fields accept numbers only.
+
+If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
+
+2) Fixed width: set `width` only
+
+If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
+
+```jsx
+columnStyling: { width: 128 }
+// Applied as width, minWidth, and maxWidth: 128px
+```
+
+```jsx
+size: 200
+// Forwarded as size, minSize, and maxSize: 200
+```
+
+Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
+
+3) Floor only: `minWidth` / `minSize`
+
+Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
+
+```jsx
+columnStyling: { minWidth: 160 }
+```
+
+4) Flexible band: min + preferred + max
+
+Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
+
+- `minWidth`: won’t shrink below this.
+- `width`: preferred size when space allows.
+- `maxWidth`: won’t grow above this.
+
+Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWidth: 168` → preferred 124px, allowed between 108 and 168.
+
+You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
+
+5) TanStack band without `columnStyling`
+
+The Meetings column uses only TanStack fields:
+
+```jsx
+{ accessor: "scheduledMeetings", size: 200, minSize: 160, maxSize: 240 }
+```
+
+Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
+
+6) What the example table shows
+
+- Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
+- Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.
+- Meetings (TanStack band): `size` / `minSize` / `maxSize` — preferred 200px, between 160–240.
+- Attendance (min / pref / max): all three in `columnStyling` — preferred 124px, between 108–168.
+
+Grouped columns: put width options on leaf definitions (columns with an `accessor`), not on parent group headers.

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

@@ -0,0 +1,62 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "enable-toggle-expansion-normal",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all"
+}) %>
+
+<%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    enable_toggle_expansion: "all"
+  }) %>
+  <%= pb_rails("advanced_table/table_body", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    subrow_headers: subrow_headers,
+    enable_toggle_expansion: "all"
+  }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+`enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
+
+When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
+
+When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
+
+Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

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

@@ -1,3 +1,7 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.