playbook_ui 15.2.0.pre.alpha.PLAY2542formatasyoutypebug11501 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11641

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66bd84abefa68eb69260d4f315cd027b9109b9271e2ab828e245305934e7b34c
-  data.tar.gz: 14d3cfdadac16c1960d4ef5a608d0e95d491cb3e4780fb804f6f778dc2ca0926
+  metadata.gz: 26ef9154b98ad4d5d762b37915fa398314c6020fc3cf0c0b42b9e074fd55f569
+  data.tar.gz: 5a79125ffb800db93c0ebe22ad143167bac0f9c018ebc33beba7a1c2049ec3fc
 SHA512:
-  metadata.gz: 356228c23803a8da19fdd22c0a7262ddc6e52f826f6eaad2405af0ad6e8c7d474518c32f1594474f46f6c0154cc1d403446e6078dccc39cbc8b047f9dca1f692
-  data.tar.gz: 70083aeae526b60e4a38d925b3c2bdea6e307224b5d3cce2544ec756f26aa243f66cf87256af2f5e8dc179feabacab828733f47a86d2f886bc38915bcd9fc4f2
+  metadata.gz: 812c93c1d3667ad67d5e7d810b5d4a399c3ac6d11c003b231b32ed8dafb8742e4097b37b215f8a7ea9d5474626b57d8ead7dc11d60483b72a701efeecc9c3063
+  data.tar.gz: d0eeafe285857f375b45699aed9f1d4a25915c99b50e6a50d148937b4de0ce6e2d99a67e986305d83ebf6e36a4d67b3e9daed119a0138ae1f3cf7ca858d04cd2

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -70,6 +71,7 @@
 @import 'pb_passphrase/passphrase';
 @import 'pb_pb_bar_graph/pb_bar_graph';
 @import 'pb_pb_circle_chart/pb_circle_chart';
+@import 'pb_pb_gauge_chart/pb_gauge_chart';
 @import 'pb_pb_line_graph/pb_line_graph';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

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

@@ -30,6 +30,7 @@ type TableHeaderCellProps = {
   headerChildren?: React.ReactNode | React.ReactNode[]
   isPinnedLeft?: boolean
   loading?: boolean
+  showToggleWithInlineRowLoading?: boolean
   sortIcon?: string | string[]
   table?: Table<GenericObject>
 } & GlobalProps
@@ -58,6 +59,7 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    showToggleWithInlineRowLoading,
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
@@ -220,7 +222,7 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
+          {isToggleExpansionEnabled &&  ((hasAnySubRows) || (inlineRowLoading && showToggleWithInlineRowLoading)) && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (

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

@@ -39,6 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
+    showToggleWithInlineRowLoading,
     responsive,
     headerRef,
     virtualizedRows,
@@ -92,6 +93,7 @@ export const TableHeader = ({
                   isPinnedLeft={isPinnedLeft}
                   key={`${header.id}-header`}
                   loading={loading}
+                  showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
                   sortIcon={sortIcon}
                   table={table}
               />
@@ -136,6 +138,7 @@ export const TableHeader = ({
                   isVirtualized
                   key={`${header.id}-header-virtualized`}
                   loading={loading}
+                  showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
                   sortIcon={sortIcon}
                   table={table}
               />

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

@@ -63,6 +63,7 @@ type AdvancedTableProps = {
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
+  showToggleWithInlineRowLoading?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -109,6 +110,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
+    showToggleWithInlineRowLoading = false,
     sortControl,
     stickyLeftColumn,
     tableData,
@@ -355,6 +357,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
+            showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
             sortControl={sortControl}
             stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}

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

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { 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 }) %>
-      <%= 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, row_styling: object.row_styling }) %>
+      <%= 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 }) %>
+      <%= 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 }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -108,6 +108,48 @@ const MOCK_DATA_WITH_ID = [
   },
 ]
 
