From f440ac95e8b5b3aaad43e3b4fba4657b4849eaad Mon Sep 17 00:00:00 2001
From: Andrey Goder <andy.goder@gmail.com>
Date: Fri, 7 Aug 2026 11:41:44 -0700
Subject: [PATCH] Fix Table row updates for removed fields

---
 src/components/Table/Table.test.tsx | 33 +++++++++++++++++++++++++++++
 src/components/Table/Table.tsx      |  9 ++------
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 0881055..4f4330a 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -161,6 +161,39 @@ describe('Table', () => {
     expect(screen.getByRole('cell', {name: 'Bob'})).toBeInTheDocument();
   });
 
+  it('clears a cell when its field is removed from the row', () => {
+    interface OptionalRoleRow extends Record<string, unknown> {
+      id: string;
+      name: string;
+      role?: string;
+    }
+
+    const optionalRoleColumns: TableColumn<OptionalRoleRow>[] = [
+      {key: 'name', header: 'Name'},
+      {key: 'role', header: 'Role'},
+    ];
+    const {rerender} = render(
+      <Table
+        columns={optionalRoleColumns}
+        data={[{id: '1', name: 'Alice', role: 'Admin'}]}
+        idKey="id"
+      />,
+    );
+
+    expect(screen.getByRole('cell', {name: 'Admin'})).toBeInTheDocument();
+
+    rerender(
+      <Table
+        columns={optionalRoleColumns}
+        data={[{id: '1', name: 'Alice'}]}
+        idKey="id"
+      />,
+    );
+
+    const dataRow = screen.getAllByRole('row')[1];
+    expect(within(dataRow).getAllByRole('cell')[1]).toBeEmptyDOMElement();
+  });
+
   it('applies visual context props through row and cell classes', () => {
     const {rerender} = render(
       <Table
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 0decad2..d765577 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -42,6 +42,7 @@ import type {
 import {useBaseTablePlugins} from 'components/Table/useBaseTablePlugins';
 import {Text} from 'components/Text';
 import isNonEmptyReactNode from 'internal/isNonEmptyReactNode';
+import {shallowEqual} from 'internal/shallowEqual';
 import useShallowEqualMemo from 'internal/useShallowEqualMemo';
 import {cx} from 'utils/cx';
 
@@ -253,13 +254,7 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
     return false;
   }
 
-  if (previous.item === next.item) {
-    return true;
-  }
-
-  return Object.keys(next.item).every(
-    key => previous.item[key] === next.item[key],
-  );
+  return shallowEqual(previous.item, next.item);
 }
 
 const MemoizedDataRow = memo(DataRowInner, areRowPropsEqual) as <