playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b97c57dd1473a621a18df79ce32d0de3421c907507c77600e234a85f54f960e
-  data.tar.gz: e6151ec14ea1dfe2940cf287a126681179f1ad90ca8e15379edbcb15107775a5
+  metadata.gz: 326ed240fc947011a9729f07e886b908a47dbe8272b37c1ac75897716f888313
+  data.tar.gz: 6a06a558e928dff552569cdbfd1239eb572edf237c43a6ab236fc879d3e4353b
 SHA512:
-  metadata.gz: fb30f58048bfaaf950a43b1b44626d409508d9cfec3b24f6112d985c7bb46d0dfb7dcd3d088ccd62fb60ad220b4c26a455d705bf6e0dcaa0e3a367df185d4e81
-  data.tar.gz: 7827ea415a317d635ed96bc6fbbe338dcb19d5122fbeb27de5f9c40c30ec6c87925584f9c57407a30c43ec957e587b6f3aab0c7245b7b39efdb36aa0eb683fce
+  metadata.gz: 129851a8988e80382d4dd29210ef4b9897adf1a1aec910aef5d3bd17fb1f13a4e0d4d570dc5ceb10a56afa6eab11b92ee5012fe35bc19093f370d40600307c63
+  data.tar.gz: 01a59f31f742325452c6f0c3f3f36ba0499d6e5244b3149ac4bfa2acbc2e8ad0dfe9bcef7853d941861791cd8cbd1217a7b85af59da7a5bcc8a718b25647e331

data/app/pb_kits/playbook/_playbook.scss

@@ -40,7 +40,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gantt_chart/gantt_chart';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';

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

