playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f15a8ac0110aaa64e75c62164518fb815e028873c5909c72a57b6322c2b98661
-  data.tar.gz: fbe1cc5a5f53f2c9387b9b2ff209abe5c9f808d16f248a285e20bb9ab980c33e
+  metadata.gz: 7de4a52108e01951e999ec72a392167e7ca613eedc6b2460454cea0fb265fcf8
+  data.tar.gz: 33e05379b7d7004b6943995d1710a1b91a844942710e2c8ca62dbc6e6bbbda0c
 SHA512:
-  metadata.gz: ab28994eae8dd6bcceb5d9ca44a65ec378060cba26a86c519742e892fc721b13ff6fca4a1f526385c942f4db7b30e9f8f3a96d37b6e7c1571bf84e76bf6f9a40
-  data.tar.gz: a23907ecbcf8a0afa5a3abca06e60b9c18e227a0f5bac019731d9be43f209ef689159e2d5b067d4a511ed8d1245739372689385d2e6830ff17dac8363d866d61
+  metadata.gz: 4e8d2d44b46b465a9d3cf4e954d0621abfc2da9cef8b9004f1d5e7e535f37bc57b8f4d54c46e26a2a4a79721c7e36e991ba9902170740b6ffe76f27a6becf207
+  data.tar.gz: 9e2878d9346444289f740ae5f3804c871e02d7c49f6283351768e68ffbfd0f19d6215eba7ee897cdb947ca332a2d802cd40ce8d5f118ff07b176707c0a1c9add

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

