From 874ce10caf60a40807193385e0119b4c1801a6dd Mon Sep 17 00:00:00 2001
From: David Porter <david@oneblink.io>
Date: Tue, 3 Feb 2026 21:07:26 +1100
Subject: [PATCH] AP-6791 # fix column sizes not being computed when repeatable
 set injected

---
 CHANGELOG.md                                  |  4 +
 .../formStore/OneBlinkFormStoreTable.tsx      | 99 ++++++++++---------
 2 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea5f12ef..43243e64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Columns not sizing correctly when headers change
+
 ## [9.0.0] - 2026-02-02
 
 ### Added
diff --git a/src/components/formStore/OneBlinkFormStoreTable.tsx b/src/components/formStore/OneBlinkFormStoreTable.tsx
index ce0cad75..dcd48e5a 100644
--- a/src/components/formStore/OneBlinkFormStoreTable.tsx
+++ b/src/components/formStore/OneBlinkFormStoreTable.tsx
@@ -119,6 +119,7 @@ function OneBlinkFormStoreTable() {
   const columnSizingInfo = getState().columnSizingInfo
   const columnSizing = getState().columnSizing
   const visibleColumns = getState().columnVisibility
+  const flatHeaders = getFlatHeaders()
 
   /**
    * Pinched from
@@ -135,11 +136,10 @@ function OneBlinkFormStoreTable() {
     columnSizingInfo
     columnSizing
     /* eslint-enable @typescript-eslint/no-unused-expressions */
-    const headers = getFlatHeaders()
     const colSizes: { [key: string]: number } = {}
-    for (const header of headers) {
+    for (const header of flatHeaders) {
       // This check isn't actually necessary, but `visibleColumns` is required as a dependency
-      // to force a re-calculation of the memo when the columns are hidden/show, 
+      // to force a re-calculation of the memo when the columns are hidden/show,
       // so we use it here do get around having to ignore eslint dep reules
       if (visibleColumns[header.column.id] === false) {
         continue
@@ -148,7 +148,7 @@ function OneBlinkFormStoreTable() {
       colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
     }
     return colSizes
-  }, [getFlatHeaders, columnSizingInfo, columnSizing, visibleColumns])
+  }, [flatHeaders, columnSizingInfo, columnSizing, visibleColumns])
 
   if (!parentHeaderGroup) {
     return null
@@ -192,50 +192,50 @@ function OneBlinkFormStoreTable() {
                       onClick={
                         sortingProperty
                           ? () => {
-                            onChangeParameters(
-                              (
-                                currentParameters: formStoreService.FormStoreParameters,
-                              ) => {
-                                const sortingMeta =
-                                  header.column.columnDef.meta?.sorting
-                                    ?.property
-                                if (!sortingMeta) {
-                                  return currentParameters
-                                }
-                                switch (sortingDirection) {
-                                  case 'asc': {
-                                    return {
-                                      ...currentParameters,
-                                      sorting: [
-                                        {
-                                          property: sortingMeta,
-                                          direction: 'descending',
-                                        },
-                                      ],
-                                    }
+                              onChangeParameters(
+                                (
+                                  currentParameters: formStoreService.FormStoreParameters,
+                                ) => {
+                                  const sortingMeta =
+                                    header.column.columnDef.meta?.sorting
+                                      ?.property
+                                  if (!sortingMeta) {
+                                    return currentParameters
                                   }
-                                  case 'desc': {
-                                    return {
-                                      ...currentParameters,
-                                      sorting: undefined,
+                                  switch (sortingDirection) {
+                                    case 'asc': {
+                                      return {
+                                        ...currentParameters,
+                                        sorting: [
+                                          {
+                                            property: sortingMeta,
+                                            direction: 'descending',
+                                          },
+                                        ],
+                                      }
                                     }
-                                  }
-                                  default: {
-                                    return {
-                                      ...currentParameters,
-                                      sorting: [
-                                        {
-                                          property: sortingMeta,
-                                          direction: 'ascending',
-                                        },
-                                      ],
+                                    case 'desc': {
+                                      return {
+                                        ...currentParameters,
+                                        sorting: undefined,
+                                      }
+                                    }
+                                    default: {
+                                      return {
+                                        ...currentParameters,
+                                        sorting: [
+                                          {
+                                            property: sortingMeta,
+                                            direction: 'ascending',
+                                          },
+                                        ],
+                                      }
                                     }
                                   }
-                                }
-                              },
-                              false,
-                            )
-                          }
+                                },
+                                false,
+                              )
+                            }
                           : undefined
                       }
                       style={{
@@ -256,8 +256,8 @@ function OneBlinkFormStoreTable() {
                               sx={
                                 sortingDirection === 'asc'
                                   ? {
-                                    transform: 'rotate(180deg)',
-                                  }
+                                      transform: 'rotate(180deg)',
+                                    }
                                   : undefined
                               }
                               className="th-icon"
@@ -329,7 +329,8 @@ function OneBlinkFormStoreTable() {
                 <CellRow
                   key={row.id}
                   className={clsx('tr ob-form-store-table-row', {
-                    'ob-form-store-table-row__alternate': rowBackground.alternate,
+                    'ob-form-store-table-row__alternate':
+                      rowBackground.alternate,
                   })}
                 >
                   {
@@ -345,7 +346,9 @@ function OneBlinkFormStoreTable() {
                               'is-resizing': cell.column.getIsResizing(),
                             },
                           )}
-                          style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
+                          style={{
+                            width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                          }}
                         >
                           {
                             // Render the cell contents