+const MOCK_DATA_NO_SUBROWS = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "22",
+    attendanceRate: "80%",
+    completedClasses: "7",
+    classCompletionRate: "55%",
+    graduatedStudents: "45",
+    children: [],
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -509,6 +551,23 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   expect(inlineLoading).toBeInTheDocument()
 })
 
+test("showToggleWithInlineRowLoading prop shows header toggle when inlineRowLoading is true", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="all"
+        inlineRowLoading
+        showToggleWithInlineRowLoading
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const headerToggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(headerToggleButton).toBeInTheDocument()
+})
+
 test("responsive prop functions as expected", () => {
   render(
     <AdvancedTable

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

@@ -33,7 +33,7 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "padding-control", 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: { table_data: @table_data, column_definitions: column_definitions }) %>
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -2,7 +2,9 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
+
+You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
 
 ### table_data
 

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/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" }) %>
+<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "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/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" }) %>
+<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", 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_collapsible_trail_rails.html.erb

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", 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: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

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

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", 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: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -33,6 +33,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", 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: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -0,0 +1,59 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
+
+const AdvancedTableInlineRowLoadingShowToggle = (props) => {
+  const columnDefinitions = [
+    {
+      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",
+    },
+  ]
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          showToggleWithInlineRowLoading
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableInlineRowLoadingShowToggle

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

@@ -0,0 +1,5 @@
+The `showToggleWithInlineRowLoading` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with enoty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In this code example, all 3 rows have empty children arrays. The toggle all button would not render (prior to an initial row expansion) without `showToggleWithInlineRowLoading` in place. 
+
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

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

@@ -46,6 +46,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
 <% end %>

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

@@ -35,6 +35,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control", 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: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,202 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+      // children: [
+      //   {
+      //     year: "2022",
+      //     quarter: "Q1",
+      //     month: null,
+      //     day: null,
+      //     newEnrollments: "2",
+      //     scheduledMeetings: "35",
+      //     attendanceRate: "32%",
+      //     completedClasses: "15",
+      //     classCompletionRate: "52%",
+      //     graduatedStudents: "36",
+      //     children: [
+      //       {
+      //         year: "2022",
+      //         quarter: "Q1",
+      //         month: "January",
+      //         day: null,
+      //         newEnrollments: "16",
+      //         scheduledMeetings: "20",
+      //         attendanceRate: "11%",
+      //         completedClasses: "13",
+      //         classCompletionRate: "47%",
+      //         graduatedStudents: "28",
+      //         children: [
+      //           {
+      //             year: "2022",
+      //             quarter: "Q1",
+      //             month: "January",
+      //             day: "15",
+      //             newEnrollments: "34",
+      //             scheduledMeetings: "28",
+      //             attendanceRate: "97%",
+      //             completedClasses: "20",
+      //             classCompletionRate: "15%",
+      //             graduatedStudents: "17",
+      //           },
+      //           {
+      //             year: "2022",
+      //             quarter: "Q1",
+      //             month: "January",
+      //             day: "25",
+      //             newEnrollments: "43",
+      //             scheduledMeetings: "23",
+      //             attendanceRate: "66%",
+      //             completedClasses: "26",
+      //             classCompletionRate: "47%",
+      //             graduatedStudents: "9",
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         year: "2022",
+      //         quarter: "Q1",
+      //         month: "May",
+      //         day: null,
+      //         newEnrollments: "20",
+      //         scheduledMeetings: "41",
+      //         attendanceRate: "95%",
+      //         completedClasses: "26",
+      //         classCompletionRate: "83%",
+      //         graduatedStudents: "43",
+      //         children: [
+      //           {
+      //             year: "2011",
+      //             quarter: "Q1",
+      //             month: "May",
+      //             day: "2",
+      //             newEnrollments: "19",
+      //             scheduledMeetings: "35",
+      //             attendanceRate: "69%",
+      //             completedClasses: "8",
+      //             classCompletionRate: "75%",
+      //             graduatedStudents: "23",
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   },
+      // ],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+      // children: [
+      //   {
+      //     year: "2023",
+      //     quarter: "Q1",
+      //     month: null,
+      //     day: null,
+      //     newEnrollments: "2",
+      //     scheduledMeetings: "35",
+      //     attendanceRate: "32%",
+      //     completedClasses: "15",
+      //     classCompletionRate: "52%",
+      //     graduatedStudents: "36",
+      //     children: [
+      //       {
+      //         year: "2023",
+      //         quarter: "Q1",
+      //         month: "March",
+      //         day: null,
+      //         newEnrollments: "16",
+      //         scheduledMeetings: "20",
+      //         attendanceRate: "11%",
+      //         completedClasses: "13",
+      //         classCompletionRate: "47%",
+      //         graduatedStudents: "28",
+      //         children: [
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "March",
+      //             day: "10",
+      //             newEnrollments: "34",
+      //             scheduledMeetings: "28",
+      //             attendanceRate: "97%",
+      //             completedClasses: "20",
+      //             classCompletionRate: "15%",
+      //             graduatedStudents: "17",
+      //           },
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "March",
+      //             day: "11",
+      //             newEnrollments: "43",
+      //             scheduledMeetings: "23",
+      //             attendanceRate: "66%",
+      //             completedClasses: "26",
+      //             classCompletionRate: "47%",
+      //             graduatedStudents: "9",
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         year: "2023",
+      //         quarter: "Q1",
+      //         month: "April",
+      //         day: null,
+      //         newEnrollments: "20",
+      //         scheduledMeetings: "41",
+      //         attendanceRate: "95%",
+      //         completedClasses: "26",
+      //         classCompletionRate: "83%",
+      //         graduatedStudents: "43",
+      //         children: [
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "April",
+      //             day: "15",
+      //             newEnrollments: "19",
+      //             scheduledMeetings: "35",
+      //             attendanceRate: "69%",
+      //             completedClasses: "8",
+      //             classCompletionRate: "75%",
+      //             graduatedStudents: "23",
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   },
+      // ],
+    },
+  ]
+  

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -54,6 +54,7 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State
   - advanced_table_inline_row_loading: Inline Row Loading