@@ -93,7 +93,17 @@ export const RegularTableView = ({
 
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
+                const isLastCell = (() => {
+                  const parent = cell.column.parent;
+                    if (!parent) {
+                      const last = row.getVisibleCells().at(-1);
+                      return last?.column.id === cell.column.id;
+                    }
+                  
+                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+                    return visibleSiblings.at(-1)?.id === cell.column.id;
+                   })();
+
                 const { column } = cell;
                 return (
                   <td

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

@@ -1,52 +1,211 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useContext, useState } from "react";
+
+import AdvancedTableContext from "../Context/AdvancedTableContext";
+import { buildVisibilityTree } from "../Utilities/VisibilityTree";
+
 import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
+import Icon from "../../pb_icon/_icon";
+import Checkbox from "../../pb_checkbox/_checkbox";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+import Tooltip from "../../pb_tooltip/_tooltip";
+import PbReactPopover from "../../pb_popover/_popover";
+
+import {
+  showActionBar,
+  hideActionBar,
+} from "../Utilities/ActionBarAnimationHelper";
+import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
-  isVisible: boolean;
+  isVisible: boolean | GenericObject | undefined;
   selectedCount: number;
   actions?: React.ReactNode[] | React.ReactNode;
+  type?: string;
+}
+
+interface VisibilityNode {
+  id?: string | undefined;
+  label?: string | undefined;
+  children?: VisibilityNode[];
 }
 
 const TableActionBar: React.FC<TableActionBarProps> = ({
   isVisible,
   selectedCount,
-  actions
+  actions,
+  type = "row-selection",
 }) => {
   const cardRef = useRef(null);
+  const { table, columnVisibilityControl, columnDefinitions } =
+    useContext(AdvancedTableContext);
+
+  // ----------- Column visibility logic -----------
+  const includeIds = columnVisibilityControl?.includeIds;
+  const firstLeafId = table.getAllLeafColumns()[0]?.id;
+  // Get the first leaf column ID to exclude it from the visibility tree
+  // This is to avoid showing the first column in the dropdown
+  // as toggling it's visibility breaks the expanded row functionality
+  const tree = buildVisibilityTree(columnDefinitions, includeIds).filter(node => node.id !== firstLeafId);
+
+  const renderLeaf = (id: string, label: string) => {
+    const col   = table.getColumn(id);
+    const show  = col.getIsVisible();
+
+    const handleVisibilityChange = () => {
+      col.toggleVisibility();
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
+
+    return (
+      <Checkbox
+          checked={show}
+          key={id}
+          onChange={handleVisibilityChange}
+          paddingBottom="xs"
+          text={label}
+      />
+    );
+  };
+
+  const gatherLeafIds = (node: VisibilityNode): string[] =>
+    node.children && node.children.length
+      ? node.children.flatMap(gatherLeafIds)
+      : node.id
+      ? [node.id]
+      : [];
+
+  const renderGroup = (node: VisibilityNode ) => {
+     const leaves = gatherLeafIds(node);
+    const visibleArray   = leaves.map((id) => table.getColumn(id).getIsVisible());
+    const allOn    = visibleArray.every(Boolean);
+    const someOn   = visibleArray.some(Boolean);
+
+       const handleGroupVisibilityChange = () => {
+      leaves.forEach((id) => table.getColumn(id).toggleVisibility(!allOn));
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
+    return (
+      <>
+        <Checkbox
+            checked={allOn}
+            indeterminate={!allOn && someOn}
+            onChange={handleGroupVisibilityChange}
+            paddingBottom="xs"
+            text={node.label}
+        />
+        <Flex flexDirection="column" 
+            paddingLeft="lg"
+        >
+          {node?.children?.map((child) =>
+            child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
+          )}
+        </Flex>
+      </>
+    );
+  };
+// ------------ End of column visibility logic --------
 
   useEffect(() => {
-    if (cardRef.current) {
+    if (cardRef.current && type === "row-selection") {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
         hideActionBar(cardRef.current);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, type]);
+
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+    <Tooltip 
+        placement="top" 
+        text="Column Configuration"
+    >
+      <div onClick={togglePopover}>
+      <Icon
+          color="primary"
+          cursor="pointer"
+          icon="sliders-h"
+      />
+      </div>
+    </Tooltip>
+  )
 
   return (
     <Card
         borderNone={!isVisible}
-        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
+        className={`${
+          isVisible && "show-action-card row-selection-actions-card"
+        }`}
         htmlOptions={{ ref: cardRef as any }}
         padding={`${isVisible ? "xs" : "none"}`}
     >
       <Flex
           alignItems="center"
-          justify="between"
+          justify={type === "row-selection" ? "between" : "end"}
       >
-        <Caption
-            color="light"
-            paddingLeft="xs"
-            size="xs"
-        >
-          {selectedCount} Selected
-        </Caption>
-        <FlexItem>{actions}</FlexItem>
+        {type === "row-selection" ? (
+          <>
+            <Caption color="light" 
+                paddingLeft="xs" 
+                size="xs"
+            >
+              {selectedCount} Selected
+            </Caption>
+            <FlexItem>{actions}</FlexItem>
+          </>
+        ) : (
+          <PbReactPopover
+              closeOnClick="outside"
+              placement="bottom-end"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClose}
+              show={showPopover}
+              zIndex={3}
+          >
+            <>
+              <Caption 
+                  paddingY="sm" 
+                  text="Columns Config"
+                  textAlign="center" 
+              />
+              <SectionSeparator paddingBottom="xs" />
+              {tree.map((node: VisibilityNode) => (
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
+                    key={node.id}
+                    paddingX="xs"
+                >
+                  {node.children ? renderGroup(node) : renderLeaf(node.id, node.label)}
+                </Flex>
+              ))}
+              </>
+          </PbReactPopover>
+        )}
       </Flex>
     </Card>
   );

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useState } from "react"
 import classnames from "classnames"
 import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
@@ -8,10 +8,8 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import Dropdown from "../../pb_dropdown/_dropdown"
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
-import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
+import SectionSeparator from "../../pb_section_separator/_section_separator"
+import PbReactPopover from "../../pb_popover/_popover";
 import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
@@ -79,9 +77,26 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  const isLastHeaderCell =
-    header?.column.parent?.columns.at(-1) === header?.column ||
-    (header?.colSpan > 1 && header?.column.parent !== undefined);
+  const columnHasVisibleLeaf = (col: any): boolean =>
+    col.getIsVisible?.() ||
+    (Array.isArray(col.columns) &&
+      col.columns.some((child: any) => columnHasVisibleLeaf(child)));
+      
+   // Check on column position in stack + visibility to add the vertical border 
+  const isLastHeaderCell = (() => {
+    if (!header) return false;
+  
+    if (header.colSpan > 1 && header.column.parent !== undefined) return true;
+  
+    const parent = header.column.parent;
+  
+    if (!parent) {
+      const topHeaders = table?.getHeaderGroups()[0].headers.filter((h: any) => columnHasVisibleLeaf(h.column));
+      return topHeaders?.at(-1)?.id === header.id;
+    }
+    const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
+    return visibleSiblings.at(-1) === header.column;
+  })();
  
 const cellClassName = classnames(
   "table-header-cells",
@@ -119,6 +134,20 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+      <div className="gray-icon toggle-all-icon" 
+          onClick={togglePopover}
+      >
+          <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+      </div>
+  )
+
   const handleExpandDepth = (depth: number) => {
     if (onExpandByDepthClick) {
       const flatRows = table?.getRowModel().flatRows
@@ -174,31 +203,33 @@ const isToggleExpansionEnabled =
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-              <Dropdown className="expand-by-depth-dropdown-wrapper" 
-                  options={expandByDepth}
-              >
-                <DropdownTrigger className="gray-icon toggle-all-icon">
-                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
-                </DropdownTrigger>
-                <DropdownContainer className="expand-by-depth-dropdown">
-                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
-                    <DropdownOption
-                        key={index}
-                        option={option}
-                        padding="none"
+
+                    <PbReactPopover
+                        closeOnClick="any"
+                        placement="bottom-start"
+                        reference={popoverReference}
+                        shouldClosePopover={handleShouldClose}
+                        show={showPopover}
+                        zIndex={3}
                     > 
+                    {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                      <>
                       <Flex
                           alignItems="center"
+                          className="pb-advanced-table-popover-option"
+                          cursor="pointer"
                           htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
                           paddingX="sm"
                           paddingY="xs"
                           >
                             {option.label}
-                          </Flex>
-                    </DropdownOption>
-                  ))}
-                </DropdownContainer>
-              </Dropdown>
+                      </Flex>
+                      {index !== expandByDepth.length - 1 && <SectionSeparator/>}
+                      </>
+                        ))}
+                    </PbReactPopover>
+                 
+
             )}
 
           {isToggleExpansionEnabledLoading &&(

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

@@ -26,6 +26,8 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
+  columnVisibilityControl?: GenericObject;
+
 }
 
 export function useTableState({
@@ -40,16 +42,19 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions
+  tableOptions,
+  columnVisibilityControl
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
+  const [localColumnVisibility, setLocalColumnVisibility] = useState({});
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
+  const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
+  const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -104,17 +109,21 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } };
-    } else if (sortControl) {
-      return { state: { expanded, sorting } };
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } };
-    } else {
-      return { state: { expanded } };
-    }
-  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
+  const customState = useCallback(() => ({
+    state: {
+      expanded,
+      ...(sortControl     && { sorting }),
+      ...(selectableRows  && { rowSelection }),
+      ...(columnVisibility && { columnVisibility }),
+    },
+  }), [
+    expanded,
+    sortControl,
+    sorting,
+    selectableRows,
+    rowSelection,
+    columnVisibility,
+  ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -145,6 +154,7 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     getRowId: selectableRows ? row => row.id : undefined,
+    onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
     },

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

@@ -0,0 +1,47 @@
+export interface VisibilityNode {
+  id: string;
+  label: string;
+  children?: VisibilityNode[];
+}
+export const buildVisibilityTree = (
+  defs: any[],
+  allowed?: string[] | null
+): VisibilityNode[] =>
+  defs
+    .map((def) => {
+      const isGroup = Array.isArray(def.columns) && def.columns.length > 0;
+
+      // No filter at all → keep it
+      if (!allowed?.length) {
+        return isGroup
+          ? {
+              id: def.id,
+              label: def.label,
+              children: buildVisibilityTree(def.columns, allowed),
+            }
+          : { id: def.id, label: def.label };
+      }
+
+      // 1️⃣ If *this* ID is explicitly allowed → keep it & all its children
+      if (allowed.includes(def.id)) {
+        return isGroup
+          ? {
+              id: def.id,
+              label: def.label,
+              children: buildVisibilityTree(def.columns, null),
+            }
+          : { id: def.id, label: def.label };
+      }
+
+      // Otherwise, if it’s a group, recurse & keep only if kids survive
+      if (isGroup) {
+        const kids = buildVisibilityTree(def.columns, allowed).filter(Boolean);
+        return kids.length
+          ? { id: def.id, label: def.label, children: kids }
+          : null;
+      }
+
+      // Leaf not allowed → drop it
+      return null;
+    })
+    .filter(Boolean);

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

@@ -150,13 +150,6 @@
         box-sizing: border-box !important;
       }
     }
