playbook_ui 14.21.2.pre.alpha.PLAY2241tablestickycolumnsdatanotids8357 → 14.21.2.pre.alpha.PLAY18938263

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dcb903e9fac61dab1799f3b2480e1107fbe15b44cc240a7b47d203c96caecd13
-  data.tar.gz: d6114a181c65aa31d5c7f30bb729652ebb30b59ea8cf71946294c1d81c9206e2
+  metadata.gz: 79e1418032e3a7ddebd1c367b0623b34c597d5f3bdd150dcf1b674fc37249634
+  data.tar.gz: 745eed5d73220bcf2599935c70f19a103c52344f640afad7ad9fb0baceba5e79
 SHA512:
-  metadata.gz: f322fb4c59317a1f6d71ed145305656f34c3461b585904996b63c5f8b76fc175374dd9c82fc5ff2ab7f4d8830da244c1208ed44a3b29ae1fd334b12c7086dd5d
-  data.tar.gz: 60dbd83fd98aab746396b84410bc7c52125fcced4261870642be768fd6ce1db41dbc61f59ff845bcb76edcdbda826a4839397d3d39cc114b0c7a6a16c2e222f3
+  metadata.gz: 3e048fea08b7564b2886bcad5151b1528a92f55e35bd7661fc058582be2b64851353f9c398634021197e860550ea0f7cb13d0bafefc7e5b1a9bc92ee15c7d431
+  data.tar.gz: a34cc6f295dcf69a9315853f1ba9c079154b83cd4f94e49b06ffbb810d405b522850ebd4673843ae580b862522cd038ddc4acfd4f05aeb3917b06ad61ec80225

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

@@ -1,6 +1,6 @@
-import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
 import classnames from "classnames"
-import { flexRender, Cell, Row } from "@tanstack/react-table"
+import { flexRender, Cell } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
 
 import { GenericObject } from "../../types"
@@ -10,8 +10,6 @@ import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import Detail from "../../pb_detail/_detail"
-import Flex from "../../pb_flex/_flex"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -22,13 +20,11 @@ import AdvancedTableContext from "../Context/AdvancedTableContext"
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
   subRowHeaders?: string[]
-  isFetching: boolean
 }
 
 export const VirtualizedTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
