playbook_ui 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ab403f777f646b3d7d608303239044ad0a7740e582035beccb22ddff5a24ce1
-  data.tar.gz: d4dc694b6f85c099e9b6f53d512e8fa0adc96a428a9c0d5699745594c6cd2d93
+  metadata.gz: aec00cc0f01b4b8a03cdeb6e7ec2f557bc24f0faf27bc53e40eefaec41ce9f11
+  data.tar.gz: 2f66281990b349330568f3e150163ab5351326fa367c231b4e6055a5fa5d53fb
 SHA512:
-  metadata.gz: ccb47fdb993c29446e42924ae80737f6f33d20ee3b9f6fb5ffe35fbfd97431edbb1743e958b418021030ec02f116eaf7de26675bf3d792e08ec4c7a25ee4ba0e
-  data.tar.gz: a85463fbd073388ae9218fa64b56fa72b857883a1bf635154a5ba168cccbaea2d45e8f626b463d53042fded52f26556f87da8429f9b3e8ad742dac50324b7b9f
+  metadata.gz: c28bc30a8a258ce3e8deb15673e26cf34ecc4d87c0cec6a30a811d3ecfa6a9ae06b4e171be3cfb979123275238203738260172f6eb6f95cf66e5f82af3a61a50
+  data.tar.gz: 4c1dd728c52fde23dcabc4979216465ad7e167ce628a90f2eb0af92e744078c2109d54a3cf341022cbd3296e15fe88cf71b486413e524696af5dc0161dfbbf11

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

@@ -11,6 +11,7 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -31,13 +32,25 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
-    if (!expandedControl) {
-      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+
+    const willBeExpanded = !row.getIsExpanded();
+    if (willBeExpanded) {
+      if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: true });
+      }
+    } else {
+      if (cascadeCollapse) {
+        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
+        const nextExpanded = { ...expanded };
+        idsToRemove.forEach((id) => delete nextExpanded[id]);
+        setExpanded(nextExpanded);
+      } else if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: false });
+      }
     }
   };
 

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

@@ -63,6 +63,7 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
+    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -182,7 +183,8 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth
+      depth,
+      cascadeCollapse
     )
     setExpanded(updated)
   }

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/Hooks/useTableActions.ts

@@ -12,6 +12,7 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
+  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -22,7 +23,8 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination
+  setLocalPagination,
+  cascadeCollapse = false
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -32,15 +34,25 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
-      const updatedExpandedState = await updateExpandAndCollapseState(
-        table.getRowModel(),
-        expanded,
-        row?.parentId,
-        undefined
-      )
 
-      setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table]);
+    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
+    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
+
+    if (cascadeCollapse && isHeaderCollapseAll) {
+      setExpanded({})
+      return
+    }
+
+    const updatedExpandedState = await updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      row?.parentId,
+      undefined,
+      cascadeCollapse
+    )
+
+    setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

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