-    .expand-by-depth-dropdown-wrapper {
-      position: unset !important;
-    }
-    .expand-by-depth-dropdown {
-      width: unset !important;
-      text-align: left;
-    }
   }
 
   .pb_advanced_table_body {
@@ -375,6 +368,10 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  .pb_table_td:nth-child(2) {
+    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -545,14 +542,12 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
+
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -573,6 +568,10 @@
         box-shadow: $shadow_deep !important;
       }
 
+      .pb_table_td:nth-child(2) {
+        box-shadow: 0 0 0 0 !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -818,3 +817,8 @@
     }
   }
 }
+
+// Outside of the pb_advanced_table class for popover
+.pb-advanced-table-popover-option:hover {
+  background-color: $bg_light;
+}

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

@@ -35,6 +35,7 @@ type AdvancedTableProps = {
   className?: string
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
+  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -73,6 +74,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
+    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -132,7 +134,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange
+    onRowSelectionChange,
+    columnVisibilityControl,
   });
 
   // Initialize table actions
@@ -252,7 +255,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
   return (
     <>
@@ -286,6 +289,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
+            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -316,6 +320,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
+                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}

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

@@ -1,10 +1,18 @@
 <%= pb_content_tag 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: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-            <%= pb_rails("advanced_table/table_body", props: { 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 }) %>
-          <% end %>
-        <% end %>
+  <% if object.id && object.selectable_rows && object.show_actions_bar %>
+    <%= pb_rails("advanced_table/table_action_bar", props: {
+      actions: object.actions,
+      is_visible: false,
+      selected_count: 0
+    }) %>
+  <% 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 %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { 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 }) %>
+      <%= pb_rails("advanced_table/table_body", props: { 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 }) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -25,6 +25,10 @@ module Playbook
                         default: "auto"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :show_actions_bar, type: Playbook::Props::Boolean,
+                              default: true
+      prop :actions, type: Playbook::Props::Array,
+                     default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname]
@@ -47,6 +51,11 @@ module Playbook
       def selected_rows_length
         selected_rows.length
       end
+
+      def is_action_bar_visible
+        # Action bar visibility is controlled by JS based on selection
+        false
+      end
     end
   end
 end