playbook_ui 16.9.0.pre.alpha.playgroundsmore17219 → 16.9.0.pre.alpha.touchdragmulticontainers17268

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62c122bf0b7250df2b2a33b88cfb0ec47dbd635ce881498f37bef87b9a0384d4
-  data.tar.gz: 0f0a5052a26cdd6638a8017ab8251ae435fdbc1569dbd5a12d5e1a6c3eedd64b
+  metadata.gz: 89c52f53eea784d92355431d75ff12e5b12309cc1daa70b45c9811369a9d51d9
+  data.tar.gz: 8424c9aeabd6007e2ba9151207c40f798bad2c5243ceb597aa43b176859b5326
 SHA512:
-  metadata.gz: c03a14dbff445b02405641e2a18123c03bf4efed3860a94868e3031f95918c3d696af676fa903976d87372a577e2aaa01b81b93638b7d0b008a54a28419ce12b
-  data.tar.gz: d266a46973eab20d8bc9c6365fcf2b32eed9a08a38a96967f208edf4612011d1cd9c670c6c44dad6d121c8245532eb96ba3f76d2a7df0a8ddec351e27707a432
+  metadata.gz: 2bd62a01ea9037bd4b5b86e6d70d947b08ddcc445f534db3edffabde5ab29c3d527dc779ba6b41552cd875078bbfb1d7287a1f1badbc9e0aa27d537cc8079aa4
+  data.tar.gz: bd30042e81eaa8205affab38ab44be73865af3adaec7d060be15a7aabb3058fe55d5a63a04fd3258a6be63d804da9c2eacdb02a540b62f0607e965f89ea0c529

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

@@ -136,6 +136,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
@@ -172,7 +173,7 @@ export const RegularTableView = ({
             position: 'sticky',
             top:
               row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
                   : undefined,
             zIndex: '3'
           }}

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

@@ -17,6 +17,7 @@ import {
   showActionBar,
   hideActionBar,
 } from "../Utilities/ActionBarAnimationHelper";
+import { scheduleStickyActionBarHeightUpdate } from "../Utilities/StickyLayoutHelper";
 import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
@@ -39,7 +40,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   type = "row-selection",
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions } =
+  const { table, columnVisibilityControl, columnDefinitions, tableContainerRef } =
     useContext(AdvancedTableContext);
 
   // ----------- Column visibility logic -----------
@@ -131,8 +132,10 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       } else {
         hideActionBar(cardRef.current);
       }
+
+      scheduleStickyActionBarHeightUpdate(tableContainerRef?.current ?? null);
     }
-  }, [isVisible, type]);
+  }, [isVisible, type, tableContainerRef]);
 
   const [showPopover, setShowPopover] = useState(false)
 

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

@@ -4,6 +4,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
+import { measureElementHeight } from '../Utilities/StickyLayoutHelper';
 
 const AdvancedTableContext = createContext<any>({});
 
@@ -30,8 +31,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   
   const [headerHeight, setHeaderHeight] = useState(44);
   const [rowHeight, setRowHeight] = useState(38);
+  const [actionBarHeight, setActionBarHeight] = useState(0);
 
   const measureHeights = useCallback(() => {
+    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
+
     if (headerRef.current) {
       const headerElement = headerRef.current as HTMLElement;
       const headerRect = headerElement.getBoundingClientRect();
@@ -45,7 +49,21 @@ export const AdvancedTableProvider = ({ children, ...props }: {
         setRowHeight(rowRect.height);
       }
     }
-  }, []);
+
+    if (wrapper) {
+      const actionBar = wrapper.querySelector(
+        ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card"
+      ) as HTMLElement | null;
+      const measuredActionBarHeight = actionBar
+        ? measureElementHeight(actionBar)
+        : 0;
+      setActionBarHeight(measuredActionBarHeight);
+      wrapper.style.setProperty(
+        "--advanced-table-action-bar-height",
+        `${measuredActionBarHeight}px`
+      );
+    }
+  }, [props.tableContainerRef]);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -56,6 +74,12 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       resizeObserver.observe(headerRef.current);
     }
 
+    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
+    const actionBar = wrapper?.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
+    }
+
     if (sampleRowRef.current) {
       resizeObserver.observe(sampleRowRef.current);
     }
@@ -72,7 +96,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, props.isActionBarVisible, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization
@@ -202,6 +226,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     keepPinnedRows: props.keepPinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     headerRef,
     sampleRowRef,
     measureHeights,

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

