playbook_ui 16.7.0.pre.alpha.play2924tooltipmisalignment16298 → 16.7.0.pre.alpha.tablewidths16407

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e33b44c25c0ba6a0d5fd1892e0472a1386b6be151356b70c1e4216ba2822267
-  data.tar.gz: b8a0e8f1f004f86029489370a42f1b76015103e98e09a98284cfa3a5e9e56c4e
+  metadata.gz: 8da495f79107327990243768d12d0c686b02cd3c9139be2021b1a2502ac1091b
+  data.tar.gz: b87d04b9c001d89e1f25889e19ec812d5e882eb04b06df284bcb3feb963567ce
 SHA512:
-  metadata.gz: 6e8ae8b9fec0dd0c10a0a9a64e8d9a39a7b0fb705f89ddddbb575c90b7c18b4024b43a470e23a537581f2688e5c03b7fd281d94a25dc2ca9978501e447b81d50
-  data.tar.gz: 6005ef5a5e9d4466efbab580803cbc4b1f025321d87b1997dee9a3b8aab073f92c27580f0fdbc68e3e5dce8f244db748b3f40ef443f1fa3a8fb96b54c6ad6757
+  metadata.gz: 6b65bd11a250d2eb7de7f99b7e9c1209ef8d425244886afb6dfc744866172989ba223a981d78b92621f880c46fdb2ee3a3167776204754a430a847f1198ea71f
+  data.tar.gz: 91f38760a01e16eaaf16db868791168edbe57581cd05057e443ac3eeaffef513ebbc37451c716d65bb0591bfa0ebd022dc019c88d9cc15f62c74f5e5a78dfb25

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

@@ -5,6 +5,7 @@ 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"
@@ -94,6 +95,7 @@ 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,6 +16,7 @@ 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"
@@ -198,6 +199,7 @@ 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,6 +19,7 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -224,7 +225,10 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{ width: cellWidth }}
+                      style={{
+                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
+                        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,6 +12,10 @@ 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 {
@@ -105,11 +109,31 @@ 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/Utilities/ColumnLayoutHelper.ts

@@ -0,0 +1,123 @@
+import type { CSSProperties } from "react"
+
+import { GenericObject } from "../../types"
+
+/**
+ * Converts a Playbook column width value to a CSS length string.
+ * Numbers are treated as pixels; strings are passed through (e.g. `"12rem"`, `"200px"`).
+ */
+export function cssLength(
+  value: number | string | undefined | null
+): string | undefined {
+  if (value === undefined || value === null || value === "") return undefined
+  if (typeof value === "number" && Number.isFinite(value)) return `${value}px`
+  return String(value)
+}
+
+const columnStylingKeys = (column: GenericObject) =>
+  (column.columnStyling || column.column_styling || {}) as GenericObject
+
+function readStylingLength(
+  styling: GenericObject,
+  camel: string,
+  snake?: string
+): string | number | undefined {
+  if (snake) return styling[camel] ?? styling[snake]
+  return styling[camel] as string | number | undefined
+}
+
+/**
+ * TanStack Table v8 `ColumnDef` sizing fields we forward from each `columnDefinitions` entry.
+ * See AdvancedTable kit docs for precedence with `columnStyling` width keys.
+ */
+export const PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS = [
+  "size",
+  "minSize",
+  "maxSize",
+] as const
+
+export type PlaybookForwardedColumnSizing = Partial<
+  Record<(typeof PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS)[number], number>
+>
+
+export function buildTanStackSizingFromColumn(
+  column: GenericObject
+): PlaybookForwardedColumnSizing {
+  const out: PlaybookForwardedColumnSizing = {}
+  PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS.forEach((key) => {
+    const v = column[key]
+    if (typeof v === "number" && Number.isFinite(v)) out[key] = v
+  })
+
+  const styling = columnStylingKeys(column)
+
+  if (out.size === undefined && readStylingLength(styling, "width") !== undefined) {
+    const w = readStylingLength(styling, "width")
+    if (typeof w === "number" && Number.isFinite(w)) out.size = w
+  }
+  if (out.minSize === undefined && readStylingLength(styling, "minWidth", "min_width") !== undefined) {
+    const w = readStylingLength(styling, "minWidth", "min_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.minSize = w
+  }
+  if (out.maxSize === undefined && readStylingLength(styling, "maxWidth", "max_width") !== undefined) {
+    const w = readStylingLength(styling, "maxWidth", "max_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.maxSize = w
+  }
+
+  return out
+}
+
+/**
+ * Inline width styles for `<th>` / `<td>` so `table-layout: fixed` tables keep stable
+ * columns when row content changes (e.g. expand/collapse). Values mirror TanStack sizing
+ * and/or `columnStyling` width keys; string values in `columnStyling` win over numeric
+ * TanStack fields when both describe the same axis.
+ */
+export function buildPlaybookColumnLayoutStyles(
+  column: GenericObject,
+  tanStackSizing: PlaybookForwardedColumnSizing
+): CSSProperties {
+  const styling = columnStylingKeys(column)
+  const styles: CSSProperties = {}
+
+  const widthFromStyling = cssLength(
+    readStylingLength(styling, "width") as string | number | undefined
+  )
+  const minFromStyling = cssLength(
+    readStylingLength(styling, "minWidth", "min_width") as string | number | undefined
+  )
+  const maxFromStyling = cssLength(
+    readStylingLength(styling, "maxWidth", "max_width") as string | number | undefined
+  )
+
+  const widthFromTanStack =
+    tanStackSizing.size !== undefined
+      ? cssLength(tanStackSizing.size)
+      : undefined
+  const minFromTanStack =
+    tanStackSizing.minSize !== undefined
+      ? cssLength(tanStackSizing.minSize)
+      : undefined
+  const maxFromTanStack =
+    tanStackSizing.maxSize !== undefined
+      ? cssLength(tanStackSizing.maxSize)
+      : undefined
+
+  if (widthFromStyling !== undefined) styles.width = widthFromStyling
+  else if (widthFromTanStack !== undefined) styles.width = widthFromTanStack
+
+  if (minFromStyling !== undefined) styles.minWidth = minFromStyling
+  else if (minFromTanStack !== undefined) styles.minWidth = minFromTanStack
+
+  if (maxFromStyling !== undefined) styles.maxWidth = maxFromStyling
+  else if (maxFromTanStack !== undefined) styles.maxWidth = maxFromTanStack
+
+  return styles
+}
+
+export function playbookColumnLayoutStylesFromMeta(
+  columnDef: GenericObject | undefined
+): CSSProperties {
+  const meta = columnDef?.meta as GenericObject | undefined
+  return (meta?.playbookColumnLayoutStyles || {}) as CSSProperties
+}

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

@@ -774,6 +774,82 @@ 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,6 +10,8 @@ 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,4 +6,14 @@ 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.