playbook_ui 16.11.0 → 16.12.0.pre.alpha.ATtest18202

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16a0086344baadee77f341a61750610660a71b76eabdad447dec109ff805f1aa
-  data.tar.gz: e4c1fd8c808af94224a1243501cf329c88192d8ff6301116fb2c6bf47ba78242
+  metadata.gz: e84fbc3f83d86ebdfea1f090f7fa2e4e9d0327be6d9f5299f9e1ae76713abcd9
+  data.tar.gz: 3aa90c06a1cde5a01a74e6adff6afb04ed391074600617cbc763c609afce4cbe
 SHA512:
-  metadata.gz: ef55538af46ea4cf3a3dbcaa91ccd6d8581966c534ede08ac61571ee2d6c5c4da8c37a457724e6c742cdbb4e76762c380ddf65ca7c5becb19bc552e6c05f03c4
-  data.tar.gz: d3dfa30a3cfb251fb6b330cedb7456746cdd51a1820c3620e858099747b6484c966edb3e23501ecacd47855f5bbe769caaf5c5b9294f5e68cd1795de1070bb7f
+  metadata.gz: 0aa917e55ff4285b13c44ccf8b50acd70b6aea6ec31e3316ab51880f90b86b1f16a5c62135d59cdd3545f3084806f5f3ffbb7dccbca6317e2f44d56a4c8d71d2
+  data.tar.gz: 3387ad8a04404ad1f0c3b66dc47b8ea45eccff7f2514de0ea912af94ce486210806a0e297b32eeb96ebe0a3857d66638c2eeaf1921692e8a26c0521e69c9a278

data/app/pb_kits/playbook/_playbook.scss

@@ -41,7 +41,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -120,6 +119,7 @@
 @import 'utilities/line_height';
 @import 'utilities/display';
 @import 'utilities/flexbox';
+@import 'utilities/grid';
 @import 'utilities/focus';
 @import 'utilities/border_radius';
 @import 'utilities/hover';

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