@@ -0,0 +1,100 @@
+const VISIBLE_ACTION_BAR_SELECTOR =
+  ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card";
+
+const ACTION_BAR_HEIGHT_TRANSITION_MS = 350;
+
+export const measureElementHeight = (element: HTMLElement): number => {
+  const { height: rectHeight } = element.getBoundingClientRect();
+  const scrollHeight = element.scrollHeight;
+  const offsetHeight = element.offsetHeight;
+
+  return Math.ceil(Math.max(rectHeight, scrollHeight, offsetHeight));
+};
+
+export const updateStickyActionBarHeight = (
+  advancedTableWrapper: HTMLElement | null
+): number => {
+  if (!advancedTableWrapper) return 0;
+
+  const actionBar = advancedTableWrapper.querySelector(
+    VISIBLE_ACTION_BAR_SELECTOR
+  ) as HTMLElement | null;
+
+  if (!actionBar) {
+    advancedTableWrapper.style.setProperty(
+      "--advanced-table-action-bar-height",
+      "0px"
+    );
+    return 0;
+  }
+
+  const actionBarHeight = measureElementHeight(actionBar);
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-action-bar-height",
+    `${actionBarHeight}px`
+  );
+
+  return actionBarHeight;
+};
+
+export const scheduleStickyActionBarHeightUpdate = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  if (!advancedTableWrapper) return;
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+
+  requestAnimationFrame(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+    requestAnimationFrame(() => {
+      updateStickyActionBarHeight(advancedTableWrapper);
+    });
+  });
+
+  window.setTimeout(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+  }, ACTION_BAR_HEIGHT_TRANSITION_MS);
+};
+
+export const updateStickyHeaderRowHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  if (!advancedTableWrapper) return;
+
+  const table = advancedTableWrapper.querySelector("table.pb_table");
+  const thead = table?.querySelector("thead");
+  if (!thead) return;
+
+  const rows = Array.from(thead.querySelectorAll("tr"));
+  let totalHeight = 0;
+
+  rows.forEach((tr, index) => {
+    const height = tr.offsetHeight;
+    if (index === 0) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-0-height",
+        `${height}px`
+      );
+    } else if (index === 1) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-1-height",
+        `${height}px`
+      );
+    }
+    totalHeight += height;
+  });
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-header-height",
+    `${totalHeight}px`
+  );
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+};
+
+export const updateStickyLayoutHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  updateStickyHeaderRowHeights(advancedTableWrapper);
+};

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

@@ -364,6 +364,34 @@
     }
   }
 
+  &.advanced-table-sticky-header {
+    .row-selection-actions-card.show-action-card,
+    .row-selection-actions-card.is-visible {
+      background-color: $white;
+      left: 0;
+      position: sticky;
+      top: 0;
+      z-index: 5;
+    }
+
+    .pb_table.sticky-header {
+      thead,
+      .pb_advanced_table_header {
+        top: var(--advanced-table-action-bar-height, 0px);
+        z-index: 3;
+      }
+    }
+
+    &.hidden-action-bar {
+      .pb_table.sticky-header {
+        thead,
+        .pb_advanced_table_header {
+          top: 0;
+        }
+      }
+    }
+  }
+
   // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
   &.advanced-table-max-height-xs {
     max-height: 320px;
@@ -434,7 +462,7 @@
       thead,
       .pb_advanced_table_header {
         position: sticky !important;
-        top: 44px !important;
+        top: calc(44px + var(--advanced-table-action-bar-height, 0px)) !important;
         z-index: $z_10;
       }
     }
@@ -987,6 +1015,13 @@
       background-color: $bg_dark_card;
     }
 
