playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -18,15 +18,7 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
-
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
+import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -74,8 +66,6 @@ type AdvancedTableProps = {
   onRowSelectionChange?: (arg: RowSelectionState) => void
   onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 /**
@@ -135,8 +125,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   const noTableCardContainer = tableProps?.container === false;
@@ -214,87 +202,51 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
 
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isStickyHeader = Boolean(tableProps?.sticky);
 
   useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
+    if (!isStickyHeader || !tableWrapperRef.current) return;
 
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
+    const wrapper = tableWrapperRef.current;
+    const updateHeights = () => updateStickyLayoutHeights(wrapper);
 
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header"
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
+    updateHeights();
+    scheduleStickyActionBarHeightUpdate(wrapper);
 
-  useEffect(() => {
-    if (!allowFullScreen) return
+    const resizeObserver = new ResizeObserver(updateHeights);
+    resizeObserver.observe(wrapper);
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
+    const actionBar = wrapper.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
     }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+    const table = wrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (thead) {
+      resizeObserver.observe(thead);
+    }
 
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+    return () => resizeObserver.disconnect();
+  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
-      'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen,
       // Add the hidden-action-bar class when action bar functionality exists but is not visible
       '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' : '',
@@ -358,7 +310,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
-        {renderFullscreenHeader()}
         <AdvancedTableProvider
             cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
@@ -375,7 +326,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}

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", () => {
@@ -646,22 +696,34 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("allowFullScreen prop adds fullscreen class", () => {
+test("pinnedRows prop renders top pinned rows at top", () => {
+  const pinnedRowsControl = {
+    value: { top: ["1", "3"] },
+    onChange: jest.fn()
+  }
+
   render(
     <AdvancedTable
-        allowFullScreen
         columnDefinitions={columnDefinitions}
-        tableData={MOCK_DATA}
+        data={{ testid: testId }}
+        pinnedRows={pinnedRowsControl}
+        tableData={MOCK_DATA_WITH_ID}
     />
   )
 
-  const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
+  const kit = screen.getByTestId(testId)
+  const pinnedRows = kit.querySelectorAll(".pinned-row")
+  
+  expect(pinnedRows).toHaveLength(2)
+  
+  const firstPinnedRow = pinnedRows[0]
+  expect(firstPinnedRow).toHaveStyle("position: sticky")
+  expect(firstPinnedRow).toHaveStyle("background-color: white")
 })
 
-test("pinnedRows prop renders pinned rows at top", () => {
+test("pinnedRows prop renders bottom pinned rows at bottom", () => {
   const pinnedRowsControl = {
-    value: { top: ["1", "3"] },
+    value: { bottom: ["1", "3"] },
     onChange: jest.fn()
   }
 
@@ -675,13 +737,13 @@ test("pinnedRows prop renders pinned rows at top", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const pinnedRows = kit.querySelectorAll(".pinned-row")
+  const pinnedRows = kit.querySelectorAll(".pinned-row-bottom")
   
   expect(pinnedRows).toHaveLength(2)
   
-  const firstPinnedRow = pinnedRows[0]
-  expect(firstPinnedRow).toHaveStyle("position: sticky")
-  expect(firstPinnedRow).toHaveStyle("background-color: white")
+  const lastPinnedRow = pinnedRows[0]
+  expect(lastPinnedRow).toHaveStyle("position: sticky")
+  expect(lastPinnedRow).toHaveStyle("background-color: white")
 })
 
 test("columnStyling.headerAlignment aligns header as expected", () => {
@@ -1005,7 +1067,12 @@ test("rowStyling prop works as expected", () => {
   {
     rowId: "1",
     backgroundColor: colors.white,
-    fontColor: colors.black
+    fontColor: colors.black,
+    fontWeight: "bold",
+  },
+  {
+    rowId: "2",
+    fontWeight: "regular",
   },
 ];
 
@@ -1022,6 +1089,55 @@ test("rowStyling prop works as expected", () => {
   const tableBody = kit.querySelector('tbody')
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+  expect(row1).toHaveStyle({fontWeight: "700"})
+  const row2 = tableBody.querySelector('tr:nth-child(2)')
+  expect(row2).toHaveStyle({fontWeight: "400"})
+})
+
+test("rowStyling fontWeight applies to expandable rows", () => {
+  const rowStyling = [
+    {
+      rowId: "1",
+      fontWeight: "bold",
+    },
+  ];
+
+  const tableData = [
+    {
+      id: "1",
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      children: [
+        {
+          id: "1-1",
+          year: "2021",
+          quarter: "Q1",
+          month: null,
+          day: null,
+          newEnrollments: "2",
+          scheduledMeetings: "35",
+        },
+      ],
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={tableData}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const expandableRow = tableBody.querySelector('tr:nth-child(1)')
+  expect(expandableRow).toHaveStyle({fontWeight: "700"})
 })
 
 test("rowStyling prop to allow padding control", () => {

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_pinned_rows.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -35,14 +36,30 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
+  const [pinnedRowsTop, setPinnedRowsTop] = useState({top: ["8"]})
+  const [pinnedRowsBottom, setPinnedRowsBottom] = useState({bottom: ["8"]})
 
   return (
     <div>
+      <Caption text="Pinned Rows Top" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
-          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          pinnedRows={{value: pinnedRowsTop, onChange: setPinnedRowsTop}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md"
+          text="Pinned Rows Bottom"
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRowsBottom, onChange: setPinnedRowsBottom}}
           tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}

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

@@ -1,7 +1,7 @@
-Use the `pinnedRows` 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.
+Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom 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 `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- `pinnedRows` takes an array of row ids to the `top` or `bottom` property as shown in the code snippet below (both can be used on the same table).
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -41,6 +41,10 @@
     font_color: "white",
     expand_button_color: "white",
   },
+  {
+    row_id: "15",
+    font_weight: "bold",
+  },
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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'
 
 
@@ -48,6 +48,10 @@ const rowStyling = [
     fontColor: colors.white,
     expandButtonColor: colors.white,
   },
+  {
+    rowId: "15",
+    fontWeight: "bold",
+  },
 ];
 
   return (
@@ -55,7 +59,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_row_styling_rails.md

@@ -3,5 +3,6 @@ The `row_styling` prop can be used in conjunction with row ids to control certai
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+- `font_weight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** 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.

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

@@ -3,5 +3,6 @@ The `rowStyling` prop can be used in conjunction with row ids to control certain
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+- `fontWeight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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 },
+}) %>