@@ -21,6 +21,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
+  fullWidthCell?: boolean
 } 
 
 export const CustomCell = ({
@@ -31,6 +32,7 @@ export const CustomCell = ({
   customRenderer,
   selectableRows,
   customStyle = {},
+  fullWidthCell,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
 
@@ -58,7 +60,7 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em`, ...(fullWidthCell ? { width: "100%" } : {}) }}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
@@ -89,12 +91,15 @@ export const CustomCell = ({
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"    
+                  icon="circle-play"
                />
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={renderButton? "none" : "xs"}>
+        <FlexItem
+            paddingLeft={renderButton? "none" : "xs"}
+            width={fullWidthCell ? "100%" : undefined}
+        >
           {row.depth === 0 ? (
             customRenderer ? customRenderer(row, getValue()) : getValue()
            ) :(

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

@@ -213,6 +213,8 @@ export const RegularTableView = ({
       ))}
       {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
+        const subRowHeaderText = subRowHeaders?.[row.depth - 1]?.trim();
+        const shouldRenderSubRowHeader = isFirstChildofSubrow && !!subRowHeaderText;
         const numberOfColumns = table.getAllFlatColumns().length;
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         const customRowStyle = getRowStyle(rowStyling, row);
@@ -223,7 +225,7 @@ export const RegularTableView = ({
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
-            {isFirstChildofSubrow && subRowHeaders && (
+            {shouldRenderSubRowHeader && (
               <SubRowHeaderRow
                   collapsibleTrail={collapsibleTrail}
                   enableToggleExpansion={enableToggleExpansion}

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

@@ -42,6 +42,7 @@ interface UseTableStateProps {
   rowStyling?: GenericObject[];
   inlineRowLoading?: boolean;
   sortParentOnly?: boolean;
+  fullWidthCell?: boolean;
 }
 
 export function useTableState({
@@ -62,7 +63,8 @@ export function useTableState({
   pinnedRows,
   rowStyling,
   inlineRowLoading = false,
-  sortParentOnly = false
+  sortParentOnly = false,
+  fullWidthCell = false,
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -145,13 +147,14 @@ export function useTableState({
           isFirstColumn,
           onRowToggleClick,
           selectableRows,
-          rowStyling
+          rowStyling,
+          fullWidthCell
         );
       }
 
       return columnStructure;
     }) || [];
-  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
+  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows, fullWidthCell]);
 
   const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
 

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -12,6 +12,8 @@ import { getRowStyle } from "./RowUtils";
  * @param isFirstColumn Whether this is the first column (special handling)
  * @param onRowToggleClick Optional callback for row toggle
  * @param selectableRows Whether rows are selectable
+ * @param rowStyling Optional row styling configuration
+ * @param fullWidthCell Whether first-column cell content should take full width
  */
 export const createCellFunction = (
   cellAccessors: string[],
@@ -19,7 +21,8 @@ export const createCellFunction = (
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
   selectableRows?: boolean,
-  rowStyling?: GenericObject[]
+  rowStyling?: GenericObject[],
+  fullWidthCell?: boolean
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -39,6 +42,7 @@ export const createCellFunction = (
             <CustomCell
                 customRenderer={customRenderer}
                 customStyle={customStyle}
+                fullWidthCell={fullWidthCell}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
@@ -54,6 +58,7 @@ export const createCellFunction = (
             <CustomCell
                 customRenderer={customRenderer}
                 customStyle={customStyle}
+                fullWidthCell={fullWidthCell}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
                 selectableRows={selectableRows}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -475,6 +475,11 @@
     width: 18px;
     height: 18px;
     border-radius: 50%;
+
+    .pb_custom_icon {
+      width: 17px !important;
+      height: 17px !important;
+    }
   }
 
   .header-sort-button {

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -36,6 +36,7 @@ type AdvancedTableProps = {
   expandedControl?: GenericObject
   expandByDepth?: GenericObject[]
   onExpandByDepthClick?: (arg: number, arg1: any) => void
+  fullWidthCell?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -98,6 +99,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expandedControl,
     expandByDepth,
     onExpandByDepthClick,
+    fullWidthCell = false,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -164,7 +166,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pinnedRows,
     rowStyling,
     inlineRowLoading,
-    sortParentOnly
+    sortParentOnly,
+    fullWidthCell,
   });
 
   // Initialize table actions

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -35,6 +35,8 @@ module Playbook
                          default: []
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
+      prop :full_width_cell, type: Playbook::Props::Boolean,
+                             default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
       prop :pinned_rows, type: Playbook::Props::HashProp,

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

@@ -1,7 +1,8 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill, colors } from "playbook-ui"
+import { AdvancedTable } from "playbook-ui/advanced-table"
+import { Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}

data/app/pb_kits/playbook/pb_advanced_table/column_layout_helper.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    # Mirrors React ColumnLayoutHelper: maps column_styling width keys to inline
+    # styles on header/body cells so columns stay stable when rows expand/collapse.
+    module ColumnLayoutHelper
+      # Converts a Playbook column width value to a CSS length string.
+      # Numbers are treated as pixels; strings are passed through (e.g. "12rem", "200px").
+      def css_length(value)
+        return nil if value.nil? || value == ""
+
+        return "#{value}px" if value.is_a?(Numeric)
+
+        value.to_s
+      end
+
+      # Reads a styling length from column_styling, accepting snake_case or camelCase keys.
+      def read_styling_length(styling, *keys)
+        return nil unless styling.is_a?(Hash)
+
+        keys.each do |key|
+          value = styling[key] || styling[key.to_s] || styling[key.to_sym]
+          return value unless value.nil?
+        end
+        nil
+      end
+
+      # Builds layout styles from a column definition that may include :column_styling.
+      def build_column_layout_styles_from_column(column)
+        return {} unless column.is_a?(Hash)
+
+        styling = column[:column_styling] || column["column_styling"] || {}
+        build_column_layout_styles(styling)
+      end
+
+      # Inline width styles for <th> / <td>. Returns a hash with :width, :min_width,
+      # and/or :max_width (CSS length strings). KitBase converts snake_case keys to
+      # kebab-case CSS properties.
+      #
+      # If only +width+ is set (no min/max), all three are locked to that value.
+      def build_column_layout_styles(styling)
+        return {} unless styling.is_a?(Hash) && styling.present?
+
+        styling_width = read_styling_length(styling, :width, "width")
+        styling_min = read_styling_length(styling, :min_width, "min_width", :minWidth, "minWidth")
+        styling_max = read_styling_length(styling, :max_width, "max_width", :maxWidth, "maxWidth")
+
+        has_width = !styling_width.nil? && styling_width != ""
+        has_min = !styling_min.nil? && styling_min != ""
+        has_max = !styling_max.nil? && styling_max != ""
+
+        width_value = has_width ? styling_width : nil
+        min_value = has_min ? styling_min : nil
+        max_value = has_max ? styling_max : nil
+
+        if has_width && !has_min && !has_max
+          min_value = styling_width
+          max_value = styling_width
+          width_value = styling_width
+        end
+
+        styles = {}
+        width_css = css_length(width_value)
+        min_css = css_length(min_value)
+        max_css = css_length(max_value)
+
+        styles[:width] = width_css if width_css
+        styles[:min_width] = min_css if min_css
+        styles[:max_width] = max_css if max_css
+
+        styles
+      end
+    end
+  end
+end

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

@@ -1,15 +1,12 @@
 The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
-1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-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).
+1. `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+2. `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+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).
+See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/styling/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_rails.html.erb

@@ -3,6 +3,7 @@
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
+      column_styling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -1,9 +1,12 @@
 The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
 3) `font_color`: This will allow you to control the font color for a given column.
+4) Column width: optional keys on `column_styling` are `min_width`, `width`, and `max_width` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `min_width` and bands).
+
+Fixed width: pass `width` 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/styling/rails#column-styling-width) for the full guide (floor-only vs bands, and when to use one vs three values).
 
-`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 
+`column_styling` can be used within the column_definition 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.md

@@ -1,6 +1,6 @@
 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:
+**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`.
@@ -10,7 +10,7 @@ Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g
 
 If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
 
-2) Fixed width: set `width` only
+**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.
 
@@ -26,7 +26,7 @@ size: 200
 
 Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
 
-3) Floor only: `minWidth` / `minSize`
+**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):
 
@@ -34,7 +34,7 @@ Set only a minimum when the column may grow with the table or content but must n
 columnStyling: { minWidth: 160 }
 ```
 
-4) Flexible band: min + preferred + max
+**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`:
 
@@ -46,7 +46,7 @@ Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWi
 
 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`
+**5)** TanStack band without `columnStyling`
 
 The Meetings column uses only TanStack fields:
 
@@ -56,7 +56,7 @@ The Meetings column uses only TanStack fields:
 
 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
+**6)** What the example table shows
 
 - Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
 - Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.html.erb

@@ -0,0 +1,41 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year (fixed)",
+      cellAccessors: ["quarter", "month", "day"],
+      # width alone locks min + max to the same value (128px).
+      column_styling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "Enrollments (floor)",
+      column_styling: { min_width: 160 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Meetings (preferred)",
+      column_styling: { width: 200, min_width: 160, max_width: 240 },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance (min / pref / max)",
+      column_styling: { min_width: 108, width: 124, max_width: 168 },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Completion %",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated",
+    },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling-width", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-width", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-width", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1,49 @@
+AdvancedTable column width is controlled on each leaf `column_definitions` entry via `column_styling`. Playbook maps these keys to inline styles on header and body cells.
+
+**1)** `column_styling` width keys:
+
+- Preferred / target width: `width`
+- Minimum width (floor): `min_width`
+- Maximum width (ceiling): `max_width`
+
+Numbers are pixels. You can also pass CSS length strings (e.g. `"12rem"`, `"200px"`).
+
+**2)** Fixed width: set `width` only
+
+If you pass only `width` and do not set `min_width` / `max_width`, 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.
+
+```ruby
+column_styling: { width: 128 }
+# Applied as width, min-width, and max-width: 128px
+```
+
+Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
+
+**3)** Floor only: `min_width`
+
+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):
+
+```ruby
+column_styling: { min_width: 160 }
+```
+
+**4)** Flexible band: min + preferred + max
+
+Set two or three values when you want a range. CSS uses preferred `width` clamped between `min_width` and `max_width`:
+
+- `min_width`: won’t shrink below this.
+- `width`: preferred size when space allows.
+- `max_width`: won’t grow above this.
+
+Example from the table below (Attendance): `min_width: 108`, `width: 124`, `max_width: 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)** What the example table shows
+
+- Year (fixed): `column_styling: { width: 128 }` — locked to 128px.
+- Enrollments (floor): `column_styling: { min_width: 160 }` — at least 160px; can grow.
+- Meetings (preferred): `width` / `min_width` / `max_width` — preferred 200px, between 160–240.
+- Attendance (min / pref / max): all three — 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/_advanced_table_full_width_cell.jsx

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Flex from "../../pb_flex/_flex"
+import Badge from "../../pb_badge/_badge"
+import Title from "../../pb_title/_title"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableFullWidthCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      customRenderer: (row, value) => (
+        <Flex justify="between">
+          <Title size={4}
+              text={value}
+          />
+          <Badge dark
+              marginLeft="xxs"
+              text={row.original.newEnrollments > 20 ? "High" : "Low"}
+              variant="neutral"
+          />
+        </Flex>
+      ),
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          fullWidthCell
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableFullWidthCell

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

@@ -0,0 +1,3 @@
+`fullWidthCell` is an optional boolean prop that defaults to `false`. When set to `true`, the first column's cell content takes up the full available width of the cell.
+
+This is especially useful with custom cell renderers that need horizontal space — for example, a `Flex` with `justify="between"` that places content on both the left and right edges of the cell.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb

@@ -0,0 +1,49 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      custom_renderer: ->(row, value) {
+        capture do
+          pb_rails("flex", props: { justify: "between" }) do
+            pb_rails("title", props: { text: value, size: 4 }) +
+            pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" })
+          end
+        end
+      }
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: {
+  id: "full_width_cell",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all",
+  full_width_cell: true
+}) %>

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

@@ -0,0 +1,3 @@
+`full_width_cell` is an optional boolean prop that defaults to `false`. When set to `true`, the first column's cell content takes up the full available width of the cell.
+
+This is especially useful with custom cell renderers that need horizontal space — for example, a `Flex` with `justify: "between"` that places content on both the left and right edges of the cell.