-  isFetching,
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
@@ -40,7 +36,6 @@ export const VirtualizedTableView = ({
     hasAnySubRows,
     virtualizer,
     flattenedItems,
-    totalAvailableCount,
   } = useContext(AdvancedTableContext)
 
   const columnPinning = table.getState().columnPinning || { left: [] };
@@ -126,7 +121,19 @@ export const VirtualizedTableView = ({
   }
 
   // Get virtual items
-  const virtualItems: VirtualItem[] = virtualizer.getVirtualItems?.() || [];
+  let virtualItems: VirtualItem[] = [];
+  try {
+    virtualItems = virtualizer.getVirtualItems();
+  } catch (err) {
+    return (
+      <tr>
+        <td colSpan={table.getAllFlatColumns().length || 1}>
+          Error loading virtualized data.
+        </td>
+      </tr>
+    );
+  }
+
   if (!virtualItems.length) {
     return (
       <tr>
@@ -136,9 +143,6 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-  
-  // Establish # of Parent Rows (so that Footer count does not include every single row)
-  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
   return (
     <>
@@ -173,7 +177,7 @@ export const VirtualizedTableView = ({
         if (item.type === 'row') {
           const row = item.row;
           const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length;
+          const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
           const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 
@@ -262,30 +266,6 @@ export const VirtualizedTableView = ({
           );
         }
 
-        if (item.type === 'footer') {
-          // Render footer
-          return (
-            <tr
-                className="virtualized-table-row virtualized-footer"
-                key={`footer-row`}
-                style={virtualItemStyle}
-            >
-              <td colSpan={table.getAllFlatColumns().length}>
-                <Flex align="center"
-                    justify="center"
-                >
-
-                {isFetching ? (
-                  <LoadingInline />
-                ) : (
-                  <Detail text={`Showing ${topLevelRowCount} of ${totalAvailableCount} rows`} />
-                )}
-                </Flex>
-              </td>
-            </tr>
-          )
-        }
-
         return null;
       })}
     </>

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

@@ -8,7 +8,7 @@ import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
 const AdvancedTableContext = createContext<any>({});
 
 interface FlattenedItem {
-    type: 'header' | 'row' | 'loading' | 'footer';
+    type: 'header' | 'row' | 'loading';
     row: Row<GenericObject>;
     id: string;
 }
@@ -116,17 +116,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       }
     });
 
-    const isFetching = props.isFetching || false;
-    const shouldAddFooter = table && !isFetching && tableRows.length > 0
-
-    if (shouldAddFooter) {
-      items.push({
-        type: 'footer',
-        row: {} as Row<GenericObject>,
-        id: `footer-row`,
-      });
-    }
-
     return items;
   }, [
     isVirtualized,
@@ -170,11 +159,10 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   useEffect(() => {
     if (isVirtualized && virtualizer && table && containerRef.current) {
       // Force recalculation of all virtual items
-      virtualizer.setOptions({
-        ...virtualizer.options,
-        count: flattenedItems.length,
-      });
       virtualizer.measure();
+
+      // Reset scroll position when sorting changes
+      containerRef.current.scrollTop = 0;
     }
   }, [
     isVirtualized,
@@ -182,8 +170,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     table,
     containerRef,
     JSON.stringify(table?.getState().sorting || []),
-    JSON.stringify(table?.getState().expanded || {}),
-    flattenedItems.length,
+    JSON.stringify(table?.getState().expanded || {})
   ]);
 
   const contextValue = {

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from 'react';
 import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
@@ -19,21 +19,13 @@ export function useTableActions({
   onRowSelectionChange
 }: UseTableActionsProps) {
 
-  // State to achieve 1 second delay before fetching more rows
-  const [bottomReached, setBottomReached] = useState(false)
-  const bottomTimeout = useRef<NodeJS.Timeout | null>(null)
-
   // 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)
+    onToggleExpansionClick && onToggleExpansionClick(row);
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
+    setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
@@ -43,32 +35,20 @@ export function useTableActions({
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((
-      containerRef: HTMLDivElement | null,
-      fetchNextPage: () => void,
-      isFetching: boolean,
-      totalFetched: number,
-      totalDBRowCount: number
+    containerRefElement: HTMLDivElement | null,
+    fetchNextPage: () => void,
+    isFetching: boolean,
+    totalFetched: number,
+    totalDBRowCount: number
   ) => {
-    if (!containerRef || isFetching || totalFetched >= totalDBRowCount) return
-    const { scrollTop, scrollHeight, clientHeight } = containerRef
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-    // If user scrolls near bottom, fetch more data after 1 second delay
-    if (distanceFromBottom < 50) {
-      if (!bottomReached) {
-        setBottomReached(true)
-        bottomTimeout.current = setTimeout(() => {
-          fetchNextPage()
-          setBottomReached(false)
-        }, 1000)
-      }
-    } else {
-      setBottomReached(false)
-      if (bottomTimeout.current) {
-        clearTimeout(bottomTimeout.current)
-        bottomTimeout.current = null
+    if (containerRefElement) {
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      // If user scrolls near bottom, fetch more data
+      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
+        fetchNextPage();
       }
     }
-  },[bottomReached]);
+  }, []);
 
   // Update selection state
   useEffect(() => {

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -16,7 +16,6 @@ type TableBodyProps = {
   dark?: boolean
   id?: string
   subRowHeaders?: string[]
-  isFetching: boolean
 }
 
 export const TableBody = ({
@@ -25,7 +24,6 @@ export const TableBody = ({
   dark = false,
   id,
   subRowHeaders,
-  isFetching,
   ...props
 }: TableBodyProps) => {
 
@@ -65,7 +63,6 @@ export const TableBody = ({
           // Virtualized table view
           <VirtualizedTableView
               collapsibleTrail={collapsibleTrail}
-              isFetching={isFetching}
               subRowHeaders={subRowHeaders}
           />
         ) : (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -40,13 +40,9 @@ export const TableHeader = ({
     showActionsBar,
     selectableRows,
     responsive,
-    headerRef,
-    virtualizedRows,
-    enableVirtualization,
+    headerRef
   } = useContext(AdvancedTableContext)
 
-  const isVirtualized = virtualizedRows || enableVirtualization;
-
   const classes = classnames(
     buildCss("pb_advanced_table_header"),
     globalProps(props),
@@ -61,93 +57,46 @@ export const TableHeader = ({
     `${isChrome() ? "chrome-styles" : ""}`,
     `${responsive === "scroll" && "pinned-left"}`,
   );
-
-  const renderRegularTableHeader = () => (
-    <thead className={classes} 
-        id={id}
-    >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
-            key={`${headerGroup.id}-headerGroup`}
-            ref={index === 0 ? headerRef : null}
-        >
-          {!hasAnySubRows && selectableRows && (
-            <th className={customCellClassnames}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  key={`${header.id}-header`}
-                  loading={loading}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
-    </thead>
-  );
-
-  const renderVirtualizedTableHeader = () => (
-    <thead 
-        className={classes} 
-        data-virtualized="true"
-        id={id}
-    >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <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")}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  isVirtualized
-                  key={`${header.id}-header-virtualized`}
-                  loading={loading}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
-    </thead>
-  );
   return (
-    <>      
-      {isVirtualized ? renderVirtualizedTableHeader() : renderRegularTableHeader()}
+    <>
+      <thead className={classes}
+          id={id}
+      >
+        {/* Get the header groups (only one in this example) */}
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+          <tr 
+              key={`${headerGroup.id}-headerGroup`}
+              ref={index === 0 ? headerRef : null}
+          >
+            {!hasAnySubRows && selectableRows && (
+              <th className={customCellClassnames}>
+                <Checkbox
+                    checked={table?.getIsAllRowsSelected()}
+                    indeterminate={table?.getIsSomeRowsSelected()}
+                    onChange={table?.getToggleAllRowsSelectedHandler()}
+                />
+              </th>
+            )}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    key={`${header.id}-header`}
+                    loading={loading}
+                    sortIcon={sortIcon}
+                    table={table}
+                />
+              )
+            })}
+          </tr>
+        ))}
+      </thead>
     </>
   )
 }

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

@@ -57,6 +57,7 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
       position: 'absolute',
       top: 0,
       left: 0,
+      width: '100%',
       height: '40px', // Match standard table row height
       transform: `translateY(${startPosition}px)`,
       tableLayout: 'fixed',
@@ -66,14 +67,12 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
   /**
    * Get height estimates for different row types
    */
-  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading' | 'footer') => {
+  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading') => {
     switch (rowType) {
       case 'header':
         return 40; // Header height
       case 'loading':
         return 30; // Loading indicator height
-      case 'footer':
-        return 40
       case 'row':
       default:
         return 40; // Standard row height - match this to your design system

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

@@ -63,30 +63,11 @@
     width: 100%;
   }
 
-  // Virtualized Table and Rows for Infinite Scroll
-  scrollbar-gutter: stable right-edges;
-  .virtualized-header-row-header {
-    width: 100% !important;
-    .table-header-cells:first-child {
-      min-width: 180px;
-    }
-  }
-
-  .virtualized-footer {
-    width: 100% !important;
-    td {
-      border-bottom-left-radius: 4px !important;
-      border-bottom-right-radius: 4px !important;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
+  // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    box-sizing: border-box !important;
+    width: 100% !important;
 
     td {
       display: table-cell !important;
@@ -123,7 +104,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-  }
+    }
   
 
   .row-selection-actions-card {
@@ -212,6 +193,7 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
+      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -624,16 +606,6 @@
         td.sticky-left {
           border-right: 1px solid $border_light !important;
         }
-        // Virtualized Table in Responsive Styles
-        .virtualized-header,
-        .virtualized-header-row-header,
-        .virtualized-table-row,
-        .virtualized-footer {
-          border-right: 1px solid $border_light !important;
-          .table-header-cells:first-child {
-            box-shadow: 0 0 10px 0 rgba($shadow, 0.16) !important;
-          }
-        }
       }
     }
   }
@@ -649,23 +621,6 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
-  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
-  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
-  .last-visible-row {
-    td, .pb_table_td {
-      border-width: 0 0 1px 0;
-
-      &:first-child {
-        border-radius: 0 0 0 4px;
-        border-width: 0 0 1px 1px;
-      }
-      &:last-child {
-        border-radius: 0 0 4px 0;
-        border-width: 0 1px 1px 0;
-      }
-    }
-  }
-
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

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

@@ -266,29 +266,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
-  // The actual Main <Table /> element
-  const tableElement = (
-    <Table
-        className={`${loading ? "content-loading" : ""}`}
-        dark={dark}
-        dataTable
-        numberSpacing="tabular"
-        responsive="none"
-        {...tableProps}
-    >
-      {children ? (
-        children
-      ) : (
-        <>
-          <TableHeader />
-          <TableBody   
-              isFetching={isFetching}
-          />
-        </>
-      )}
-    </Table>
-  )
-
   return (
     <>
       {/* Top Pagination */}
@@ -345,7 +322,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
-            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -357,14 +333,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Virtualized wrapper div only if virtualizedRows is true */}
-            {virtualizedRows ? (
-              <div style={{ overflow: 'auto', width: '100%' }}>
-                {tableElement}
-              </div>
-            ) : (
-              tableElement
-            )}
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
           </React.Fragment>
         </AdvancedTableProvider>
 

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

@@ -632,23 +632,4 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
 
   const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
-});
-
-test("renders virtualized table rows and header", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA_WITH_ID}
-        virtualizedRows
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
-  expect(virtualizedHeader).toBeInTheDocument()
-
-  const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
-  expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
-})
+});

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

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>