playbook_ui_docs 16.11.0.pre.alpha.PLAY308717843 → 16.11.0.pre.alpha.doublealpha17836

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16199fa35aee34255b80731ea475a79cf2f90da42bafda7149d371ef09416cda
-  data.tar.gz: 8aa699eedd584c848e70b2923a84f77cdb42108a41df9c7c7417fb7e897b13a7
+  metadata.gz: dbe4162b2f38554a5b3e72cbc0bf1ecac8ff17c23b82355fbf0834da2b712c4e
+  data.tar.gz: 3cf832ce292d5d545328b424d10afbee0c9b7f2348b8d0e5d328c6c770aa8100
 SHA512:
-  metadata.gz: 5e7b655a96cad1bc78d3d9e50399490c8d5fc85a6faba248d0ffe14209c4754a7ec87de163e09f103b0a211e303ca86abe937bf01b47a946dbd2978fd66a722d
-  data.tar.gz: f72cd77a3beb55030c1710e728f3313e7cff7f4d3f2d7f412f26f9f6d5ef4786508eedd30e849e903f0d3d11cf8ac1b2bb6b88aa1b256965f8a71741dc2a1baf
+  metadata.gz: fb8408536fcba40c45124a74021b0749d24fa028f5ccefa378788fc2316837e50da727c0bb3a78d89187840de1db31eadd246a86b301566316f51db83ab27b0d
+  data.tar.gz: 9502b076480530cf88d8a038298f397ba76ca2fb0a059722e88a32b0c97e72414d61dc8f808ff948e1a5eede0974ce926780ccc5acd400a7b9862b6463e9e5eb

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

@@ -1,12 +1,15 @@
 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/styling/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/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,7 +3,6 @@
       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,12 +1,9 @@
 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.
+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`.
 
-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).
+3) `font_color`: This will allow you to control the font color for a given column.
 
-`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_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.

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

@@ -0,0 +1,40 @@
+<% 
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "skipping-subrow-headers", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "skipping-subrow-headers", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "skipping-subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+
+ const AdvancedTableSkippingSubrowHeaders = (props) => {
+      const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      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",
+    },
+  ]
+
+    const subRowHeaders = ["Quarter", "", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  );
+};
+export default AdvancedTableSkippingSubrowHeaders;

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

@@ -0,0 +1 @@
+Pass an empty string at any index in `sub_row_headers` to skip the rendering of a subrow header while still nesting the data under it.

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

@@ -0,0 +1 @@
+Pass an empty string at any index in `subRowHeaders` to skip the rendering of a subrow header while still nesting the data under it.

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

@@ -9,6 +9,7 @@
   "defaults": {
     "columnGroupBorderColor": "none",
     "enableToggleExpansion": "header",
+    "fullWidthCell": false,
     "inlineRowLoading": false,
     "loading": false,
     "responsive": "scroll",
@@ -92,7 +93,8 @@
       "name": "Column Configuration",
       "props": [
         "columnVisibilityControl",
-        "columnGroupBorderColor"
+        "columnGroupBorderColor",
+        "fullWidthCell"
       ]
     },
     {

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

@@ -160,7 +160,7 @@
     },
     {
       "name": "Column Configuration",
-      "props": ["columnVisibilityControl", "columnGroupBorderColor"]
+      "props": ["columnVisibilityControl", "columnGroupBorderColor", "fullWidthCell"]
     },
     {
       "name": "Table engine",

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_skipping_subrow_headers: Skipping Subrow Headers
   - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
@@ -12,6 +13,7 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_full_width_cell_rails: Full Width Cell
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
   - advanced_table_column_headers: Multi-Header Columns
@@ -26,7 +28,6 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_width_rails: Column Styling Width
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
   - advanced_table_background_control_rails: Column Styling Background Color
@@ -46,6 +47,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_skipping_subrow_headers: Skipping Subrow Headers
   - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
@@ -57,6 +59,7 @@ examples:
   - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_full_width_cell: Full Width Cell
   - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination

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

@@ -10,6 +10,7 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
+export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
@@ -53,5 +54,6 @@ export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advance
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
 export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
 export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableSkippingSubrowHeaders } from './_advanced_table_skipping_subrow_headers.jsx'
 export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
 export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.11.0.pre.alpha.PLAY308717843
+  version: 16.11.0.pre.alpha.doublealpha17836
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-21 00:00:00.000000000 Z
+date: 2026-07-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -78,8 +78,6 @@ files:
 - 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_styling_width_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.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
@@ -102,6 +100,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
@@ -163,6 +165,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

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

@@ -1,41 +0,0 @@
-<% 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

@@ -1,49 +0,0 @@
-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.