@@ -12,6 +12,7 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -36,6 +37,7 @@ interface UseTableStateProps {
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
   inlineRowLoading?: boolean;
+  sortParentOnly?: boolean;
 }
 
 export function useTableState({
@@ -55,7 +57,8 @@ export function useTableState({
   columnVisibilityControl,
   pinnedRows,
   rowStyling,
-  inlineRowLoading = false
+  inlineRowLoading = false,
+  sortParentOnly = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -190,7 +193,7 @@ export function useTableState({
     getSubRows: (row: GenericObject) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: sortParentOnly ? getParentOnlySortedRowModel() : getSortedRowModel(),
     enableSortingRemoval: enableSortingRemoval,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,

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/Utilities/ExpansionControlHelpers.tsx

@@ -11,11 +11,21 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
+export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
+  const ids: string[] = []
+  for (const sub of row.subRows || []) {
+    ids.push(sub.id)
+    ids.push(...getDescendantRowIds(sub))
+  }
+  return ids
+}
+
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
+  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -51,8 +61,22 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  return filterExpandableRows({
+  const updatedExpandedState = filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
+
+  if (cascadeCollapse && !isExpandAction) {
+    const idsToRemove = new Set<string>();
+    for (const row of rowsToToggle) {
+      const shouldUpdate =
+        targetDepth === undefined ? true : row.depth === targetDepth;
+      if (shouldUpdate) {
+        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
+      }
+    }
+    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
+  }
+
+  return updatedExpandedState;
 };

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

@@ -0,0 +1,100 @@
+// Returns a row model getter that sorts only depth-0 (parent) rows so children and grandchild rows keep their original order under each parent.
+
+import type { Table, Row, RowModel, RowData } from "@tanstack/react-table";
+
+export function getParentOnlySortedRowModel<TData extends RowData>(): (
+  table: Table<TData>
+) => () => RowModel<TData> {
+  return (table) => () => {
+    const sortingState = table.getState().sorting;
+    const rowModel = table.getPreSortedRowModel();
+
+    if (!rowModel.rows.length || !sortingState?.length) {
+      return rowModel;
+    }
+
+    const sortedFlatRows: Row<TData>[] = [];
+    const availableSorting = sortingState.filter((sort) =>
+      table.getColumn(sort.id)?.getCanSort()
+    );
+
+    const columnInfoById: Record<
+      string,
+      {
+        sortUndefined?: false | -1 | 1 | "first" | "last";
+        invertSorting?: boolean;
+        sortingFn: (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
+      }
+    > = {};
+
+    availableSorting.forEach((sortEntry) => {
+      const column = table.getColumn(sortEntry.id);
+      if (!column) return;
+      columnInfoById[sortEntry.id] = {
+        sortUndefined: column.columnDef.sortUndefined,
+        invertSorting: column.columnDef.invertSorting,
+        sortingFn: column.getSortingFn(),
+      };
+    });
+
+    const parentRows = rowModel.rows.map((row) => ({ ...row }));
+    parentRows.sort((rowA, rowB) => {
+      for (let i = 0; i < availableSorting.length; i += 1) {
+        const sortEntry = availableSorting[i]!;
+        const columnInfo = columnInfoById[sortEntry.id]!;
+        const sortUndefined = columnInfo.sortUndefined;
+        const isDesc = sortEntry?.desc ?? false;
+        let sortInt = 0;
+
+        if (sortUndefined) {
+          const aValue = rowA.getValue(sortEntry.id);
+          const bValue = rowB.getValue(sortEntry.id);
+          const aUndefined = aValue === undefined;
+          const bUndefined = bValue === undefined;
+          if (aUndefined || bUndefined) {
+            if (sortUndefined === "first") return aUndefined ? -1 : 1;
+            if (sortUndefined === "last") return aUndefined ? 1 : -1;
+            sortInt =
+              aUndefined && bUndefined
+                ? 0
+                : aUndefined
+                  ? sortUndefined
+                  : -sortUndefined;
+          }
+        }
+
+        if (sortInt === 0) {
+          sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id);
+        }
+
+        if (sortInt !== 0) {
+          if (isDesc) sortInt *= -1;
+          if (columnInfo.invertSorting) sortInt *= -1;
+          return sortInt;
+        }
+      }
+      return rowA.index - rowB.index;
+    });
+
+    function flattenRowsInOrder(rows: Row<TData>[]): void {
+      rows.forEach((row) => {
+        sortedFlatRows.push(row);
+        if (row.subRows?.length) {
+          flattenRowsInOrder(row.subRows);
+        }
+      });
+    }
+    flattenRowsInOrder(parentRows);
+
+    const rowsById: Record<string, Row<TData>> = {};
+    sortedFlatRows.forEach((row) => {
+      rowsById[row.id] = row;
+    });
+
+    return {
+      rows: parentRows,
+      flatRows: sortedFlatRows,
+      rowsById,
+    };
+  };
+}

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

@@ -31,6 +31,7 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
+  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -65,6 +66,7 @@ type AdvancedTableProps = {
   showActionsBar?: boolean,
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
+  sortParentOnly?: boolean
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -80,6 +82,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
+    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -112,6 +115,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     selectableRows,
     persistToggleExpansionButton = false,
     sortControl,
+    sortParentOnly = false,
     stickyLeftColumn,
     tableData,
     tableOptions,
@@ -123,6 +127,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
+  const noTableCardContainer = tableProps?.container === false;
+
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -157,7 +163,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnVisibilityControl,
     pinnedRows,
     rowStyling,
-    inlineRowLoading
+    inlineRowLoading,
+    sortParentOnly
   });
 
   // Initialize table actions
@@ -173,7 +180,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination
+    setLocalPagination,
+    cascadeCollapse
   });
 
   // Set table row count for loading state
@@ -275,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),
@@ -339,6 +348,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
+            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

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