playbook_ui_docs 16.7.0.pre.alpha.play295616404 → 16.7.0.pre.alpha.tablewidths16409

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4435be509242d255150a8cfef7b87c3c09b22ccb8a765060e0ad63c98e82b32
-  data.tar.gz: c0821b18d05795cadecbfd1b5eef12680532b28bb958e3ab9f479b1c722c5a12
+  metadata.gz: e96d568eaa72edcacd44bc4c10050ba5081eeb87cd69897f39a2a0905c3ce482
+  data.tar.gz: 95fdf5ecd9dc483ed5c19840e2239eff5a1ba4563ae50bdc7531828656410557
 SHA512:
-  metadata.gz: 2327ef5e3e1b2174afc3d0a2ff47a8894d5c6688d62a84bdf41a8874d99c69668a141ca438847bcabfc1d772249f82c50b73d36983d01d7575186e00769c1777
-  data.tar.gz: f8d6530ec1d213228b99b6bfc3804be08e59c89f854be4c7027c30429bb764c7380c6a3bfa70148a22d72d576acd0bcbc3c39d1f53005a5629432c7182021f32
+  metadata.gz: d951a81873cbaf285dfb6ee687564bb987d742f01490b8c9e1db8236bcbe76857e711667f4c1f50912cc163988a3c48e149f693ccea7bd2db4fbacd08a429e0d
+  data.tar.gz: ace0a0d9a220c24b525bef7c8d4c69f95988136af3fae52cc5d5c18d65f41ae446c6d75e4ad1394bb7a0783be0f0905fe074c8f14abb660e38179cad993ba2e6

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. 

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. The Year column uses minWidth, width, and maxWidth for a compact, stable first column; other columns show background colors on headers and cells.",
       "type": "info"
     }
   },
@@ -2628,7 +2628,12 @@
               "quarter",
               "month",
               "day"
-            ]
+            ],
+            "columnStyling": {
+              "minWidth": 108,
+              "width": 124,
+              "maxWidth": 168
+            }
           },
           {
             "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. The Year column uses minWidth, width, and maxWidth for a compact, stable first column; other columns show background colors on headers and cells.",
       "type": "info"
     }
   }

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

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.7.0.pre.alpha.play295616404
+  version: 16.7.0.pre.alpha.tablewidths16409
 platform: ruby
 authors:
 - Power UX