@@ -10,17 +10,17 @@ import { DataType } from "../Utilities/types";
 import AdvancedTableContext from "../Context/AdvancedTableContext";
 
 interface CustomCellProps {
-  row: Row<DataType>;
   getValue?: Getter<string>;
-  value?: string;
   onRowToggleClick?: (arg: Row<DataType>) => void;
+  row: Row<DataType>;
+  value?: string;
 } 
 
 export const CustomCell = ({
-  row,
   getValue,
-  value,
   onRowToggleClick,
+  row,
+  value,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded } = useContext(AdvancedTableContext);
   const RowWithoutChildren = row.originalSubRows === undefined;

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

@@ -2,7 +2,7 @@ import React from "react"
 import Icon from "../../pb_icon/_icon"
 import { Header } from "@tanstack/react-table"
 import { DataType } from "../Utilities/types"
-import { displayIcon } from "../Utilities/helper_functions"
+import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
   header: Header<DataType, unknown>

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

@@ -6,26 +6,26 @@ import { Row, Table } from "@tanstack/react-table"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
-import { isChrome } from "../Utilities/helper_functions"
+import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
+  collapsibleTrail?: boolean
+  enableToggleExpansion?: "all" | "header"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
-  table: Table<DataType>
-  collapsibleTrail?: boolean
   subRowHeaders?: string[]
-  enableToggleExpansion?: "all" | "header"
+  table: Table<DataType>
 }
 
 export const SubRowHeaderRow = ({
-  row,
-  table,
-  onClick,
   collapsibleTrail,
-  subRowHeaders,
   enableToggleExpansion,
+  onClick,
+  row,
+  subRowHeaders,
+  table,
 }: SubRowHeaderRowProps & GlobalProps) => {
   const numberOfColumns = table.getAllFlatColumns().length
 

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

@@ -1,34 +1,35 @@
 import React, { useContext } from "react"
+import classnames from "classnames";
 import Flex from "../../pb_flex/_flex"
 import { flexRender, Header } from "@tanstack/react-table"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
-import { isChrome } from "../Utilities/helper_functions"
+import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
-  headerChildren?: React.ReactNode | React.ReactNode[]
   enableSorting?: boolean
   enableToggleExpansion?: "all" | "header"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
+  headerChildren?: React.ReactNode | React.ReactNode[]
   headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
 
 export const TableHeaderCell = ({
-  header,
-  headerId,
   enableSorting,
-  sortIcon,
-  headerChildren,
-  loading,
   enableToggleExpansion,
   handleExpandOrCollapse,
+  header,
+  headerChildren,
+  headerId,
+  loading,
+  sortIcon,
 }: TableHeaderCellProps) => {
   const { sortControl } = useContext(AdvancedTableContext)
 
@@ -43,15 +44,21 @@ export const TableHeaderCell = ({
     }
   }
 
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
+  `${enableSorting ? "table-header-cells-active" : ""}`
+);
+
+const cellId = `${loading ? 
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
+}`;
+
   return (
     <th
         align="right"
-        className={`table-header-cells ${isChrome() ? "chrome-styles" : ""}`}
-        id={`${
-          loading
-            ? `loading-${header.id}-${headerId}`
-            : `${header.id}-${headerId}`
-        }`}
+        className={cellClassName}
+        id={cellId}
         key={`${header.id}-header`}
     >
       {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
@@ -64,7 +71,7 @@ export const TableHeaderCell = ({
       ) : (
         <Flex
             alignItems="center"
-            justify={header.index === 0 ? "between" : "none"}
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
             paddingLeft={loading ? "sm" : "none"}
         >
           {header.index === 0 &&
@@ -97,6 +104,7 @@ export const TableHeaderCell = ({
                   },
                 })}
               justify={header.index === 0 && enableSorting ? "between" : "none"}
+              paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
               {flexRender(header.column.columnDef.header, header.getContext())}

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

@@ -3,11 +3,11 @@ import Icon from "../../pb_icon/_icon"
 import { Row } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { DataType } from "../Utilities/types"
-import { displayIcon } from "../Utilities/helper_functions"
+import { displayIcon } from "../Utilities/IconHelpers"
 
 interface ToggleIconButtonProps {
-  row?: Row<DataType>
   onClick: (row: Row<DataType>) => void
+  row?: Row<DataType>
 }
 
 export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {

data/app/pb_kits/playbook/pb_advanced_table/README.md

@@ -0,0 +1,133 @@
+# Advanced Table Kit Data Structure
+
+The AdvancedTable Kit's `tableData` prop consumes the data that will render the table and as such has a specific structure. It must be an array of objects, where the key/value pairs will become the values rendered within each column. If children are present, they must also take the form of an array of objects. The kit will automatically render `children` as subRows.
+
+Here is the data structure being used within the kits doc examples:
+
+```
+MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "20",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "February",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [
+        //similar to chldren above
+    ]
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      //similar to children above
+    ],
+  },
+];
+
+```

data/app/pb_kits/playbook/pb_advanced_table/{SubComponents → SubKits}/TableBody.tsx

@@ -6,7 +6,7 @@ import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { isChrome } from "../Utilities/helper_functions"
+import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
@@ -19,10 +19,10 @@ export const TableBody = ({
   subRowHeaders,
 }: TableBodyProps) => {
   const {
-    table,
+    enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
-    enableToggleExpansion,
+    table,
   } = useContext(AdvancedTableContext)
   return (
     <>
@@ -78,7 +78,7 @@ export const TableBody = ({
                 ))}
               </tr>
 
-              {/* Display LoadingInline if getYearData is querying and there are no children already */}
+              {/* Display LoadingInline if Row Data is querying and there are no children already */}
               {isExpandable && rowHasNoChildren && row.depth === 0 ? (
                 <tr key={`${row.id}-row`}>
                   <td colSpan={numberOfColumns}>

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

@@ -0,0 +1,5 @@
+//Checking browser. Using this to add classname and css for browser specific issues with table borders
+export const isChrome = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return userAgent.includes("chrome") && !userAgent.includes("edg")
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/{helper_functions.tsx → ExpansionControlHelpers.tsx}

@@ -60,18 +60,4 @@ export const updateExpandAndCollapseState = (
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   })
-}
-
-//Checking browser. Using this to add classname and css for browser specific issues with table borders
-export const isChrome = () => {
-  const userAgent = navigator.userAgent.toLowerCase()
-  return userAgent.includes("chrome") && !userAgent.includes("edg")
-}
-
-// Logic for handling icons related props to allow for string or array of strings
-export const displayIcon = (icon: string | string[]) => {
-  if (typeof icon === "string") {
-    return [icon, icon]
-  }
-  return icon
-}
+}

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

@@ -0,0 +1,8 @@
+// Logic for handling icons related props to allow for string OR array of strings
+export const displayIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon]
+    }
+    return icon
+  }
+  

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

@@ -8,15 +8,6 @@
 .pb_advanced_table {
   $border-color: 1px solid $border_light !important;
 
-  //animation scss
-  @keyframes wave {
-    0% {
-      background-position: -468px 0;
-    }
-    100% {
-      background-position: 468px 0;
-    }
-  }
   [id$="-span"] {
     word-wrap: normal;
   }
@@ -34,9 +25,13 @@
   }
 
   .table-header-cells:first-child {
-    color: $primary !important;
     min-width: 180px;
   }
+
+  .table-header-cells-active:first-child {
+    color: $primary !important;
+  }
+
   // Icons
   .button-icon {
     display: flex;
@@ -94,4 +89,10 @@
   .chrome-styles:first-child {
     border-right: $border-color;
   }
+
+  .table-card {
+    .chrome-styles:first-child {
+      border-right: $transparent !important;
+    }
+  }
 }

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

@@ -13,54 +13,54 @@ import {
   Getter,
 } from "@tanstack/react-table";
 
-import { updateExpandAndCollapseState } from "./Utilities/helper_functions";
+import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
 
 import { CustomCell } from "./Components/CustomCell";
 import AdvancedTableContext from "./Context/AdvancedTableContext";
-import { TableHeader } from "./SubComponents/TableHeader";
-import { TableBody } from "./SubComponents/TableBody";
+import { TableHeader } from "./SubKits/TableHeader";
+import { TableBody } from "./SubKits/TableBody";
 
 import { DataType, ExpandedStateObject } from "./Utilities/types";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string };
+  children?: React.ReactNode | React.ReactNode[];
   className?: string;
+  columnDefinitions: DataType[];
   data?: { [key: string]: string };
+  enableToggleExpansion?: "all" | "header";
+  expandedControl?: DataType;
   id?: string;
-  tableData: DataType[];
+  initialLoadingRowsCount?: number;
   loading?: boolean | string;
-  columnDefinitions: DataType[];
-  children?: React.ReactNode | React.ReactNode[];
   onRowToggleClick?: (arg: Row<DataType>) => void;
   onToggleExpansionClick?: (arg: Row<DataType>) => void;
+  sortControl?: DataType;
+  tableData: DataType[];
   tableOptions?: DataType;
   tableProps?: DataType;
-  enableToggleExpansion?: "all" | "header";
   toggleExpansionIcon?: string | string[];
-  initialLoadingRowsCount?: number;
-  expandedControl?: DataType;
-  sortControl?: DataType;
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
+    children,
     className,
+    columnDefinitions,
     data = {},
+    enableToggleExpansion = "header",
+    expandedControl,
     id,
-    tableData,
+    initialLoadingRowsCount = 10,
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    columnDefinitions,
-    children,
+    sortControl,
+    tableData,
     tableOptions,
     tableProps,
-    enableToggleExpansion = "header",
     toggleExpansionIcon = "arrows-from-line",
-    initialLoadingRowsCount = 10,
-    expandedControl,
-    sortControl,
   } = props;
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
@@ -152,6 +152,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   };
 
