playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

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

@@ -0,0 +1,8 @@
+import { ExpandedState } from "@tanstack/react-table"
+
+export type ExpandedStateObject = Extract<
+  ExpandedState,
+  Record<string, boolean>
+>
+
+export type DataType = { [key: string]: any }

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

@@ -0,0 +1,97 @@
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "./scss_partials/loading";
+@import "./scss_partials/pseudo_states";
+
+.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;
+  }
+
+  .bg-silver {
+    background-color: lighten($silver, $opacity_7);
+  }
+
+  .bg-white {
+    background-color: $white;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .table-header-cells:first-child {
+    color: $primary !important;
+    min-width: 180px;
+  }
+  // Icons
+  .button-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+  }
+
+  .gray-icon {
+    color: $text_lt_light;
+    @extend %primary-color-pseudo;
+  }
+
+  .year-sort-icon {
+    @extend .button-icon;
+    padding: 2px;
+  }
+
+  .time-period-toggle-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
+  .expand-toggle-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    position: relative;
+    bottom: 1px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+  }
+
+  .header-sort-button {
+    @extend %primary-color-pseudo;
+    width: 100%;
+
+    &:focus-visible {
+      border-radius: $border_rad_heavier;
+    }
+  }
+
+  // Vertical separator
+  .table-header-cells:first-child,
+  td:first-child {
+    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
+  }
+
+  .chrome-styles:first-child {
+    border-right: $border-color;
+  }
+}

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

@@ -0,0 +1,237 @@
+import React, { useState, useEffect, useCallback } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import Table from "../pb_table/_table";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  Row,
+  useReactTable,
+  Getter,
+} from "@tanstack/react-table";
+
+import { updateExpandAndCollapseState } from "./Utilities/helper_functions";
+
+import { CustomCell } from "./Components/CustomCell";
+import AdvancedTableContext from "./Context/AdvancedTableContext";
+import { TableHeader } from "./SubComponents/TableHeader";
+import { TableBody } from "./SubComponents/TableBody";
+
+import { DataType, ExpandedStateObject } from "./Utilities/types";
+
+type AdvancedTableProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  tableData: DataType[];
+  loading?: boolean | string;
+  columnDefinitions: DataType[];
+  children?: React.ReactNode | React.ReactNode[];
+  onRowToggleClick?: (arg: Row<DataType>) => void;
+  onToggleExpansionClick?: (arg: Row<DataType>) => void;
+  tableOptions?: DataType;
+  tableProps?: DataType;
+  enableToggleExpansion?: "all" | "header";
+  toggleExpansionIcon?: string | string[];
+  initialLoadingRowsCount?: number;
+  expandedControl?: DataType;
+  sortControl?: DataType;
+} & GlobalProps;
+
+const AdvancedTable = (props: AdvancedTableProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    tableData,
+    loading,
+    onRowToggleClick,
+    onToggleExpansionClick,
+    columnDefinitions,
+    children,
+    tableOptions,
+    tableProps,
+    enableToggleExpansion = "header",
+    toggleExpansionIcon = "arrows-from-line",
+    initialLoadingRowsCount = 10,
+    expandedControl,
+    sortControl,
+  } = props;
+
+  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
+    initialLoadingRowsCount
+  );
+
+  // Create a local state for expanded and setExpanded if expandedControl not used
+  const [localExpanded, setLocalExpanded] = useState({});
+
+  // Determine whether to use the prop or the local state
+  const expanded = expandedControl ? expandedControl.value : localExpanded;
+  const setExpanded = expandedControl
+    ? expandedControl.onChange
+    : setLocalExpanded;
+
+  const columnHelper = createColumnHelper<DataType>();
+
+  //Create cells for first columns
+  const createCellFunction = (cellAccessors: string[]) => {
+    const columnCells = ({
+      row,
+      getValue,
+    }: {
+      row: Row<DataType>;
+      getValue: Getter<string>;
+    }) => {
+      const rowData = row.original;
+
+      switch (row.depth) {
+        case 0: {
+          return (
+            <CustomCell
+                getValue={getValue}
+                onRowToggleClick={onRowToggleClick}
+                row={row}
+            />
+          );
+        }
+        default: {
+          // Handle other depths based on cellAccessors
+          const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
+          const accessorValue = rowData[depthAccessor];
+          return accessorValue ? (
+            <CustomCell row={row} 
+                value={accessorValue} 
+            />
+          ) : (
+            "N/A"
+          );
+        }
+      }
+    };
+
+    return columnCells;
+  };
+
+  //Create column array in format needed by Tanstack
+  const columns =
+    columnDefinitions &&
+    columnDefinitions.map((column) => {
+      // Define the base column structure
+      const columnStructure = {
+        ...columnHelper.accessor(column.accessor, {
+          header: column.label,
+        }),
+      };
+      if (column.cellAccessors) {
+        columnStructure.cell = createCellFunction(column.cellAccessors);
+      }
+      return columnStructure;
+    });
+
+  //Syntax for sorting Array if we want to manage state ourselves
+  const sorting = [
+    {
+      id: columnDefinitions[0].accessor,
+      desc:
+        sortControl && sortControl.value !== null
+          ? !sortControl.value.desc
+          : false,
+    },
+  ];
+
+  const expandAndSortState = () => {
+    if (sortControl) {
+      return { state: { expanded, sorting } };
+    } else {
+      return { state: { expanded } };
+    }
+  };
+
+  const table = useReactTable({
+    data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
+    columns,
+    onExpandedChange: setExpanded,
+    getSubRows: (row) => row.children,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSortingRemoval: false,
+    ...expandAndSortState(),
+    ...tableOptions,
+  });
+
+  const tableRows = table.getRowModel();
+
+  // Set table row count for loading state
+  const updateLoadingStateRowCount = useCallback(() => {
+    const rowsCount = table.getRowModel().rows.length;
+    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
+      setLoadingStateRowCount(rowsCount);
+    }
+  }, [tableData, loadingStateRowCount]);
+
+  useEffect(() => {
+    if (!loading) {
+      updateLoadingStateRowCount();
+    }
+  }, [loading, updateLoadingStateRowCount]);
+
+  const handleExpandOrCollapse = (row: Row<DataType>) => {
+    onToggleExpansionClick && onToggleExpansionClick(row);
+
+    const expandedState = expanded as ExpandedStateObject;
+    const targetParent = row?.parentId;
+    return setExpanded(
+      updateExpandAndCollapseState(tableRows, expandedState, targetParent)
+    );
+  };
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_advanced_table"),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
+        id={id}
+    >
+      <AdvancedTableContext.Provider
+          value={{
+            table,
+            handleExpandOrCollapse,
+            loading,
+            enableToggleExpansion,
+            toggleExpansionIcon,
+            setExpanded,
+            expanded,
+            sortControl,
+          }}
+      >
+        <Table
+            className={`${loading && "content-loading"}`}
+            dataTable
+            numberSpacing="tabular"
+            responsive="none"
+            {...tableProps}
+        >
+          {children}
+        </Table>
+      </AdvancedTableContext.Provider>
+    </div>
+  );
+};
+
+AdvancedTable.Header = TableHeader;
+AdvancedTable.Body = TableBody;
+
+export default AdvancedTable;

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import { AdvancedTable } from "../";
+
+const MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    children: [
+      {
+        year: "2011",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+      },
+    ],
+  },
+];
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+];
+
+const testId = "advanced_table";
+
+test("generated scaffold test", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+});

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableDefault = (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: "ClassCompletion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header/>
+        <AdvancedTable.Body/>
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableDefault;