playbook_ui_docs 16.9.0.pre.alpha.play300717269 → 16.9.0.pre.alpha.playgroundsmore17219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66ab21d40536fefbb26883f3ffecfae1dcc9351f632fde80f2ad64aeb06aa13a
-  data.tar.gz: a2573ee1b290c73025e1e8f75600ab045b9bfc1cc2042bfb01f15b0dc9d30fa3
+  metadata.gz: e7628ce4f621fc87039b362062a83883d9c3bdf76c2db5623478a97bb88bc3a2
+  data.tar.gz: 96cd08c752b7c8553a7c494b6c73bd182472eaf227f703ce79e9e07e3da4f05e
 SHA512:
-  metadata.gz: bc59a7b0b145b0da072e14773f95fb40993c8ec8aecebd17bb8637a497534b56f9263ffcb3cbeb2a34a2f1e3cdd49c5aceac1bbec3f06046a65a45cddb246023
-  data.tar.gz: 27a33f01a0ee7e9ef1b68198300776c913fbf37dcdf2ca970e3a1289bbdb19378fd1c4923ae1f0839d8193f5b7b68fc8d86556680ad897c7e6ba35e927a3423b
+  metadata.gz: b3699b83e14edcf2b743b2d527124d744811cb6d6f55a89bcb1538ca73e38705fd22a3394eb208881c4edd929bbd8ee1ab5a9ee322d00144c8cf88d0f5a7600d
+  data.tar.gz: a0ad05f12115696be6dae32c355dc4961962e137753a7400b81acd54a33ce5fcde7f476545d31f40ebcb1288374d79c4b7ad7fe0aee91c690c3ee83d43fa4e38

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

@@ -0,0 +1,92 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTableFullscreen = (props) => {
+  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
+  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
+
+  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 tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <Flex justify="end">
+          <Button
+              marginBottom="sm"
+              onClick={() => fullscreenToggleSmall?.()}
+              text="Fullscreen Small Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+      <Flex justify="end">
+          <Button
+              marginY="sm"
+              onClick={() => fullscreenToggleLarge?.()}
+              text="Fullscreen Large Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableFullscreen

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

@@ -0,0 +1,3 @@
+Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
+
+Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 import colors from '../../tokens/exports/_colors.module.scss'
 
 
@@ -55,7 +55,7 @@ const rowStyling = [
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           rowStyling={rowStyling}
-          tableData={MOCK_DATA_WITH_ID}
+          tableData={MOCK_DATA}
           {...props}
       />
     </div>

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

@@ -1,39 +1,47 @@
 <% 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",
-  },
+    {
+      accessor: "year",
+      label: "Year",
+    },
+    {
+      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: "table_props_sticky_table",
-  table_data: @table_data,
-  column_definitions: column_definitions,
-  max_height: "xs",
-  table_props: { sticky: true },
-}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -36,17 +44,18 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true,
+    sticky: true
   }
 
   return (
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        maxHeight="xs"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-        {...props}
-    />
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={tableData}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
   )
 }
 

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

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -233,6 +233,11 @@
         "customSort": true
       }
     },
+    "fullScreenControl": {
+      "requires": {
+        "allowFullScreen": true
+      }
+    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true
@@ -2949,7 +2954,9 @@
   },
   "hiddenProps": [
     "sortControl",
+    "fullScreenControl",
     "expandedControl",
+    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],

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

@@ -73,7 +73,9 @@
   },
   "hiddenProps": [
     "sortControl",
+    "fullScreenControl",
     "expandedControl",
+    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -289,6 +291,11 @@
         "customSort": true
       }
     },
+    "fullScreenControl": {
+      "requires": {
+        "allowFullScreen": true
+      }
+    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

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

@@ -23,6 +23,7 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.9.0.pre.alpha.play300717269
+  version: 16.9.0.pre.alpha.playgroundsmore17219
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-23 00:00:00.000000000 Z
+date: 2026-06-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -100,6 +100,8 @@ 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_fullscreen.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.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