playbook_ui 16.7.0.pre.alpha.tablewidths16409 → 16.7.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4c7d8db60d8c02dea905e6e651b4fa36a82ef629066a79701101efdeb02a997
-  data.tar.gz: 22c87f688bdc909c17934224b81fc142eff8354f611e47b8ec9a83ad86e25d26
+  metadata.gz: 1df511d9cea220056ca66936b64ebebb36c51334bcfaa7fc8f3a77d97625b05d
+  data.tar.gz: a34dd71d6896b5cd3d2c2c46dcece4c046072b584d7879b6ee8ddc48378eaf1d
 SHA512:
-  metadata.gz: 1a75b42f17664f96dadd39551724b2cf1ae8836490988a5df9aaf1dc52a257367aed7243323ed86ccda5e68de4166662743ceaea02bfc33efa02437dacd7f981
-  data.tar.gz: a0d86d348851cbb969932187c7a5f4a51f8ad17fc817771469c25538499e436496eb0407b495a3f1498f951c043a6d0fb67be1e10d9fca622b7c361ee6d48721
+  metadata.gz: f8cd336c91eb7498940880a19bafc7d49b16c36e4a777e547dc26dcb59e9d6b9bf527ef1763563a313fe7f4b2801b447d7f2b0b540baf830a6fa62589d34d034
+  data.tar.gz: 4f9dcad612095338451775807e0dda91a34f834f5d7153dfa08d016b56cbe53fbd24114f39a18eb19b449cc49530f053d252e75b774f5ab2cf417664a424e125

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

@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
@@ -95,7 +94,6 @@ const TableCellRenderer = ({
               )}
               key={`${cell.id}-data`}
               style={{
-                ...playbookColumnLayoutStylesFromMeta(column.columnDef),
                 left: isPinnedLeft
                   ? i === 1 // Accounting for set min-width for first column
                     ? '180px'

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

@@ -16,7 +16,6 @@ import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -199,7 +198,6 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
-          ...playbookColumnLayoutStylesFromMeta(header?.column?.columnDef),
           backgroundColor: headerBackgroundColor,
           color: headerFontColor,
           left: isPinnedLeft

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

@@ -19,7 +19,6 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -225,10 +224,7 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{
-                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
-                        width: cellWidth,
-                      }}
+                      style={{ width: cellWidth }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

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

@@ -12,10 +12,6 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
-import {
-  buildPlaybookColumnLayoutStyles,
-  buildTanStackSizingFromColumn,
-} from "../Utilities/ColumnLayoutHelper";
 import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
@@ -109,31 +105,11 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
-      const tanStackSizing = buildTanStackSizingFromColumn(column);
-      const layoutStyles = buildPlaybookColumnLayoutStyles(column, tanStackSizing);
-      const userMeta =
-        column.meta &&
-        typeof column.meta === "object" &&
-        !Array.isArray(column.meta)
-          ? column.meta
-          : {};
-      const hasLayoutStyles =
-        layoutStyles.width !== undefined ||
-        layoutStyles.minWidth !== undefined ||
-        layoutStyles.maxWidth !== undefined;
-
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
           enableSorting: isFirstColumn || column.enableSort === true,
-          ...tanStackSizing,
-          meta: {
-            ...userMeta,
-            ...(hasLayoutStyles
-              ? { playbookColumnLayoutStyles: layoutStyles }
-              : {}),
-          },
         }),
       };
 

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

