From 3aef02bbf9caf2baaaf8e8d546130193aeae7071 Mon Sep 17 00:00:00 2001
From: Tao Zhang <tzhang@appannie.com>
Date: Tue, 8 Mar 2022 23:43:37 -0800
Subject: [PATCH 1/2] respect react key prop

---
 source/Table/Table.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/source/Table/Table.js b/source/Table/Table.js
index e0211a8ce..e67c3d4b1 100644
--- a/source/Table/Table.js
+++ b/source/Table/Table.js
@@ -490,7 +490,10 @@ export default class Table extends React.PureComponent {
         aria-colindex={columnIndex + 1}
         aria-describedby={id}
         className={clsx('ReactVirtualized__Table__rowColumn', className)}
-        key={'Row' + rowIndex + '-' + 'Col' + columnIndex}
+        key={
+          (renderedCell && renderedCell.key) ||
+          `Row${rowIndex}-Col${columnIndex}`
+        }
         onClick={onClick}
         role="gridcell"
         style={style}
@@ -598,7 +601,7 @@ export default class Table extends React.PureComponent {
         aria-sort={headerAriaSort}
         className={classNames}
         id={id}
-        key={'Header-Col' + index}
+        key={column.key || `Header-Col${index}`}
         onClick={headerOnClick}
         onKeyDown={headerOnKeyDown}
         role="columnheader"
@@ -658,7 +661,7 @@ export default class Table extends React.PureComponent {
       columns,
       index,
       isScrolling,
-      key,
+      key: (columns[0] && columns[0].key) || key,
       onRowClick,
       onRowDoubleClick,
       onRowRightClick,

From 92f1c9e376c474ae2f11ed5a2d44278ac0257e2b Mon Sep 17 00:00:00 2001
From: Tao Zhang <tzhang@appannie.com>
Date: Wed, 9 Mar 2022 13:00:31 -0800
Subject: [PATCH 2/2] add ut

---
 source/Table/Table.jest.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/source/Table/Table.jest.js b/source/Table/Table.jest.js
index 544759fdc..58d967dc3 100644
--- a/source/Table/Table.jest.js
+++ b/source/Table/Table.jest.js
@@ -1563,4 +1563,34 @@ describe('Table', () => {
     findDOMNode(render(getMarkup({cellRenderer})));
     expect(cellRenderer.mock.calls[0][0].parent).not.toBeUndefined();
   });
+
+  it('`key` prop rendered on cells should work as expected', () => {
+    let mutableList = [
+      {id: 1, name: 'foo'},
+      {id: 2, name: 'bar'},
+      {id: 3, name: 'baz'},
+    ];
+    const rerender = () =>
+      findDOMNode(
+        render(
+          getMarkup({
+            rowGetter: ({index}) => mutableList[index],
+            cellRenderer: props => (
+              <div key={props.cellData} id={props.cellData}>
+                Cell
+              </div>
+            ),
+            rowCount: mutableList.length,
+          }),
+        ),
+      );
+    let rendered = rerender();
+    expect(rendered.querySelector('#foo')).toBeTruthy();
+    const bazElem = rendered.querySelector('#baz');
+    mutableList = mutableList.slice(1);
+    rendered = rerender();
+    expect(rendered.querySelector('#foo')).toBeFalsy();
+    // dom node should have been reused when `key` worked
+    expect(rendered.querySelector('#baz')).toBe(bazElem);
+  });
 });