Table data assignment bug

change/@ni-nimble-components-10037fe8-2f92-4583-b31d-0df0d2900fc3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix bug in nimble-table to avoid requiring a full copy of the data to be made when hierarchy is enabled",
+  "packageName": "@ni/nimble-components",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table/index.ts

@@ -321,7 +321,10 @@ export class Table<
 
     public async setData(newData: readonly TData[]): Promise<void> {
         await this.processPendingUpdates();
-        const tanstackUpdates = this.calculateTanStackData(newData);
+        // Make a shallow clone of the record to avoid holding a reference to the client's data object.
+        // This also ensures that a data update will always result in a row's record being a new object.
+        const clonedData = newData.map(record => ({ ...record }));
+        const tanstackUpdates = this.calculateTanStackData(clonedData);
         this.updateTableOptions(tanstackUpdates);
     }
 

packages/nimble-components/src/table/models/data-hierarchy-manager.ts

@@ -29,15 +29,15 @@ export class DataHierarchyManager<TData extends TableRecord> {
             } catch {
                 this.isDataFlat = true;
                 this._hierarchicalData = records.map((record, index) => ({
-                    clientRecord: { ...record },
+                    clientRecord: record,
                     originalIndex: index
                 }));
                 this._parentIdConfigurationValid = false;
             }
         } else {
             this.isDataFlat = true;
             this._hierarchicalData = records.map((record, index) => ({
-                clientRecord: { ...record },
+                clientRecord: record,
                 originalIndex: index
             }));
             this._parentIdConfigurationValid = true;

packages/nimble-components/src/table/tests/table.spec.ts

@@ -392,7 +392,7 @@ describe('Table', () => {
             verifyRenderedData(simpleTableData);
         });
 
-        it('can update a record without making a copy of the data', async () => {
+        it('can update a record without making a copy of the data without hierarchy enabled', async () => {
             await connect();
             await waitForUpdatesAsync();
 
@@ -965,6 +965,32 @@ describe('Table', () => {
                     parentId3: 'Parent 2'
                 }
             ];
+
+            it('can update a record without making a copy of the data with hierarchy enabled', async () => {
+                element.idFieldName = 'id';
+                element.parentIdFieldName = 'parentId';
+                await connect();
+                await waitForUpdatesAsync();
+
+                const data: SimpleTableRecord[] = hierarchicalData.map(x => ({
+                    ...x
+                }));
+                await element.setData(data);
+                await waitForUpdatesAsync();
+                const currentFieldValue = data[0]!.stringData;
+                expect(pageObject.getRenderedCellTextContent(0, 0)).toEqual(
+                    currentFieldValue
+                );
+
+                const updatedFieldValue = `${currentFieldValue} - updated value`;
+                data[0]!.stringData = updatedFieldValue;
+                await element.setData(data);
+                await waitForUpdatesAsync();
+                expect(pageObject.getRenderedCellTextContent(0, 0)).toEqual(
+                    updatedFieldValue
+                );
+            });
+
             it('shows collapse all button with hierarchical data', async () => {
                 await connect();
                 element.idFieldName = 'id';