playbook_ui 13.18.0 → 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f629448a4cd0208c365ff8cd0c7c18a3fb911bdc118497843b76279f9309b7c9
-  data.tar.gz: 466dd0df9bd42b611106524156fc473ad518fbe78ae1bb586a3e8715317586f3
+  metadata.gz: 0e92276b817648438498c23e0ecd061e7c98a9475ad753f40cc7e5c9fb0af6d7
+  data.tar.gz: f4140309f468eed4a83eceeb5f7615dba9a2a36b8b98304adaeed0dc094b6a49
 SHA512:
-  metadata.gz: 5f1d56aa0e2398edd4c6f97ea258e7d2f4d71f11b18a5410c82a9a142c4a3324ec0dd71dca84c7554dc0a7aee273e6e56c936c80351a241ce49157ef76806e36
-  data.tar.gz: 216199bebe300338129cda84ff8c4d0765231c1aecfa2bbfec3f008012ee39e019aac578b88926d06f5e7823d593f177ba699b4ae43091a6648cf1b77c4d24b0
+  metadata.gz: 8af07f55548723f7ec6ea94fc068ce0159eac619cbd0c48dbee56256dcfa9e1598c2aaf5a5518ba82005a8d01c927902dd76f59abefa151d54edf33e90083d65
+  data.tar.gz: '0299fa636b48f91f847ba704349dd639d9a412e354ac81508f744b85bfbb2d0d109885e3047aa126099a651875be533142b1e52f8232f99ca76244b614fed8db'

data/app/pb_kits/playbook/_reset.scss

@@ -39,4 +39,4 @@ body {
 a {
   text-decoration: none;
   color: $primary;
-}
+}

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

@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
     backgroundColor: "#E4E8F0",
   }
 
-  return <div style={style} />
+  return (
+    <div 
+        className="collapsible-trail" 
+        style={style} 
+    />
+  )
 }
 
 // Updated function to render multiple trails depending on depth

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

@@ -22,13 +22,14 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded } = useContext(AdvancedTableContext);
-  const RowWithoutChildren = row.originalSubRows === undefined;
+  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
     setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
   };