+  - advanced_table_inline_row_loading_show_toggle: Inline Row Loading with Show Toggle
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -45,4 +45,5 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableInlineRowLoadingShowToggle } from './_advanced_table_inline_row_loading_show_toggle.jsx'

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

@@ -331,8 +331,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Split the dataContent to get all ancestor IDs, check against ExpandedRows
         const ancestorIds = dataContent.split("-").slice(0, -1);
 
+        // Get the table_id from the child row's parent to construct proper prefixed IDs
+        const parentRowId = childRow.dataset.rowParent;
+        const tableId = parentRowId ? parentRowId.split('_').slice(0, -1).join('_') : '';
+
         const prefixedAncestorIds = ancestorIds.map(
-          (id) => `${childRow.id}_${id}`
+          (id) => `${tableId}_${id}`
         );
         const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
           PbAdvancedTable.expandedRows.has(id)

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

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
+      prop :table_id, type: Playbook::Props::String,
+                      default: ""
       prop :table_data, type: Playbook::Props::Array,
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
@@ -53,7 +53,7 @@ module Playbook
         subrow_data_attributes = {
           advanced_table_content: subrow_ancestor_ids.join("-"),
           row_depth: current_depth,
-          row_parent: "#{id}_#{ancestor_ids.last}",
+          row_parent: "#{table_id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
@@ -69,7 +69,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -78,9 +78,9 @@ module Playbook
             data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
 
             child_data_attributes = {
-              top_parent: "#{id}_#{top_parent_id}",
+              top_parent: "#{table_id}_#{top_parent_id}",
               row_depth: current_depth + 1,
-              row_parent: "#{id}_#{immediate_parent_id}",
+              row_parent: "#{table_id}_#{immediate_parent_id}",
               advanced_table_content: data_content,
             }