playbook_ui 16.11.0.pre.alpha.PLAY308717843 → 16.11.0.pre.alpha.bettermetadata18084

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00db3d23c89ba37db73a4991f6df1fe6642c7ad40790dea3523d91d27a6eac09
-  data.tar.gz: e10a651ffc72c33c9ad69f93a61ab4a7b617552a86adbaf810cc0b2521c496b4
+  metadata.gz: dc8efac2071a693a945c9ad2b6bdd0ce9e7c092250ad1912188e33a24a2ed86e
+  data.tar.gz: 4c02ea4ad383b32bc3a153172ebb4a838c5f540d2d893d635e76ff8b55fa346b
 SHA512:
-  metadata.gz: 1cc120b2aade21a5e4835307a8fcc5efefe19e69b5f245b8f964b62a6bb04392dd13d9d11670762ae95196239ab64a14bf8c2e2f6f0a63af9137f534e21a9b1d
-  data.tar.gz: c01f8df2a5af7711620e408c50848a5f2ca28139d2c8d4f00e2a67c288d799b33183c5877978750300ac7e9d93f14e6f4dc8b5e7e769291002c0ae14715ad7de
+  metadata.gz: 37e1d808f292e4f6190b49305d9adfdedb1ee03b5e034c06f98b186164bb90c26f64d433b294e4803bb655598ad4f110d7148fbb004e53d6ac3834c0c0e5644f
+  data.tar.gz: 58f3be19870b5bbc06d6a4852dc171c76040410536636319f74db242e255b3a5014d1f070a273d32e56a4846fd5d37392f253307824a4f386aea1335a1914cef

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"
@@ -94,7 +96,10 @@ export const CustomCell = ({
             )}
           </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.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/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_pinned_rows_both_rails.html.erb

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_both_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_both_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      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",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"], bottom: ["1"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_both_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to both the `top` and `bottom` keys.

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

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_bottom_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_bottom_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      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",
+    }
+] %>
+
+<% pinned_rows = { bottom: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_bottom_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to the `bottom` key.

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

@@ -19,8 +19,8 @@
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
       sort_menu: [
-        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
-        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+        { item: "Year", link: "?sort=year_asc#pinned_rows_top_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_top_table", active: params["sort"] == "year_desc", direction: "desc" }
       ],
     },
     {
@@ -51,7 +51,7 @@
 
 <% pinned_rows = { top: ["8"] } %>
 
-<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_top_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
 <% end %>

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

@@ -1,7 +1,7 @@
-Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinned_rows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:**
 - Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
-- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
-- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
+- `pinned_rows` takes a hash with a `top` and/or `bottom` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]` or `pinned_rows[:bottom]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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,8 +9,10 @@
   "defaults": {
     "columnGroupBorderColor": "none",
     "enableToggleExpansion": "header",
+    "fullWidthCell": false,
     "inlineRowLoading": false,
     "loading": false,
+    "maxHeight": "auto",
     "responsive": "scroll",
     "scrollBarNone": false,
     "selectableRows": false,
@@ -92,7 +94,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,15 +3,19 @@ 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
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
+  - advanced_table_pinned_rows_rails: Pinned Rows (Top)
+  - advanced_table_pinned_rows_bottom_rails: Pinned Rows (Bottom)
+  - advanced_table_pinned_rows_both_rails: Pinned Rows (Both)
   - 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
@@ -46,6 +50,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 +62,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