diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
index 4848283c26..9f7d0ee948 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
@@ -64,7 +64,7 @@
     ></ng-container>
 
     <ng-container content>
-      <ng-container *ngFor="let dataRow of data">
+      <ng-container *ngFor="let dataRow of data; trackBy: trackByRuns">
         <tb-data-table-content-row [attr.data-id]="dataRow.id">
           <ng-container *ngFor="let header of getHeaders()">
             <tb-data-table-content-cell
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
index ae909e095b..6fb4c4ec79 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
@@ -127,4 +127,16 @@ export class RunsDataTable {
     const input = event.target! as HTMLInputElement;
     this.onRegexFilterChange.emit(input.value);
   }
+
+  /**
+   * Using the `trackBy` directive allows you to control when an element contained
+   * by an `ngFor` is rerendered. In this case it is important that changes to
+   * the `color` attribute do NOT trigger rerenders because doing so will recreate
+   * and close the colorPicker.
+   */
+  trackByRuns(index: number, data: TableData) {
+    const dataWithoutColor = {...data};
+    delete dataWithoutColor.color;
+    return JSON.stringify(dataWithoutColor);
+  }
 }
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
index 44038e377e..0de6406a5d 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
@@ -355,4 +355,21 @@ describe('runs_data_table', () => {
 
     expect(onRegexFilterChangeSpy).toHaveBeenCalledWith('myRegex');
   });
+
+  it('trackByRuns serializes data while ignoring color', () => {
+    const fixture = createComponent({});
+    const dataTable = fixture.debugElement.query(By.directive(RunsDataTable));
+    expect(
+      dataTable.componentInstance.trackByRuns(0, {
+        id: 'run1',
+        color: 'orange',
+        hparam1: 1.234,
+      })
+    ).toEqual(
+      JSON.stringify({
+        id: 'run1',
+        hparam1: 1.234,
+      })
+    );
+  });
 });