fix(Preview): sort numbers as numbers, not string

Author: ariser

src/containers/Tenant/Preview/Preview.js

@@ -12,6 +12,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
+import {isNumeric} from '../../../utils/utils';
 
 import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
@@ -127,6 +128,8 @@ class Preview extends React.Component {
         if (data && data.length > 0) {
             columns = Object.keys(data[0]).map((key) => ({
                 name: key,
+                align: isNumeric(data[0][key]) ? DataTable.RIGHT : DataTable.LEFT,
+                sortAccessor: (row) => isNumeric(row[key]) ? Number(row[key]) : row[key],
                 render: ({value}) => {
                     return (
                         <span

src/utils/utils.js

@@ -81,4 +81,11 @@ export function pad9(val) {
         result = "0" + result;
     }
     return result;
-}
+}
+
+export function isNumeric(value) {
+    // need both isNaN and isNaN(parseFloat):
+    // - isNaN treats true/false/''/etc. as numbers, parseFloat fixes this
+    // - parseFloat treats '123qwe' as number, isNaN fixes this
+    return !isNaN(value) && !isNaN(parseFloat(value));
+};