+//initialize table
   const table = useReactTable({
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
     columns,
@@ -218,13 +219,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           }}
       >
         <Table
-            className={`${loading && "content-loading"}`}
+            className={`${loading ? "content-loading" : ""}`}
             dataTable
             numberSpacing="tabular"
             responsive="none"
             {...tableProps}
         >
-          {children}
+          {children ? (
+            children
+          ) : (
+            <>
+              <TableHeader />
+              <TableBody />
+            </>
+          )}
         </Table>
       </AdvancedTableContext.Provider>
     </div>

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

@@ -27,7 +27,7 @@ const AdvancedTableDefault = (props) => {
     },
     {
       accessor: "classCompletionRate",
-      label: "ClassCompletion Rate",
+      label: "Class Completion Rate",
     },
     {
       accessor: "graduatedStudents",
@@ -41,10 +41,7 @@ const AdvancedTableDefault = (props) => {
           columnDefinitions={columnDefinitions}
           tableData={MOCK_DATA}
           {...props}
-      >
-        <AdvancedTable.Header/>
-        <AdvancedTable.Body/>
-      </AdvancedTable>
+      />
     </div>
   );
 };

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

@@ -0,0 +1,13 @@
+The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props: 
+
+`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/1b2481c06137d2bc63031a1120c1bd4d01bfd9ec/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
+
+
+`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:
+
+- `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
+
+There is also one optional item that is only required if the table has nested data: 
+
+- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

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

@@ -0,0 +1 @@
+The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options. 

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

@@ -12,7 +12,7 @@ export const MOCK_DATA = [
     graduatedStudents: "19",
     children: [
       {
-        year: "2011",
+        year: "2021",
         quarter: "Q1",
         month: null,
         day: null,
@@ -24,7 +24,7 @@ export const MOCK_DATA = [
         graduatedStudents: "36",
         children: [
           {
-            year: "2011",
+            year: "2021",
             quarter: "Q1",
             month: "January",
             day: null,
@@ -36,7 +36,7 @@ export const MOCK_DATA = [
             graduatedStudents: "28",
             children: [
               {
-                year: "2011",
+                year: "2021",
                 quarter: "Q1",
                 month: "January",
                 day: "10",
@@ -48,7 +48,7 @@ export const MOCK_DATA = [
                 graduatedStudents: "17",
               },
               {
-                year: "2011",
+                year: "2021",
                 quarter: "Q1",
                 month: "January",
                 day: "20",
@@ -62,7 +62,7 @@ export const MOCK_DATA = [
             ],
           },
           {
-            year: "2011",
+            year: "2021",
             quarter: "Q1",
             month: "February",
             day: null,
@@ -96,15 +96,15 @@ export const MOCK_DATA = [
     quarter: null,
     month: null,
     day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-    attendanceRate: "51%",
-    completedClasses: "3",
-    classCompletionRate: "33%",
-    graduatedStudents: "19",
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
     children: [
       {
-        year: "2011",
+        year: "2022",
         quarter: "Q1",
         month: null,
         day: null,
@@ -116,7 +116,7 @@ export const MOCK_DATA = [
         graduatedStudents: "36",
         children: [
           {
-            year: "2011",
+            year: "2022",
             quarter: "Q1",
             month: "January",
             day: null,
@@ -128,10 +128,10 @@ export const MOCK_DATA = [
             graduatedStudents: "28",
             children: [
               {
-                year: "2011",
+                year: "2022",
                 quarter: "Q1",
                 month: "January",
-                day: "10",
+                day: "15",
                 newEnrollments: "34",
                 scheduledMeetings: "28",
                 attendanceRate: "97%",
@@ -140,10 +140,10 @@ export const MOCK_DATA = [
                 graduatedStudents: "17",
               },
               {
-                year: "2011",
+                year: "2022",
                 quarter: "Q1",
                 month: "January",
-                day: "20",
+                day: "25",
                 newEnrollments: "43",
                 scheduledMeetings: "23",
                 attendanceRate: "66%",
@@ -154,9 +154,9 @@ export const MOCK_DATA = [
             ],
           },
           {
-            year: "2011",
+            year: "2022",
             quarter: "Q1",
-            month: "February",
+            month: "May",
             day: null,
             newEnrollments: "20",
             scheduledMeetings: "41",
@@ -168,8 +168,8 @@ export const MOCK_DATA = [
               {
                 year: "2011",
                 quarter: "Q1",
-                month: "February",
-                day: "15",
+                month: "May",
+                day: "2",
                 newEnrollments: "19",
                 scheduledMeetings: "35",
                 attendanceRate: "69%",
@@ -188,15 +188,15 @@ export const MOCK_DATA = [
     quarter: null,
     month: null,
     day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-    attendanceRate: "51%",
-    completedClasses: "3",
-    classCompletionRate: "33%",
-    graduatedStudents: "19",
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
     children: [
       {
-        year: "2011",
+        year: "2023",
         quarter: "Q1",
         month: null,
         day: null,
@@ -208,9 +208,9 @@ export const MOCK_DATA = [
         graduatedStudents: "36",
         children: [
           {
-            year: "2011",
+            year: "2023",
             quarter: "Q1",
-            month: "January",
+            month: "March",
             day: null,
             newEnrollments: "16",
             scheduledMeetings: "20",
@@ -220,9 +220,9 @@ export const MOCK_DATA = [
             graduatedStudents: "28",
             children: [
               {
-                year: "2011",
+                year: "2023",
                 quarter: "Q1",
-                month: "January",
+                month: "March",
                 day: "10",
                 newEnrollments: "34",
                 scheduledMeetings: "28",
@@ -232,10 +232,10 @@ export const MOCK_DATA = [
                 graduatedStudents: "17",
               },
               {
-                year: "2011",
+                year: "2023",
                 quarter: "Q1",
-                month: "January",
-                day: "20",
+                month: "March",
+                day: "11",
                 newEnrollments: "43",
                 scheduledMeetings: "23",
                 attendanceRate: "66%",
@@ -246,9 +246,9 @@ export const MOCK_DATA = [
             ],
           },
           {
-            year: "2011",
+            year: "2023",
             quarter: "Q1",
-            month: "February",
+            month: "April",
             day: null,
             newEnrollments: "20",
             scheduledMeetings: "41",
@@ -258,9 +258,9 @@ export const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2011",
+                year: "2023",
                 quarter: "Q1",
-                month: "February",
+                month: "April",
                 day: "15",
                 newEnrollments: "19",
                 scheduledMeetings: "35",

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

@@ -1,3 +1,14 @@
+
+  //animation scss
+  @keyframes wave {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+
 .content-loading {
   pointer-events: none;
   p,

data/dist/menu.yml

@@ -45,7 +45,7 @@ kits:
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
       - name: "advanced_table"
         platforms: *react_only
-        description:
+        description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting. 
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.16.0"
-  VERSION = "13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010"
+  VERSION = "13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010
+  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-26 00:00:00.000000000 Z
+date: 2024-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -277,14 +277,19 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx
 - app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx
-- app/pb_kits/playbook/pb_advanced_table/SubComponents/TableBody.tsx
-- app/pb_kits/playbook/pb_advanced_table/SubComponents/TableHeader.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/helper_functions.tsx
+- app/pb_kits/playbook/pb_advanced_table/README.md
+- app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
+- app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx
+- app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
+- app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
+- app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts
 - app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
 - app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_description.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
 - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
 - app/pb_kits/playbook/pb_advanced_table/docs/index.js

data/app/pb_kits/playbook/pb_advanced_table/{SubComponents → SubKits}/TableHeader.tsx

@@ -5,23 +5,23 @@ import { TableHeaderCell } from "../Components/TableHeaderCell"
 import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
-  headerId?: string
+  children?: React.ReactNode | React.ReactNode[]
   enableSorting?: boolean
+  headerId?: string
   sortIcon?: string | string[]
-  children?: React.ReactNode | React.ReactNode[]
 }
 
 export const TableHeader = ({
-  headerId,
-  enableSorting = false,
   children,
+  enableSorting = false,
+  headerId,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
 }: TableHeaderProps) => {
   const {
-    table,
+    enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
-    enableToggleExpansion,
+    table,
   } = useContext(AdvancedTableContext)
 
   return (