prevent rerendering of tableOptions unless appropriate props change

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>

ui/src/dashboards/components/DisplayOptions.js

@@ -52,11 +52,7 @@ class DisplayOptions extends Component {
         return <SingleStatOptions onResetFocus={onResetFocus} />
       case 'table':
         return (
-          <TableOptions
-            onResetFocus={onResetFocus}
-            queryConfigs={queryConfigs}
-            dataLabels={dataLabels}
-          />
+          <TableOptions onResetFocus={onResetFocus} dataLabels={dataLabels} />
         )
       default:
         return (

ui/src/dashboards/components/TableOptions.tsx

@@ -10,6 +10,8 @@ import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsText
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 
+import _ from 'lodash'
+
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
@@ -40,7 +42,6 @@ interface QueryConfig {
 }
 
 interface Props {
-  queryConfigs: QueryConfig[]
   handleUpdateTableOptions: (options: Options) => void
   tableOptions: Options
   onResetFocus: () => void
@@ -72,14 +73,6 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
-  componentWillMount() {
-    const {handleUpdateTableOptions, tableOptions} = this.props
-    handleUpdateTableOptions({
-      ...tableOptions,
-      fieldNames: this.computedFieldNames,
-    })
-  }
-
   handleChooseSortBy = option => {
     const {tableOptions, handleUpdateTableOptions} = this.props
     const sortBy = {
@@ -127,6 +120,25 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
+  componentWillMount() {
+    const {handleUpdateTableOptions, tableOptions} = this.props
+    handleUpdateTableOptions({
+      ...tableOptions,
+      fieldNames: this.computedFieldNames,
+    })
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const {tableOptions, dataLabels} = this.props
+    const tableOptionsDifferent = !_.isEqual(
+      tableOptions,
+      nextProps.tableOptions
+    )
+    const dataLabelsDifferent = !_.isEqual(dataLabels, nextProps.dataLabels)
+
+    return tableOptionsDifferent || dataLabelsDifferent
+  }
+
   render() {
     const {
       tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},