playbook_ui 16.8.0.pre.alpha.tablewidths16466 → 16.8.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f46fd7de41487efa37647c36cc3d1d55e2260ccda34ff0f094dc4f3c21608c4
-  data.tar.gz: 60e1b0388423c2a75088ba9210b0e9456c27fb7a7b5822b5753f1c46f1abfa53
+  metadata.gz: bf26b3a5bc84db3c0723985d97147839159d420ec7ea3041a24ce948eb307702
+  data.tar.gz: 6aabd8a4a3b3d75c8fd5bdf423caefbfbee870867a44efd283cd5e5300a13ad0
 SHA512:
-  metadata.gz: 236bb6ec1f254c88d37bfa99aa2bb530aba234550a5635bfd19c9bb76fe0240bf818ccd4f2b859424662c2e15d1f31cae47d0831e172a9c2926e1eaa4cf3ade7
-  data.tar.gz: 63776f5d3b77b41da7a95ad4d67e89d244a0981fb8cc2220c3fc8996f5506eb2b4f94cf30989d848afc83d2104dbe17092e00851e4b4cd46ebd5a63985ddb543
+  metadata.gz: 183ca9c2fc15ecde3a04ccb900578161d4a6941c096fb7ccac1fd122f4bb9873058d510a56be5fa775504b0da702b3a65ea7f9c8f3f84b37ab5e9d0242f2a563
+  data.tar.gz: 5d44fe619ba3ab8ac29b60e45d0d365a13314c4928bf9de29128179cf6fc18ed747b1e91864c27bcb6223fd9d21d87a6a35f31345a202d98de5ff579da747ff0

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,150 +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("columnStyling width only locks minWidth and maxWidth to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 128 },
-    },
-    {
-      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({
-    width: "128px",
-    minWidth: "128px",
-    maxWidth: "128px",
-  });
-});
-
-test("columnDefinitions size only locks minSize and maxSize to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 200,
-    },
-    {
-      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: "200px",
-    minWidth: "200px",
-    maxWidth: "200px",
-  });
-});
-
-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,7 +10,6 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,10 +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: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
-
-Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
-
-See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
-
 `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.