+    &.advanced-table-sticky-header {
+      .row-selection-actions-card.show-action-card,
+      .row-selection-actions-card.is-visible {
+        background-color: $bg_dark_card;
+      }
+    }
+
     .loading-toggle-icon,
     .loading-cell {
       &::after {

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

@@ -18,6 +18,7 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
+import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
 import Card from "../pb_card/_card"
 import Flex from "../pb_flex/_flex"
@@ -283,6 +284,33 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isStickyHeader = Boolean(tableProps?.sticky);
+
+  useEffect(() => {
+    if (!isStickyHeader || !tableWrapperRef.current) return;
+
+    const wrapper = tableWrapperRef.current;
+    const updateHeights = () => updateStickyLayoutHeights(wrapper);
+
+    updateHeights();
+    scheduleStickyActionBarHeightUpdate(wrapper);
+
+    const resizeObserver = new ResizeObserver(updateHeights);
+    resizeObserver.observe(wrapper);
+
+    const actionBar = wrapper.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
+    }
+
+    const table = wrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (thead) {
+      resizeObserver.observe(thead);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
@@ -295,6 +323,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    { 'advanced-table-sticky-header': isStickyHeader },
     { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',

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

@@ -46,6 +46,7 @@ module Playbook
           max_height_classname,
           hide_scroll_bar_class,
           hidden_action_bar_class,
+          sticky_header_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?
@@ -75,6 +76,12 @@ module Playbook
         selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
       end
 
+      def sticky_header_class
+        return "" unless table_props.is_a?(Hash)
+
+        table_props[:sticky] || table_props["sticky"] ? "advanced-table-sticky-header" : ""
+      end
+
       def selected_rows
         @selected_rows ||= []
       end

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

@@ -418,6 +418,56 @@ test("tableProps prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
+  expect(kit).toHaveClass("advanced-table-sticky-header")
+})
+
+test("sticky header with column visibility control offsets layout heights", async () => {
+  const columnDefsWithIds = columnDefinitions.map((col) => ({
+    ...col,
+    id: col.accessor,
+  }))
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefsWithIds}
+        columnVisibilityControl={{ default: true }}
+        data={{ testid: testId }}
+        responsive="none"
+        tableData={MOCK_DATA}
+        tableProps={{ sticky: true }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("advanced-table-sticky-header")
+  expect(kit).not.toHaveClass("hidden-action-bar")
+
+  const actionBar = kit.querySelector(".row-selection-actions-card.show-action-card")
+  expect(actionBar).toBeInTheDocument()
+
+  await waitFor(() => {
+    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toMatch(/^\d+px$/)
+  })
+})
+
+test("sticky header without column visibility control keeps zero action bar offset", async () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        responsive="none"
+        tableData={MOCK_DATA}
+        tableProps={{ sticky: true }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("advanced-table-sticky-header")
+  expect(kit).not.toHaveClass("hidden-action-bar")
+
+  await waitFor(() => {
+    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toBe("0px")
+  })
 })
 
 test("enableExpansionIcon changes icon", () => {

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

@@ -1,26 +1,44 @@
+import {
+  scheduleStickyActionBarHeightUpdate,
+  updateStickyActionBarHeight,
+} from "./Utilities/StickyLayoutHelper";
+
+// Card kit defaults to `transition-property: all`, which can animate height/opacity
+// during expand/collapse. Limit transitions to decorative properties only.
+const ACTION_BAR_TRANSITION_PROPERTIES = "border-color, box-shadow";
+
 function showActionBar(actionBar, selectedCount) {
   // Get container
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
-  // Show action bar directly
-  actionBar.style.height = "auto";
+  // Update the count before measuring height so the label is included on first show
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
+
+  // Expand without animating height so sticky offsets measure the final size
+  actionBar.style.transitionProperty = "none";
   actionBar.style.overflow = "visible";
   actionBar.style.opacity = "1";
-  actionBar.style.transitionProperty = "all";
-  actionBar.style.transitionTimingFunction = "ease-in-out";
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
+  actionBar.style.height = "auto";
+
+  // Force layout so padding/content are included before measuring
+  void actionBar.offsetHeight;
+
+  const expandedHeight = actionBar.scrollHeight;
+  actionBar.style.height = `${expandedHeight}px`;
 
   // Remove hidden-action-bar class when action bar is shown
   if (tableContainer) {
     tableContainer.classList.remove("hidden-action-bar");
+    updateStickyActionBarHeight(tableContainer);
+    scheduleStickyActionBarHeightUpdate(tableContainer);
   }
 
-  // Update the count
-  const countElement = actionBar.querySelector(".selected-count");
-  if (countElement) {
-    countElement.textContent = `${selectedCount} Selected`;
-  }
+  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
 }
 
 function hideActionBar(actionBar) {
@@ -28,6 +46,7 @@ function hideActionBar(actionBar) {
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
   // Hide action bar directly
+  actionBar.style.transitionProperty = "none";
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
@@ -37,7 +56,10 @@ function hideActionBar(actionBar) {
   // Add hidden-action-bar class when action bar is hidden
   if (tableContainer) {
     tableContainer.classList.add("hidden-action-bar");
+    updateStickyActionBarHeight(tableContainer);
   }
+
+  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
 import colors from '../../tokens/exports/_colors.module.scss'
 
 
@@ -55,7 +55,7 @@ const rowStyling = [
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           rowStyling={rowStyling}
-          tableData={MOCK_DATA}
+          tableData={MOCK_DATA_WITH_ID}
           {...props}
       />
     </div>

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

@@ -1,47 +1,39 @@
 <% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-    },
-    {
-      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",
-    }
-] %>
-
-<% table_data = 15.times.map do |index|
   {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
+    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",
+  },
+] %>
 
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: {
+  id: "table_props_sticky_table",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  max_height: "xs",
+  table_props: { sticky: true },
+}) %>

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

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-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),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -44,18 +36,17 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true
+    sticky: true,
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={tableData}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="xs"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+        {...props}
+    />
   )
 }
 

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

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-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).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.