+  const RowHasChildren = row.original.children ? true : false
+  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -36,7 +37,7 @@ export const CustomCell = ({
           columnGap="xs"
           orientation="row"
       >
-        {!RowWithoutChildren ? (
+        {renderButton ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -53,7 +54,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
+        <FlexItem paddingLeft={renderButton? "none" : "xs"}>
           {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>

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

@@ -1,8 +1,9 @@
-import React from "react"
+import React, { useContext } from "react"
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
 import { Row, Table } from "@tanstack/react-table"
 
+import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
@@ -12,7 +13,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header"
+  enableToggleExpansion?: "all" | "header" | "none"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -27,7 +28,11 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
+  const { inlineRowLoading } = useContext(AdvancedTableContext);
+
   const numberOfColumns = table.getAllFlatColumns().length
+  const rowHasChildren = row.original.children ? true : false
+  const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
 
   return (
     <tr className="custom-row bg-silver">
@@ -42,13 +47,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && row.getCanExpand() ? (
+            {enableToggleExpansion === "all" && canExpand ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={row.getCanExpand() ? "none" : "xs"}
+                marginLeft={canExpand ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

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

@@ -12,11 +12,10 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header"
+  enableToggleExpansion?: "all" | "header" | "none"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
-  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -27,7 +26,6 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
-  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -50,10 +48,22 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
-    : `${header.id}${headerId ? `-${headerId}` : ""}`
+    `loading-${header.id}`
+    : `${header.id}`
 }`;
 
+const isToggleExpansionEnabledLoading =
+  header.index === 0 &&
+  loading &&
+  (enableToggleExpansion === "all" || "header") &&
+  enableToggleExpansion !== "none";
+  
+const isToggleExpansionEnabled =
+  header.index === 0 &&
+  !loading &&
+  (enableToggleExpansion === "all" || "header") &&
+  enableToggleExpansion !== "none";
+
   return (
     <th
         align="right"
@@ -73,15 +83,11 @@ const cellId = `${loading ?
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
-          {header.index === 0 &&
-            !loading &&
-            (enableToggleExpansion === "all" || "header") && (
+          {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {header.index === 0 &&
-            loading &&
-            (enableToggleExpansion === "all" || "header") && (
+          {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 

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

@@ -1,4 +1,7 @@
 import React, { useContext } from "react"
+import classnames from "classnames";
+import { buildCss } from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import { flexRender, Row } from "@tanstack/react-table"
 
@@ -10,28 +13,49 @@ import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
+  className?: string;
   collapsibleTrail?: boolean
+  dark?: boolean,
+  id?: string;
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
+  className,
   collapsibleTrail = true,
+  dark = false,
+  id,
   subRowHeaders,
+  ...props
 }: TableBodyProps) => {
+
   const {
+    columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
+    inlineRowLoading,
     loading,
     table,
   } = useContext(AdvancedTableContext)
+
+  const classes = classnames(
+    buildCss("pb_advanced_table_body"),
+    globalProps(props),
+    className
+  );
+
   return (
     <>
-      <tbody>
+      <tbody className={classes} 
+          id={id}
+      >
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = !row.original.children?.length
+          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
           const numberOfColumns = table.getAllFlatColumns().length
+          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
+          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
 
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -47,7 +71,7 @@ export const TableBody = ({
               )}
 
               <tr
-                  className={`${isExpandable ? "bg-silver" : "bg-white"} ${
+                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
                     row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
                   }`}
                   id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -79,9 +103,11 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
+              {isDataLoading ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}>
+                  <td colSpan={numberOfColumns}
+                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
+                  >
                     <LoadingInline />
                   </td>
                 </tr>

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

@@ -1,4 +1,7 @@
 import React, { useContext } from "react"
+import classnames from "classnames";
+import { buildCss } from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -6,16 +9,21 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
+  className?: string
+  dark?: boolean,
   enableSorting?: boolean
-  headerId?: string
+  id?: string;
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
+  className,
+  dark = false,
   enableSorting = false,
-  headerId,
+  id,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
+  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -24,9 +32,18 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
+  const classes = classnames(
+    buildCss("pb_advanced_table_header"),
+    globalProps(props),
+    className
+  );
+
+
   return (
     <>
-      <thead>
+      <thead className={classes}
+          id={id}
+      >
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -37,7 +54,6 @@ export const TableHeader = ({
                   handleExpandOrCollapse={handleExpandOrCollapse}
                   header={header}
                   headerChildren={children}
-                  headerId={headerId}
                   key={`${header.id}-header`}
                   loading={loading}
                   sortIcon={sortIcon}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -24,10 +24,9 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      row.getCanExpand() &&
-      (targetParent === undefined
+      targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId)
+        : targetParent === row.parentId
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -48,7 +47,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (row.getCanExpand() && targetParent === row.parentId) {
+      if (targetParent === row.parentId) {
         updateExpandedRows[row.id] = !isExpansionConsistent
           ? true
           : !row.getIsExpanded()

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

@@ -95,4 +95,34 @@
       border-right: $transparent !important;
     }
   }
+
+  &.dark {
+    .bg-white {
+      background: $bg_dark_card;
+    }
+
+    .bg-silver {
+      background: $bg_dark;
+    }
+
+    .table-header-cells:first-child, td:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
+    .collapsible-trail {
+      background-color: $border_dark !important;
+    }
+
+    .sort-button-icon, .header-sort-button > div {
+      color: $white !important;
+    }
+
+    .gray-icon {
+      color:  $text_dk_light !important;
+    }
+
+    .sticky-header {
+      background-color: $bg_dark_card;
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -20,18 +20,21 @@ import AdvancedTableContext from "./Context/AdvancedTableContext";
 import { TableHeader } from "./SubKits/TableHeader";
 import { TableBody } from "./SubKits/TableBody";
 
-import { DataType, ExpandedStateObject } from "./Utilities/types";
+import { DataType } from "./Utilities/types";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string };
   children?: React.ReactNode | React.ReactNode[];
   className?: string;
   columnDefinitions: DataType[];
+  dark?: boolean,
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header";
+  enableToggleExpansion?: "all" | "header" | "none";
   expandedControl?: DataType;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
+  inlineRowLoading?: boolean;
   loading?: boolean | string;
   onRowToggleClick?: (arg: Row<DataType>) => void;
   onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -48,11 +51,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
+    dark = false,
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
+    inlineRowLoading = false,
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
@@ -76,7 +82,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? expandedControl.onChange
     : setLocalExpanded;
 
-  const columnHelper = createColumnHelper<DataType>();
+  const columnHelper = createColumnHelper();
 
   //Create cells for first columns
   const createCellFunction = (cellAccessors: string[]) => {
@@ -104,7 +110,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell row={row} 
+            <CustomCell
+                onRowToggleClick={onRowToggleClick}
+                row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -157,7 +165,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
     columns,
     onExpandedChange: setExpanded,
-    getSubRows: (row) => row.children,
+    getSubRows: (row: DataType) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -186,7 +194,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const handleExpandOrCollapse = (row: Row<DataType>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
 
-    const expandedState = expanded as ExpandedStateObject;
+    const expandedState = expanded;
     const targetParent = row?.parentId;
     return setExpanded(
       updateExpandAndCollapseState(tableRows, expandedState, targetParent)
@@ -195,6 +203,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     globalProps(props),
@@ -204,23 +213,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            table,
+            columnDefinitions,
+            enableToggleExpansion,
+            expanded,
             handleExpandOrCollapse,
+            inlineRowLoading,
             loading,
-            enableToggleExpansion,
-            toggleExpansionIcon,
             setExpanded,
-            expanded,
             sortControl,
+            table,
+            toggleExpansionIcon,
           }}
       >
         <Table
             className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
             dataTable
             numberSpacing="tabular"
             responsive="none"

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

@@ -42,6 +42,36 @@ const MOCK_DATA = [
   },
 ];
 
+const MOCK_DATA_LOADING = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    children: [],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    children: [
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+      },
+    ],
+  },
+];
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -343,3 +373,57 @@ test("sort button exists and sorts column data", () => {
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
 }); 
+
+test("Generates Table.Header default + custom classname", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    >
+      <AdvancedTable.Header className="custom-header" />
+      <AdvancedTable.Body />
+
+    </AdvancedTable>
+  );
+
+  const kit = screen.getByTestId(testId);
+  const tableHeader = kit.querySelector('thead')
+  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
+});
+
+test("Generates Table.Body default + custom classname", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    >
+      <AdvancedTable.Header />
+      <AdvancedTable.Body className="custom-body-classname"/>
+
+    </AdvancedTable>
+  );
+
+  const kit = screen.getByTestId(testId);
+  const tableHeader = kit.querySelector('tbody')
+  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
+});
+
+test("inlineRowLoading prop renders inline loading if true", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        inlineRowLoading
+        tableData={MOCK_DATA_LOADING}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
+  expect(rowButton).toBeInTheDocument()
+  rowButton.click()
+  const inlineLoading = kit.querySelector(".fa-spinner")
+  expect(inlineLoading).toBeInTheDocument()
+});

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

@@ -1 +1 @@
-`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
+`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

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

@@ -8,7 +8,7 @@ For a visual of the data structure needed for `tableData`, see [here](https://gi
 
 ### columnDefinitions
 
-`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
+`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
 
 - `accessor`: this is the key from your data for the value you want rendered in that column
 - `label`: this is what will be rendered as the column header label

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { AdvancedTable } from "../..";
+import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
+
+const AdvancedTableInlineRowLoading = (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
+          tableData={MOCK_DATA_INLINE_LOADING}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableInlineRowLoading;

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

@@ -0,0 +1,5 @@
+As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic]. 
+
+In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+
+This prop is set to `false` by default.