@@ -774,82 +774,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling minWidth, width, and maxWidth apply to header and body cells", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { minWidth: 240, width: 260, maxWidth: 400 },
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const yearHeader = screen.getByText("Year").closest("th");
-  expect(yearHeader).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-
-  const yearCell = screen.getAllByText("2021")[0].closest("td");
-  expect(yearCell).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-});
-
-test("columnDefinitions size, minSize, and maxSize apply layout styles", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 180,
-      minSize: 160,
-      maxSize: 320,
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
-  expect(enrollmentsHeader).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-
-  const enrollmentsCell = screen.getAllByText("20")[0].closest("td");
-  expect(enrollmentsCell).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-});
-
 test("columnStyling.fontColor sets cell font color", () => {
   const styledColumnDefs = [
     {

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

@@ -10,8 +10,6 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      // Keeps the hierarchy column narrow and stable when rows expand (see kit docs).
-      columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,14 +6,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 3) `fontColor`: This will allow you to control the font color for a given column.
 
-4) **Column width (layout stability)** — optional keys on `columnStyling` (numbers are treated as **pixels**; you may also use CSS length strings such as `"12rem"` or `"200px"`):
-
-- `minWidth`: minimum width for the column’s header and body cells (helps prevent horizontal “jump” when row content or expansion depth changes on tables using fixed layout).
-- `width`: preferred column width.
-- `maxWidth`: maximum column width.
-
-The live example below narrows the **Year** column (`minWidth` / `width` / `maxWidth`) so the first column stays compact while leaving room for expand and sort controls.
-
-The same sizing can be expressed with TanStack `ColumnDef` fields on each column definition object (merged into the underlying table model): `size` (width), `minSize`, and `maxSize` (numbers, pixels). If both are present for the same axis, **`columnStyling` string values take precedence**; otherwise `columnStyling` numeric/string values override TanStack numbers when only one source sets that axis. **Grouped columns:** apply width controls on **leaf** column definitions (the columns that have an `accessor`).
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -9,21 +9,7 @@ import ListItem from "../../pb_list/_list_item"
 import PbReactPopover from "../../pb_popover/_popover"
 import SectionSeparator from "../../pb_section_separator/_section_separator"
 import StarRating from "../../pb_star_rating/_star_rating"
-
-const COMPOSITION_MOCK_DATA = [
-  { id: "1", year: "2015", newEnrollments: "12", scheduledMeetings: "40", attendanceRate: "62%", classCompletionRate: "28%" },
-  { id: "2", year: "2016", newEnrollments: "88", scheduledMeetings: "12", attendanceRate: "71%", classCompletionRate: "55%" },
-  { id: "3", year: "2017", newEnrollments: "34", scheduledMeetings: "67", attendanceRate: "58%", classCompletionRate: "41%" },
-  { id: "4", year: "2018", newEnrollments: "05", scheduledMeetings: "91", attendanceRate: "44%", classCompletionRate: "73%" },
-  { id: "5", year: "2019", newEnrollments: "61", scheduledMeetings: "19", attendanceRate: "83%", classCompletionRate: "36%" },
-  { id: "6", year: "2020", newEnrollments: "19", scheduledMeetings: "54", attendanceRate: "67%", classCompletionRate: "62%" },
-  { id: "7", year: "2021", newEnrollments: "73", scheduledMeetings: "08", attendanceRate: "52%", classCompletionRate: "49%" },
-  { id: "8", year: "2022", newEnrollments: "50", scheduledMeetings: "50", attendanceRate: "75%", classCompletionRate: "45%" },
-  { id: "9", year: "2023", newEnrollments: "95", scheduledMeetings: "03", attendanceRate: "69%", classCompletionRate: "81%" },
-  { id: "10", year: "2024", newEnrollments: "27", scheduledMeetings: "76", attendanceRate: "91%", classCompletionRate: "22%" },
-  { id: "11", year: "2025", newEnrollments: "41", scheduledMeetings: "33", attendanceRate: "48%", classCompletionRate: "94%" },
-  { id: "12", year: "2026", newEnrollments: "66", scheduledMeetings: "66", attendanceRate: "55%", classCompletionRate: "58%" },
-]
+import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
 
 const LEAF_COUNT = "newEnrollments"
 const LEAF_SCHEDULED = "scheduledMeetings"

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import INFINITE_SCROLL_MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {
   const columnDefinitions = [
@@ -39,7 +39,7 @@ const AdvancedTableInfiniteScroll = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={INFINITE_SCROLL_MOCK_DATA}
+          tableData={MOCK_DATA}
           virtualizedRows
           {...props}
       />

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

@@ -1,8 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Caption from '../../pb_caption/_caption'
-import MOCK_DATA_INLINE_LOADING from "./advanced_table_mock_data_inline_loading.json"
-import MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN from "./advanced_table_mock_data_inline_loading_empty_children.json"
+import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -43,7 +43,7 @@ const AdvancedTableRowPinning = (props) => {
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
-          tableData={MOCK_DATA_WITH_ID}
+          tableData={MOCK_DATA}
           tableProps={{sticky: true}}
           {...props}
       >

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

@@ -0,0 +1,200 @@
+export const MOCK_DATA_INLINE_LOADING = [
+    {
+      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: "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: [
+        {
+          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/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,42 @@
+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: [],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+    },
+  ]
+