Merge pull request #15920 from influxdata/zs-arrowsintable-#15888

fix(ui): arrows in table

ui/src/shared/components/tables/TableGraph.tsx

@@ -62,16 +62,17 @@ class TableGraph extends PureComponent<Props, State> {
   }
 
   public handleSetSort = (fieldName: string) => {
-    const {sortOptions} = this.state
-
-    if (fieldName === sortOptions.field) {
-      sortOptions.direction =
-        sortOptions.direction === ASCENDING ? DESCENDING : ASCENDING
-    } else {
-      sortOptions.field = fieldName
-      sortOptions.direction = DEFAULT_SORT_DIRECTION
-    }
-    this.setState({sortOptions})
+    this.setState(({sortOptions}) => {
+      const newSortOptions = {...sortOptions}
+      if (fieldName === sortOptions.field) {
+        newSortOptions.direction =
+          sortOptions.direction === ASCENDING ? DESCENDING : ASCENDING
+      } else {
+        newSortOptions.field = fieldName
+        newSortOptions.direction = DEFAULT_SORT_DIRECTION
+      }
+      return {sortOptions: newSortOptions}
+    })
   }
 
   private get sortOptions(): SortOptions {