From f812162a26a45d3f46e30826aa8cf3113d7d45ab Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 18 Apr 2026 20:51:14 +0100
Subject: [PATCH] fix(base): refresh grid headers when a property is renamed

---
 .../features/base/components/base-table.tsx   |  1 +
 .../base/components/grid/grid-container.tsx   |  5 ++++-
 .../base/components/grid/grid-header-cell.tsx |  5 ++---
 .../base/components/grid/grid-header.tsx      | 20 +++++++++++++++----
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/features/base/components/base-table.tsx b/apps/client/src/features/base/components/base-table.tsx
index 0315ccd5..0f2fdf6f 100644
--- a/apps/client/src/features/base/components/base-table.tsx
+++ b/apps/client/src/features/base/components/base-table.tsx
@@ -186,6 +186,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
       />
       <GridContainer
         table={table}
+        properties={base.properties}
         onCellUpdate={handleCellUpdate}
         onAddRow={handleAddRow}
         baseId={baseId}
diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx
index b38eaf5e..28754e00 100644
--- a/apps/client/src/features/base/components/grid/grid-container.tsx
+++ b/apps/client/src/features/base/components/grid/grid-container.tsx
@@ -16,7 +16,7 @@ import {
   horizontalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import { IBaseRow, EditingCell } from "@/features/base/types/base.types";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
 import { editingCellAtom, activePropertyMenuAtom, propertyMenuDirtyAtom, propertyMenuCloseRequestAtom } from "@/features/base/atoms/base-atoms";
 import { useColumnResize } from "@/features/base/hooks/use-column-resize";
 import { useGridKeyboardNav } from "@/features/base/hooks/use-grid-keyboard-nav";
@@ -34,6 +34,7 @@ const OVERSCAN = 10;
 
 type GridContainerProps = {
   table: Table<IBaseRow>;
+  properties: IBaseProperty[];
   onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
   onAddRow?: () => void;
   baseId?: string;
@@ -47,6 +48,7 @@ type GridContainerProps = {
 
 export function GridContainer({
   table,
+  properties,
   onCellUpdate,
   onAddRow,
   baseId,
@@ -240,6 +242,7 @@ export function GridContainer({
               table={table}
               baseId={baseId}
               columnOrder={table.getState().columnOrder}
+              properties={properties}
               loadedRowIds={rowIds}
               onPropertyCreated={handlePropertyCreated}
             />
diff --git a/apps/client/src/features/base/components/grid/grid-header-cell.tsx b/apps/client/src/features/base/components/grid/grid-header-cell.tsx
index 2867befd..8331000c 100644
--- a/apps/client/src/features/base/components/grid/grid-header-cell.tsx
+++ b/apps/client/src/features/base/components/grid/grid-header-cell.tsx
@@ -46,16 +46,15 @@ const typeIcons: Record<string, typeof IconLetterT> = {
 
 type GridHeaderCellProps = {
   header: Header<IBaseRow, unknown>;
+  property: IBaseProperty | undefined;
   loadedRowIds: string[];
 };
 
 export const GridHeaderCell = memo(function GridHeaderCell({
   header,
+  property,
   loadedRowIds,
 }: GridHeaderCellProps) {
-  const property = header.column.columnDef.meta?.property as
-    | IBaseProperty
-    | undefined;
   const isRowNumber = header.column.id === "__row_number";
   const isPinned = header.column.getIsPinned();
   const pinOffset = isPinned ? header.column.getStart("left") : undefined;
diff --git a/apps/client/src/features/base/components/grid/grid-header.tsx b/apps/client/src/features/base/components/grid/grid-header.tsx
index 9c026bdd..d4da333a 100644
--- a/apps/client/src/features/base/components/grid/grid-header.tsx
+++ b/apps/client/src/features/base/components/grid/grid-header.tsx
@@ -1,6 +1,6 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { Table, ColumnOrderState } from "@tanstack/react-table";
-import { IBaseRow } from "@/features/base/types/base.types";
+import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
 import { GridHeaderCell } from "./grid-header-cell";
 import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
 import classes from "@/features/base/styles/grid.module.css";
@@ -9,8 +9,9 @@ type GridHeaderProps = {
   table: Table<IBaseRow>;
   baseId?: string;
   // Passed explicitly to break memo when columns change
-  // (table ref is stable from useReactTable, so memo won't fire without this)
+  // (table ref is stable from useReactTable, so memo won't fire without these)
   columnOrder: ColumnOrderState;
+  properties: IBaseProperty[];
   loadedRowIds: string[];
   onPropertyCreated?: () => void;
 };
@@ -20,15 +21,26 @@ export const GridHeader = memo(function GridHeader({
   baseId,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   columnOrder: _columnOrder,
+  properties,
   loadedRowIds,
   onPropertyCreated,
 }: GridHeaderProps) {
   const headerGroups = table.getHeaderGroups();
+  const propertyById = useMemo(() => {
+    const map = new Map<string, IBaseProperty>();
+    for (const p of properties) map.set(p.id, p);
+    return map;
+  }, [properties]);
 
   return (
     <div className={classes.headerRow} role="row">
       {headerGroups[0]?.headers.map((header) => (
-        <GridHeaderCell key={header.id} header={header} loadedRowIds={loadedRowIds} />
+        <GridHeaderCell
+          key={header.id}
+          header={header}
+          property={propertyById.get(header.column.id)}
+          loadedRowIds={loadedRowIds}
+        />
       ))}
       {baseId && (
         <CreatePropertyPopover