Fixes sortTable default sort

Resolves brave#13721

Auditors:

Test Plan:

app/renderer/components/common/sortableTable.js

@@ -32,16 +32,51 @@ class SortableTable extends React.Component {
     }
     this.counter = 0
     this.sortTable = null
+    this.dimensionCount = null
   }
   componentDidMount () {
-    this.sortTable = tableSort(this.table)
+    this.sortTable = tableSort(this.table, {
+      descending: this.props.defaultHeadingSortOrder === 'desc'
+    })
     return this.sortTable
   }
   componentDidUpdate (prevProps) {
-    if (this.props.rows &&
-      (!prevProps.rows ||
-      prevProps.rows.length !== this.props.rows.length)) {
-      this.sortTable.refresh()
+    if (this.isMultiDimensioned) {
+      let count = 0
+      if (this.dimensionCount == null && prevProps.rows) {
+        for (let i = 0; i < prevProps.rows.length; i++) {
+          if (this.props.rows[i].length > 0) {
+            count += this.props.rows[i].length
+          }
+        }
+
+        this.dimensionCount = count
+      }
+
+      if (!this.props.rows) {
+        this.dimensionCount = null
+        return
+      }
+
+      count = 0
+      for (let i = 0; i < this.props.rows.length; i++) {
+        if (this.props.rows[i].length > 0) {
+          count += this.props.rows[i].length
+        }
+      }
+
+      if (count !== this.dimensionCount) {
+        console.log('sort')
+        this.sortTable.refresh()
+      }
+
+      this.dimensionCount = count
+    } else {
+      if (this.props.rows &&
+        (!prevProps.rows ||
+          prevProps.rows.length !== this.props.rows.length)) {
+        this.sortTable.refresh()
+      }
     }
   }
   /**
@@ -473,9 +508,10 @@ class SortableTable extends React.Component {
             if (dataType === 'object' && firstEntry.value) {
               dataType = typeof firstEntry.value
             }
+            const defaultSort = this.sortingDisabled || heading === this.props.defaultHeading
             const headerClasses = {
               'sort-header': true,
-              'sort-default': this.sortingDisabled || heading === this.props.defaultHeading,
+              'sort-default': defaultSort,
               [css(styles.table__th, this.props.smallRow && styles.table__th_smallRow)]: true
             }
             const isString = typeof heading === 'string'
@@ -486,8 +522,9 @@ class SortableTable extends React.Component {
             return <th className={cx(headerClasses)}
               data-sort-method={sortMethod}
               data-sort-order={this.props.defaultHeadingSortOrder}
+              data-sort-default={defaultSort}
               data-test-id={cx({
-                'sort-default': this.sortingDisabled || heading === this.props.defaultHeading
+                'sort-default': defaultSort
               })}
               data-test2-id={heading === 'title' ? 'heading-title' : null}
             >