playbook_ui 16.12.0.pre.rc.1 → 16.12.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0cbc758e63f9d4d5dbf201736dbd86f6c922ff025a8209c163264ce8a186f54
-  data.tar.gz: 87b94773628bf6591d5b7eb136ffa26441a8519b160afca6e4e6ea326a819b4b
+  metadata.gz: bfd216d4f2b888b976c65a9d5a7a9f3b85c980873d2ea731f1f8e9e625b6bb7a
+  data.tar.gz: ef14fc5a7b4c3674b796589c4ed64191c396cbbc0a8a2a5f01e5c4e86c7494b6
 SHA512:
-  metadata.gz: c91ae82e2bc2c6631192f52806cf76db101b0002a321012201b216ff928df6bf28a34692a85cfeb540191fc4d194807af8a653012e0bab25de93470dbd9e1891
-  data.tar.gz: c69a780ec1d5d6f71cfb7b6f1a33199874bb777929b850390040410e911e4c98b99ae50f60bac02488a3ec8e39b4eda25337703a884d0059aedc1f7f8aa518d6
+  metadata.gz: c1d9b48277949ea6ec17fe88bc0705fb3259f9f38338d2f3715aadc4213f63866f0a498dd55935e8d71a1d18da581fd64091a01d3f81a7b56f9b150d132ac8c4
+  data.tar.gz: 6ac44566fc4ae3fd9122504aab547d6a1b2da04f29e1355092ceca453ef906bcaf176f73c36522746420f169624248fde9989cf923a7b6c4edf7f770c748037f

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_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
@@ -45,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
@@ -56,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'

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -92,6 +92,14 @@
         "react"
       ]
     },
+    "fullWidthCell": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "initialLoadingRowsCount": {
       "type": "number",
       "platforms": [

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

@@ -27,6 +27,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 :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
@@ -89,7 +91,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        row_props = { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading }
+        row_props = { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading, full_width_cell: full_width_cell }
         if is_pinned_row && next_pinned_index
           row_props[:is_pinned_row] = true
           row_props[:pinned_index] = next_pinned_index

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

@@ -26,7 +26,7 @@
                     <% end %>
                 <% end %>
 
-                <div style="padding-left: <%= depth * 1.25 %>em">
+                <div style="padding-left: <%= depth * 1.25 %>em;<%= ' width: 100%;' if index.zero? && object.full_width_cell %>">
                     <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                         <% if index.zero? %>
                             <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
@@ -47,7 +47,7 @@
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item", props: (index.zero? && object.full_width_cell ? { width: "100%" } : {})) do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.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 :is_pinned_row, type: Playbook::Props::Boolean,
                            default: false
       prop :pinned_index, type: Playbook::Props::Numeric,

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.html.erb

@@ -1 +1,8 @@
-<%= react_component('DistributionBar', object.chart_options) %>
+<%= pb_content_tag do %>
+  <% widths_to_percentages.each_with_index do |percentage, index| %>
+    <div
+      class="<%= segment_classname(index) %>"
+      style="width: <%= percentage %>%;"
+    ></div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -21,12 +21,9 @@ module Playbook
         end
       end
 
-      def chart_options
-        {
-          size: size,
-          widths: widths,
-          colors: colors,
-        }
+      def segment_classname(index)
+        color = colors[index]
+        ["pb_distribution_width", ("color_#{color}" if color.present?)].compact.join(" ")
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb

@@ -0,0 +1,67 @@
+<%
+  sections = [
+    {
+      title: "Profile",
+      items: [
+        { label: "View Profile", value: "profile", id: "profile" },
+        { label: "Account Settings", value: "settings", id: "settings" },
+      ],
+    },
+    {
+      title: "Workspace",
+      items: [
+        { label: "Projects", value: "projects", id: "projects" },
+        { label: "Billing", value: "billing", id: "billing" },
+      ],
+    },
+    {
+      title: "Support",
+      items: [
+        { label: "Help Center", value: "help", id: "help" },
+        { label: "Contact Support", value: "contact", id: "contact" },
+      ],
+    },
+  ]
+
+  options = sections.flat_map { |section| section[:items] }
+%>
+
+<%= pb_rails("dropdown", props: { label: "Grouped Options", margin_bottom: "md", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% sections.each do |section| %>
+
+      <%= pb_rails("caption", props: {
+        text: section[:title],
+        color: "light",
+        padding_x: "xs",
+        padding_y: "xs"
+      }) %>
+
+      <%= pb_rails("section_separator") %>
+
+      <% section[:items].each do |option| %>
+        <%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
+      <% end %>
+
+    <% end %>
+  <% end %>
+<% end %>
+
+
+<%= pb_rails("dropdown", props: { label: "Grouped Options Minimalist", options: options, separators: false }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% sections.each do |section| %>
+
+      <%= pb_rails("section_separator", props: { padding_y: "xs" }) do %>
+        <%= pb_rails("caption", props: { text: section[:title], padding_x: "xs" }) %>
+      <% end %>
+
+      <% section[:items].each do |option| %>
+        <%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
+      <% end %>
+
+    <% end %>
+  <% end %>
+<% end %>