Improve table display in Spinner.

spinner/lib/src/main/assets/browse.hbs

@@ -38,7 +38,7 @@
       </form>
 
       <!-- Data Rows -->
-      <table>
+      <table id="data-table" class="invisible">
         <tr>
           {{#each queryResult.columns}}
             <th>{{this}}</th>
@@ -55,6 +55,7 @@
     {{else}}
       <div>Select a table from above and click 'browse'.</div>
     {{/if}}
+    <div id="handson-table"></div>
 
     <br />
 
@@ -70,6 +71,44 @@
       <input type="submit" name="action" value="last" {{#if pagingData.lastPage}}disabled{{/if}} />
     </form>
 
+
+    <script src="/js/lib/handsontable.full.min.js"></script>
+
     {{> partials/suffix}}
+
+    <script>
+      function main() {
+        const table = document.getElementById('data-table')
+        if (!table) {
+          return;
+        }
+
+        const data = htmlToHandsonData(table)
+        table.remove()
+
+        const renderers = []
+        for (const header of data.headers) {
+          renderers.push({ renderer: 'nullRenderer' })
+        }
+
+        const hot = new Handsontable(document.getElementById('handson-table'), {
+          data: data.rows,
+          colHeaders: data.headers,
+          columns: renderers,
+          readOnly: true,
+          filters: true,
+          columnSorting: true,
+          manualColumnResize: true,
+          manualColumnMove: true,
+          manualRowResize: true,
+          dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
+          viewportColumnRenderingOffset: 1000,
+          licenseKey: 'non-commercial-and-evaluation'
+        })
+      }
+
+      main()
+    </script>
   </body>
+
 </html>

spinner/lib/src/main/assets/css/main.css

@@ -12,18 +12,12 @@ select, input {
 }
 
 table, th, td {
-  border: 1px solid black;
+  font-family: 'JetBrains Mono', monospace;
   font-size: 1rem;
 }
 
-th, td {
+.handsontable td.htDimmed {
-  padding: 8px;
+  color: #000;
-}
-
-th {
-  position: sticky;
-  top: 0;
-  background: #fff;
 }
 
 .query-input {
@@ -84,6 +78,10 @@ h2.collapse-header, h2.collapse-header+div {
   display: none;
 }
 
+.invisible {
+  opacity: 0;
+}
+
 table.device-info {
   margin-bottom: 16px;
 }

spinner/lib/src/main/assets/js/main.js

@@ -13,6 +13,45 @@ function init() {
   document.querySelector('#database-selector').onchange = (e) => {
     window.location.href = window.location.href.split('?')[0] + '?db=' + e.target.value;
   }
+
+  if (Handsontable) {
+    Handsontable.renderers.registerRenderer('nullRenderer', nullRenderer)
+  }
+}
+
+
+function htmlToHandsonData(table) {
+  const headers = []
+  const rows = []
+
+  for (const row of table.querySelectorAll('tr')) {
+    for (const th of row.querySelectorAll('th')) {
+      headers.push(th.innerText)
+    }
+
+    const cells = []
+
+    for (const td of row.querySelectorAll('td')) {
+      cells.push(td.innerText)
+    }
+
+    if (cells.length > 0) {
+      rows.push(cells)
+    }
+  }
+
+  return {
+    headers: headers, 
+    rows: rows
+  }
+}
+
+function nullRenderer(hot, td, row, column, props, value, cellProperties) {
+  if (value === 'null') {
+    td.innerHTML = `<em class="null">null</em>`
+  } else {
+    td.innerHTML = value
+  }
 }
 
 init();

spinner/lib/src/main/assets/partials/head.hbs

@@ -8,7 +8,9 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 
+  <!-- handsontable -->
+  <link href="/css/lib/handsontable.full.min.css" rel="stylesheet">
+
+  <!-- Us -->
   <link href="/css/main.css" rel="stylesheet">
-  <style type="text/css">
-  </style>
 </head>

spinner/lib/src/main/assets/query.hbs

@@ -29,7 +29,7 @@
       {{queryResult.timeToFirstRow}} ms to read the first row. <br />
       {{queryResult.timeToReadRows}} ms to read the rest of the rows. <br />
       <br />
-      <table>
+      <table id="data-table" class="invisible">
         <tr>
           {{#each queryResult.columns}}
             <th>{{this}}</th>
@@ -43,10 +43,14 @@
           </tr>
         {{/each}}
       </table>
+
+      <div id="handson-table"></div>
     {{else}}
       No data.
     {{/if}}
 
+    <script src="/js/lib/handsontable.full.min.js"></script>
+
     {{> partials/suffix}}
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -87,6 +91,34 @@
           bindKey: {win: "Ctrl-Shift-F", mac: "Command-Shift-F"},
           exec: formatSql
         });
+
+        const table = document.getElementById('data-table')
+        if (!table) {
+          return;
+        }
+
+        const data = htmlToHandsonData(table)
+        table.remove()
+
+        const renderers = []
+        for (const header of data.headers) {
+          renderers.push({ renderer: 'nullRenderer' })
+        }
+
+        const hot = new Handsontable(document.getElementById('handson-table'), {
+          data: data.rows,
+          colHeaders: data.headers,
+          columns: renderers,
+          readOnly: true,
+          filters: true,
+          columnSorting: true,
+          manualColumnResize: true,
+          manualColumnMove: true,
+          manualRowResize: true,
+          dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
+          viewportColumnRenderingOffset: 1000,
+          licenseKey: 'non-commercial-and-evaluation'
+        })
       }
 
       function onFormatClicked(e) {

spinner/lib/src/main/java/org/signal/spinner/SpinnerServer.kt

@@ -61,8 +61,8 @@ internal class SpinnerServer(
 
     try {
       return when {
-        session.method == Method.GET && session.uri == "/css/main.css" -> newFileResponse("css/main.css", "text/css")
+        session.method == Method.GET && session.uri.startsWith("/css/") -> newFileResponse(session.uri.substring(1), "text/css")
-        session.method == Method.GET && session.uri == "/js/main.js" -> newFileResponse("js/main.js", "text/javascript")
+        session.method == Method.GET && session.uri.startsWith("/js/") -> newFileResponse(session.uri.substring(1), "text/javascript")
         session.method == Method.GET && session.uri == "/" -> getIndex(dbParam, dbConfig.db())
         session.method == Method.GET && session.uri == "/browse" -> getBrowse(dbParam, dbConfig.db())
         session.method == Method.POST && session.uri == "/browse" -> postBrowse(dbParam, dbConfig, session)