playbook_ui 14.21.2.pre.alpha.PLAY21898327 → 14.21.2.pre.alpha.PLAY22358326

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e88a424221940101bf6f8b972a1627543b65d58fba0638a947531a44506f3d6
-  data.tar.gz: 454248993cf3019183f4769daa8fb083c44fb744d531109b5b3f0dfacd0ea414
+  metadata.gz: 775191059b582c0fb74cc6d654e3b563226fbe855b9b9f267fa4cd982955fa2f
+  data.tar.gz: fca502f3f539f439b6471b266cc211b46bb0fcba13d00189e89ce0893df0a9be
 SHA512:
-  metadata.gz: 255e3249796246518bf9cc2e4a5724dd35c16e00dd922840ced6bd1c62e97ab45b2063ddb98cc1bcff2f66b274be9a7631f45bc124999d12c9a4eaaa763dc8f0
-  data.tar.gz: 93465c931d64989d3617881a1753b16a69b4f5d68554c53a74622bc32b223f4e582b2839c67438fad9fa0d2a302260c636f9015b37b48d02ef38690ed5d200d6
+  metadata.gz: 61fc896c9d0a0a65db99048f13c0ac4fe70a1bd3a036a807759a699bbdf7a10589898f04760eed3b77fab43f664d798bf9a7731dd20f761255d9f86be68317f5
+  data.tar.gz: 923bafc7292dbf1cd30e529e20add0175ca391d4e1630c9cacb1a4f26f2696209f80acc8aca8ba96e344c60eb7ef73e211778204a9aaab0b5159403a92bad7d5

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -50,6 +50,7 @@ export function useTableState({
   columnVisibilityControl,
   pinnedRows,
 }: UseTableStateProps) {
+
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
@@ -63,8 +64,8 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
-  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
+  const rowPinning = pinnedRows?.value ?? localRowPinning
+  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -165,6 +166,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
+    onRowPinningChange,
     getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
@@ -175,6 +177,26 @@ export function useTableState({
     ...tableOptions,
   });
 
+  // Handle row pinning changes
+    useEffect(() => {
+    const topPins = pinnedRows?.value?.top ?? [];
+    if (topPins.length === 0) {
+      onRowPinningChange({ top: [] });
+      return;
+    }
+    const rows = table.getRowModel().rows;
+    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
+      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
+    const allPinned: string[] = [];
+    topPins.forEach(id => {
+      const parent = rows.find(r => r.id === id && r.depth === 0);
+      if (parent) {
+        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+      }
+    });
+    onRowPinningChange({ top: allPinned });
+  }, [table, pinnedRows?.value?.top?.join(',')]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
 
   return (
     <div>

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

@@ -1,5 +1,7 @@
-Use the `pinnedRows` 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 reorganizing via sorting.
+Use the `pinnedRows` 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.
 
-**NOTE:** This prop is in Beta. Current Requirements for V1:
+**NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually
+- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned.