fix

web/package.json

@@ -11,6 +11,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.17.0",
     "formik": "^2.1.0",
+    "json-stable-stringify": "^1.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-modal": "^3.11.1",

web/src/tabs/TableDataTab.js

@@ -1,9 +1,77 @@
 import React from 'react';
 import useFetch from '../utility/useFetch';
-import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
+import styled from 'styled-components';
+import theme from '../theme';
+
+// const Table = styled.table`
+//   position: absolute;
+//   left:0;
+//   top:0:
+//   bottom:0;
+//   right:0;
+//   overflow: scroll;
+// `;
+// const TableHead = styled.thead`
+//   // display: block;
+//   // width: 300px;
+// `;
+// const TableBody = styled.tbody`
+//   // display: block;
+//   // overflow: auto;
+//   // height: 100px;
+// `;
+// const TableHeaderRow = styled.tr`
+//   height: 35px;
+// `;
+// const TableBodyRow = styled.tr`
+//   height: 35px;
+// `;
+// const TableHeaderCell = styled.td`
+//   font-weight: bold;
+// `;
+// const TableBodyCell = styled.td`
+//   white-space: nowrap;
+// `;
+
+const Table = styled.div`
+  overflow-x: scroll;
+  width: 500px;
+  position: absolute;
+  left:0;
+  top:0:
+  bottom:0;
+  right:0;
+`;
+const TableHead = styled.div`
+  // display: block;
+  // width: 300px;
+  // width:700px;
+`;
+const TableBody = styled.div`
+  // display: block;
+  overflow-y: scroll;
+  height: 200px;
+`;
+const TableHeaderRow = styled.div`
+  display: flex;
+  height: 35px;
+`;
+const TableBodyRow = styled.div`
+  display: flex;
+  height: 35px;
+`;
+const TableHeaderCell = styled.div`
+  font-weight: bold;
+  width: 160px;
+  overflow: hidden;
+`;
+const TableBodyCell = styled.div`
+  white-space: nowrap;
+  width: 160px;
+  overflow: hidden;
+`;
 
 export default function TableDataTab({ conid, database, schemaName, pureName }) {
-  // return pureName;
   const data = useFetch({
     url: 'tables/table-data',
     params: {
@@ -16,19 +84,27 @@ export default function TableDataTab({ conid, database, schemaName, pureName })
   const { rows, columns } = data || {};
   if (!columns || !rows) return null;
   return (
-    <table>
-      <tr>
-        {columns.map(col => (
-          <th key={col.name}>{col.name}</th>
-        ))}
-      </tr>
-      {rows.map((row, index) => (
-        <tr key={index}>
+    <Table>
+      <TableHead>
+        <TableHeaderRow>
           {columns.map(col => (
-            <td key={col.name}>{row[col.name]}</td>
+            <TableHeaderCell key={col.name} style={{ width: '60px' }}>
+              {col.name}
+            </TableHeaderCell>
           ))}
-        </tr>
-      ))}
-    </table>
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row, index) => (
+          <TableBodyRow key={index}>
+            {columns.map(col => (
+              <TableBodyCell key={col.name} style={{ width: '60px' }}>
+                {row[col.name]}
+              </TableBodyCell>
+            ))}
+          </TableBodyRow>
+        ))}
+      </TableBody>
+    </Table>
   );
 }

web/src/utility/useFetch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import axios from './axios';
 import useSocket from './SocketProvider';
+import stableStringify from 'json-stable-stringify';
 
 export default function useFetch({
   url,
@@ -34,7 +35,7 @@ export default function useFetch({
         socket.off(reloadTrigger, handleReload);
       };
     }
-  }, [url, params, socket, loadCounter]);
+  }, [url, stableStringify(params), socket, loadCounter]);
 
   return value;
 }