playbook_ui_docs 16.8.0.pre.alpha.PLAY2979dropdownmlsportaling16471 → 16.8.0.pre.alpha.tablewidths16466

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ffa0bc1fba3053f9d494b2ad50d5567c9610f60fa20c4b1d3db444f863e5456c
-  data.tar.gz: a2a97c563560ef66b8cb768e37ee656c5ca0fbbc6da8567e0f1f726c659d5fe1
+  metadata.gz: a4a5e81cd31c0d38280588522f04530ebed412ae7dd97e3f133f33a711f18f22
+  data.tar.gz: 31ec29d1d89ae6eeb9727f19f901dac411a54286849e3368e7bfce86b8d45da7
 SHA512:
-  metadata.gz: 2858acac0e2625f91505d343ef2458ed97830ba6ecaa5ca3c491dbab6229282245b6cefabae4bfcf5cdb5f2ce4abafcd31f3e2ba35d9426c39d6ac198541570a
-  data.tar.gz: a63d18c745bc5a86687a48463cb66226d7dd4b2426e09ece9a361b20ce38abdf14928df9c4d331a49fb3359a7060ada6b9d331188da59e3638dddb9981b17b4b
+  metadata.gz: e67d827e70c76cf3bd597542561c57766ec95035b996538ad5a255b41923439b7efe6f9cec3544f08996680bbc958164a3d7d0b21ae12ea1fb8fd88813cb4cb1
+  data.tar.gz: 1080f84fb743aae5f061243fc9dd3f0e0534d9aae408b6cade6a0ca045ffecca5446eaf8aa50793cdc31b2365c028da41088b2e376c78658868986894995bc65

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

@@ -10,6 +10,7 @@ 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,4 +6,10 @@ 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. 

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

@@ -0,0 +1,57 @@
+import React from "react"
+import AdvancedTable from "../_advanced_table"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+/**
+ * Kit doc: compares fixed width, floor-only, TanStack band, and min/preferred/max band.
+ */
+const AdvancedTableColumnStylingWidth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year (fixed)",
+      cellAccessors: ["quarter", "month", "day"],
+      // width alone locks min + max to the same value (128px).
+      columnStyling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "Enrollments (floor)",
+      columnStyling: { minWidth: 160 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Meetings (TanStack band)",
+      size: 200,
+      minSize: 160,
+      maxSize: 240,
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance (min / pref / max)",
+      columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Completion %",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated",
+    },
+  ]
+
+  return (
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        tableData={MOCK_DATA}
+        {...props}
+    />
+  )
+}
+
+export default AdvancedTableColumnStylingWidth

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

@@ -0,0 +1,66 @@
+AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
+
+1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
+
+- Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
+- Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
+- Maximum width (ceiling): `columnStyling` `maxWidth` maps to TanStack `maxSize`.
+
+Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g. `"12rem"`, `"200px"`). TanStack fields accept numbers only.
+
+If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
+
+2) Fixed width: set `width` only
+
+If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
+
+```jsx
+columnStyling: { width: 128 }
+// Applied as width, minWidth, and maxWidth: 128px
+```
+
+```jsx
+size: 200
+// Forwarded as size, minSize, and maxSize: 200
+```
+
+Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
+
+3) Floor only: `minWidth` / `minSize`
+
+Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
+
+```jsx
+columnStyling: { minWidth: 160 }
+```
+
+4) Flexible band: min + preferred + max
+
+Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
+
+- `minWidth`: won’t shrink below this.
+- `width`: preferred size when space allows.
+- `maxWidth`: won’t grow above this.
+
+Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWidth: 168` → preferred 124px, allowed between 108 and 168.
+
+You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
+
+5) TanStack band without `columnStyling`
+
+The Meetings column uses only TanStack fields:
+
+```jsx
+{ accessor: "scheduledMeetings", size: 200, minSize: 160, maxSize: 240 }
+```
+
+Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
+
+6) What the example table shows
+
+- Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
+- Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.
+- Meetings (TanStack band): `size` / `minSize` / `maxSize` — preferred 200px, between 160–240.
+- Attendance (min / pref / max): all three in `columnStyling` — preferred 124px, between 108–168.
+
+Grouped columns: put width options on leaf definitions (columns with an `accessor`), not on parent group headers.

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -313,7 +313,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
       "type": "info"
     }
   },
@@ -2628,7 +2628,10 @@
               "quarter",
               "month",
               "day"
-            ]
+            ],
+            "columnStyling": {
+              "width": 124
+            }
           },
           {
             "accessor": "newEnrollments",

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -371,7 +371,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -2,7 +2,10 @@
   {
     "accessor": "year",
     "label": "Year",
-    "cellAccessors": ["quarter", "month", "day"]
+    "cellAccessors": ["quarter", "month", "day"],
+    "columnStyling": {
+      "width": 124
+    }
   },
   {
     "accessor": "newEnrollments",

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -80,6 +80,7 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
+  - advanced_table_column_styling_width: Column Styling Width
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
   - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)

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

@@ -37,6 +37,7 @@ export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_row
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
+export { default as AdvancedTableColumnStylingWidth } from './_advanced_table_column_styling_width.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.8.0.pre.alpha.PLAY2979dropdownmlsportaling16471
+  version: 16.8.0.pre.alpha.tablewidths16466
 platform: ruby
 authors:
 - Power UX
@@ -76,6 +76,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx