From afe03795a6405d26b3ba807216e3d67855a85b49 Mon Sep 17 00:00:00 2001
From: DF <dferrand@gmail.com>
Date: Mon, 9 Jun 2025 13:00:54 -0400
Subject: [PATCH 1/4] Handle update of null fields

---
 src/views/html.ts         | 17 +++++++++++++++++
 src/views/results/html.ts | 39 +++++++++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/views/html.ts b/src/views/html.ts
index 9467df8c..800c0989 100644
--- a/src/views/html.ts
+++ b/src/views/html.ts
@@ -41,6 +41,23 @@ export function getHeader(options: {withCollapsed?: boolean} = {}): string {
     
     #resultset tbody tr {
       border-bottom: 1px solid var(--vscode-activityBar-border);
+      position: relative;
+    }
+
+    #resultset tbody [contenteditable="true"].nullable:before {
+      color: var(--vscode-banner-foreground);
+      position: absolute;
+      top: -22px;
+      content: "Shift+Enter for null";
+      background-color: var(--vscode-list-hoverBackground);
+      opacity: 1;
+      padding: 2px;
+      border: 1px solid var(--vscode-banner-foreground);
+    }
+
+    #resultset tbody .null {
+      font-style: italic;
+      background-color: var(--vscode-editor-wordHighlightBackground);
     }
 
     ${options.withCollapsed ? /*css*/`
diff --git a/src/views/results/html.ts b/src/views/results/html.ts
index 1f842769..56d5ba55 100644
--- a/src/views/results/html.ts
+++ b/src/views/results/html.ts
@@ -44,6 +44,7 @@ export interface BasicColumn {
   name: string;
   useInWhere: boolean
   jsType: "number"|"asString";
+  isNullable: boolean,
   maxInputLength?: number;
 }
 
@@ -137,19 +138,14 @@ document.getElementById('resultset').onclick = function(e){
     }
 
     // Can return undefined or {updateStatement, bindings, saneStatement?}
-    const getSqlStatement = (newValue, withSane = false) => {
+    const getSqlStatement = (newValue, withSane = false, nullify = false) => {
       const useRrn = updateKeyColumns.length === 1 && updateKeyColumns.some(col => col.name === 'RRN');
 
       let bindings = [];
       let updateStatement = 'UPDATE ' + updateTable.table + ' t SET t.' + chosenColumn + ' = ';
 
-      if (chosenColumnDetail.maxInputLength >= 4 && newValue === 'null') {
-        // If the column can fit 'null', then set it to null value
+      if (nullify) {
         updateStatement += 'NULL';
-      } else if (chosenColumnDetail.maxInputLength < 4 && newValue === '-') {
-        // If the column cannot fit 'null', then '-' is the null value
-        updateStatement += 'NULL';
-      
       } else { 
         switch (chosenColumnDetail.jsType) {
           case 'number':
@@ -223,7 +219,11 @@ document.getElementById('resultset').onclick = function(e){
 
     // Already editable, just return
     if (editableNode.contentEditable === 'true') return;
+    let nullify = false;
     editableNode.contentEditable = true;
+    if((editableNode.classList.contains("null") || editableNode.parentNode.classList.contains("null")) && editableNode.innerText === 'null') {
+      editableNode.innerText = '';
+    }
     editableNode.focus();
     updateMessageWithSql(originalValue);
 
@@ -237,6 +237,9 @@ document.getElementById('resultset').onclick = function(e){
 
       switch (e.key) {
         case 'Enter':
+          if(chosenColumnDetail.isNullable && e.shiftKey) {
+            nullify = true;
+          }
           e.preventDefault();
           editableNode.blur();
           break;
@@ -263,19 +266,31 @@ document.getElementById('resultset').onclick = function(e){
       editableNode.contentEditable = false;
       let newValue = editableNode.innerText;
 
-      if (newValue === originalValue) return;
+      if (!nullify && newValue === originalValue) return;
       if (chosenColumnDetail.maxInputLength && newValue.length > chosenColumnDetail.maxInputLength) {
         newValue = newValue.substring(0, chosenColumnDetail.maxInputLength);
         editableNode.innerText = newValue;
       }
 
-      const sql = getSqlStatement(newValue);
+      const sql = getSqlStatement(newValue, false, nullify);
 
       if (!sql) {
         editableNode.innerHTML = originalValue;
         return;
       }
 
+      if(nullify) {
+        editableNode.innerHTML = "null";
+        if(editableNode.tagName.toLowerCase() === "td") {
+          editableNode.classList.add("null");
+        } else {
+          editableNode.parentNode.classList.add("null");
+        }
+      } else {
+        editableNode.classList.remove("null");
+        editableNode.parentNode.classList.remove("null");
+      }
+
       requestCellUpdate(editableNode, originalValue, sql.updateStatement, sql.bindings);
 
       editableNode = undefined;
@@ -481,6 +496,10 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
 
                 let newDiv = document.createElement("div");
                 newDiv.className = "hoverable";
+                if(columnMetaData[currentColumn].nullable === 1) {
+                  newCell.classList.add("nullable");
+                  newDiv.classList.add("nullable");
+                }
 
                 // Append a formatted JSON object to the cell
                 const contentMightBeJson = typeof cell === 'string' && (cell.startsWith('{') || cell.startsWith('[')) && (cell.endsWith('}') || cell.endsWith(']'));
@@ -501,7 +520,7 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
                   newDiv.style["font-family"] = "monospace";
                   newDiv.appendChild(document.createTextNode(cell === undefined ? 'null' : cell));
                   if(cell === undefined || cell === null) {
-                    newDiv.style["font-style"] = "italic";
+                    newCell.classList.add("null");
                   }
                 }
                 

From 3fd30c2bb07a694be2b818e7edd98defb633b0b2 Mon Sep 17 00:00:00 2001
From: DF <dferrand@gmail.com>
Date: Mon, 9 Jun 2025 14:10:36 -0400
Subject: [PATCH 2/4] Remove italic for nullify tooltip if field is already
 null

---
 src/views/html.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/html.ts b/src/views/html.ts
index 800c0989..3d221726 100644
--- a/src/views/html.ts
+++ b/src/views/html.ts
@@ -52,6 +52,7 @@ export function getHeader(options: {withCollapsed?: boolean} = {}): string {
       background-color: var(--vscode-list-hoverBackground);
       opacity: 1;
       padding: 2px;
+      font-style: normal;
       border: 1px solid var(--vscode-banner-foreground);
     }
 

From 5ce424211b667f4ac3b225e5977cbd354ff45949 Mon Sep 17 00:00:00 2001
From: DF <dferrand@gmail.com>
Date: Mon, 9 Jun 2025 14:29:54 -0400
Subject: [PATCH 3/4] Add missing resultSetPanelProvider.ts file change

---
 src/views/results/resultSetPanelProvider.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/results/resultSetPanelProvider.ts b/src/views/results/resultSetPanelProvider.ts
index 13264867..0e6f0625 100644
--- a/src/views/results/resultSetPanelProvider.ts
+++ b/src/views/results/resultSetPanelProvider.ts
@@ -230,6 +230,7 @@ export class ResultSetPanelProvider implements WebviewViewProvider {
                   name: column.COLUMN_NAME,
                   jsType: column.NUMERIC_PRECISION ? `number` : `asString`,
                   useInWhere: column.IS_IDENTITY === `YES`,
+                  isNullable: column.IS_NULLABLE === `Y`,
                   maxInputLength: column.CHARACTER_MAXIMUM_LENGTH
                 }));
 
@@ -263,7 +264,7 @@ export class ResultSetPanelProvider implements WebviewViewProvider {
 
 
                 basicSelect = `select rrn(${cName}) as RRN, ${possibleColumnList} from ${schema}.${ref.object.name} as ${cName} ${fromWhereClause || ``}`;
-                currentColumns = [{ name: `RRN`, jsType: `number`, useInWhere: true }, ...currentColumns];
+                currentColumns = [{ name: `RRN`, jsType: `number`, isNullable: false, useInWhere: true }, ...currentColumns];
               }
 
               updatable = {

From 4fe575546bca5e58cd24812011bf682d3ad14426 Mon Sep 17 00:00:00 2001
From: DF <dferrand@gmail.com>
Date: Mon, 23 Jun 2025 15:53:14 -0400
Subject: [PATCH 4/4] Make column width adjustable

---
 package.json                       |   3 +-
 src/views/html.ts                  |  97 +++++++++------
 src/views/jobManager/jobLog.ts     |  52 ++++-----
 src/views/results/contributes.json |   3 +-
 src/views/results/html.ts          | 182 ++++++++++++++++++++---------
 5 files changed, 215 insertions(+), 122 deletions(-)

diff --git a/package.json b/package.json
index d5a26d6f..7ba97b3b 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,8 @@
             "default": "Name",
             "enum": [
               "Name",
-              "Label"
+              "Label",
+              "Both"
             ],
             "enumDescriptions": [
               "Show the column name",
diff --git a/src/views/html.ts b/src/views/html.ts
index 3d221726..73ad4cb7 100644
--- a/src/views/html.ts
+++ b/src/views/html.ts
@@ -6,45 +6,78 @@ export function getHeader(options: {withCollapsed?: boolean} = {}): string {
   <style>
     #resultset {
       height: 100%;
-      border-collapse: collapse;
       font-size: 0.9em;
       font-family: sans-serif;
       min-width: 100%;
+      display: grid;
+      position: relative;
     }
 
-    thead tr {
+    .header {
       background-color: var(--vscode-banner-background);
       color: var(--vscode-banner-foreground);
       text-align: left;
       position: sticky; /* Lock the header row to the top so it's always visible as rows are scrolled */
       top: 0;           /* Don't forget this, required for the stickiness */
+      z-index: 1;
     }
 
-    tfoot {
-      position: sticky;
-      bottom: 0;
+    .row {
+      grid-column: 1 / -1;
+      display: contents;
     }
 
-    tfoot tr {
+    .row:hover > .cell {
+      background-color: var(--vscode-list-hoverBackground);
+    }
+
+    #footer {
+      position: sticky;
+      bottom: 0;
       background-color: var(--vscode-multiDiffEditor-headerBackground);
       text-align: left;
+      grid-column: 1 / -1;
+      opacity: 1;
+      padding: 5px 15px;
     }
 
-    #resultset th,
-    #resultset td {
+    .header,
+    .cell {
       padding: 5px 15px;
     }
 
-    #resultset tbody tr:hover {
-      background-color: var(--vscode-list-hoverBackground);
-    }
-    
-    #resultset tbody tr {
-      border-bottom: 1px solid var(--vscode-activityBar-border);
+    .cell {
       position: relative;
     }
 
-    #resultset tbody [contenteditable="true"].nullable:before {
+    .header {
+      /* stop content from "spilling" */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .hoverable {
+      /* stop content from "spilling" */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-word;
+    }
+
+    .hoverable:hover {
+      /* stop content from "spilling" */
+      overflow: initial;
+      text-overflow: initial;
+      text-wrap-mode: wrap !important;
+      height: auto;
+    }
+
+    #resultset div.cell {
+      overflow: visible;
+    }
+
+    #resultset div[contenteditable="true"].nullable:before {
       color: var(--vscode-banner-foreground);
       position: absolute;
       top: -22px;
@@ -54,34 +87,24 @@ export function getHeader(options: {withCollapsed?: boolean} = {}): string {
       padding: 2px;
       font-style: normal;
       border: 1px solid var(--vscode-banner-foreground);
+      width: max-content;
+      z-index: 2;
     }
 
-    #resultset tbody .null {
+    #resultset .null {
       font-style: italic;
       background-color: var(--vscode-editor-wordHighlightBackground);
     }
 
-    ${options.withCollapsed ? /*css*/`
-      .hoverable {
-        /* your initial height  */
-        height: 12px;
-        /* stop content from "spilling" */
-        overflow: hidden;
-
-        text-overflow: ellipsis;
-        max-width: 200px;
-        text-wrap: nowrap;
-      }
-      .hoverable:hover {
-        /* or height: auto then it will expand to text height */
-        max-width: initial;
-        height: auto;
-        text-wrap: initial;
-      }
-      #resultset tbody tr {
-        overflow: hidden;
-      }
-    ` : ''}
+    #resultset .grip {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 1px;
+      position: absolute;
+      cursor: col-resize;
+      border-right:1px solid  #ffffff10;
+    }
 
     .center-screen {
       overflow: hidden;
diff --git a/src/views/jobManager/jobLog.ts b/src/views/jobManager/jobLog.ts
index 6cb42d72..653f2db6 100644
--- a/src/views/jobManager/jobLog.ts
+++ b/src/views/jobManager/jobLog.ts
@@ -25,42 +25,38 @@ function generatePage(rows: JobLogEntry[]) {
         ${getHeader()}
               </head>
       <body>
-        <table id="resultset">
-          <thead>
-            <tr>
-              <th>Sent</th>
-              <th>Type</th>
-              <th>Severity</th>
-              <th>Message ID</th>
-              <th>Message</th>
-              <th>Second Level Text</th>
-            </tr>
-          </thead>
-          <tbody>
+        <div style="grid-template-columns:150px auto auto auto auto auto;width: 100%;" id="resultset">
+          <div class="row">
+            <div class="header">Sent</div>
+            <div class="header">Type</div>
+            <div class="header">Severity</div>
+            <div class="header">Message ID</div>
+            <div class="header">Message</div>
+            <div class="header">Second Level Text</div>
+          </div>
             ${rows.map(row => {
-              return `<tr>
-                <td width="150px">
+              return `<div class="row">
+                <div class="cell">
                   ${row.MESSAGE_TIMESTAMP}
-                </td>
-                <td>
+                </div>
+                <div class="cell">
                   ${row.MESSAGE_TYPE}
-                </td>
-                <td>
+                </div>
+                <div class="cell">
                   ${row.SEVERITY}
-                </td>
-                <td>
+                </div>
+                <div class="cell">
                   ${row.MESSAGE_ID}
-                </td>
-                <td>
+                </div>
+                <div class="cell">
                   ${escapeHTML(row.MESSAGE_TEXT || ``)}
-                </td>
-                <td>
+                </div>
+                <div class="cell">
                   ${escapeHTML(row.MESSAGE_SECOND_LEVEL_TEXT || ``)}
-                </td>
-              </tr>`
+                </div>
+              </div>`
             }).join(``)}
-          </tbody>
-        </table>
+          </div>
       </body>
     </html>
   `;
diff --git a/src/views/results/contributes.json b/src/views/results/contributes.json
index de7ca328..d2074ef9 100644
--- a/src/views/results/contributes.json
+++ b/src/views/results/contributes.json
@@ -12,7 +12,8 @@
             "default": "Name",
             "enum": [
               "Name",
-              "Label"
+              "Label",
+              "Both"
             ],
             "enumDescriptions": [
               "Show the column name",
diff --git a/src/views/results/html.ts b/src/views/results/html.ts
index 56d5ba55..f80c3caf 100644
--- a/src/views/results/html.ts
+++ b/src/views/results/html.ts
@@ -88,7 +88,6 @@ const updateMessageContent = (show, initialMessage) => {
 }
 
 document.getElementById('resultset').onclick = function(e){
-  console.log('click')
   if (updateTable === undefined) return;
 
   var e = e || window.event;
@@ -98,23 +97,27 @@ document.getElementById('resultset').onclick = function(e){
   let trWithColumn;
   let editableNode;
 
-  if (target.tagName.toLowerCase() == "div") {
+  if (target.tagName.toLowerCase() == "div" && target.classList.contains("hoverable")) {
     originalValue = target.innerText;
     editableNode = target;
-    trWithColumn = target.parentElement;
+    trWithColumn = target.parentNode;
   }
-  else if (target.tagName.toLowerCase() == "td") {
+  else if (target.tagName.toLowerCase() == "div" && target.classList.contains("cell")) {
     // Usually means it is blank
     if (!target.firstChild) {
       // Add a div to the cell
       const newDiv = document.createElement("div");
+      newDiv.className = "hoverable";
       newDiv.innerText = '';
       target.appendChild(newDiv);
+      originalValue = '';
+      editableNode = newDiv;
+      trWithColumn = target;
+    } else {    
+      originalValue = target.firstChild.innerText;
+      editableNode = target.firstChild;
+      trWithColumn = target;
     }
-    
-    originalValue = target.firstChild.innerText;
-    editableNode = target;
-    trWithColumn = target;
   }
 
   if (trWithColumn && trWithColumn.column) {
@@ -130,8 +133,9 @@ document.getElementById('resultset').onclick = function(e){
     if (updateKeyColumns.length === 0) return;
 
     let idValues = [];
-    for (let i = 0; i < parentRow.cells.length; i++) {
-      const cell = parentRow.cells[i];
+    const cols = parentRow.children;
+    for (let i = 0; i < cols.length; i++) {
+      const cell = cols[i];
       if (updateKeyColumns.some(col => col.name === cell.column)) {
         idValues.push(cell.firstChild.innerText);
       }
@@ -281,7 +285,7 @@ document.getElementById('resultset').onclick = function(e){
 
       if(nullify) {
         editableNode.innerHTML = "null";
-        if(editableNode.tagName.toLowerCase() === "td") {
+        if(editableNode.classList.contains("cell")) {
           editableNode.classList.add("null");
         } else {
           editableNode.parentNode.classList.add("null");
@@ -321,9 +325,19 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
           /* 
           ${new Date().getTime()}
           */
-          const vscode = acquireVsCodeApi();
+        const escapeHTML = str => str.replace(/[&<>'"]/g, 
+        tag => ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            "'": '&#39;',
+            '"': '&quot;'
+          }[tag]));
+
+         const vscode = acquireVsCodeApi();
           const basicSelect = ${JSON.stringify(basicSelect)};
           const htmlTableId = 'resultset';
+          const footerId = 'footer';
           const statusId = 'status';
           const jobId = 'jobId';
           const messageSpanId = 'messageSpan';
@@ -443,58 +457,89 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
 
           function initializeTable(columnHeadings) {
             // Initialize the header
-            var header = document.getElementById(htmlTableId).getElementsByTagName('thead')[0];
-            header.innerHTML = '';
-            var headerRow = header.insertRow();
-            columnMetaData.map(column => {
-              var cell = headerRow.insertCell();
-              cell.appendChild(document.createTextNode(columnHeadings === 'Label' ? column.label : column.name));
+            let thElem;
+            let startOffset;
+            let columnTemplate = '';
+            let i = 0;
+            let adjustingColumn = undefined;
+            const resultSetDiv = document.getElementById(htmlTableId);
+            const footerDiv = document.getElementById(footerId);
+            columnMetaData.forEach(column => {
+              const cell = document.createElement("div");
+              const col = i++;
+              cell.classList.add("header");
+              switch(columnHeadings) {
+                case 'Name':
+                  cell.innerText = column.label;
+                  break;
+                case 'Both':
+                  cell.innerHTML = escapeHTML(column.name)+'<br>'+escapeHTML(column.label);
+                  break;
+                default:
+                  cell.innerText = column.name;
+              }
               cell.title = getTooltip(column, columnHeadings);
+              const grip = document.createElement("div");
+              grip.innerHtml="&nbsp;";
+              grip.classList.add("grip");
+              grip.addEventListener("mousedown",(e) => {
+                adjustingColumn = col;
+                startOffset = cell.offsetWidth-e.pageX;
+              });
+              grip.addEventListener("dblclick",(e) => {
+                const columnTemplates = resultSetDiv.style["grid-template-columns"].split(' ');
+                columnTemplates[col] = 'max-content';
+                ${withCollapsed?`resultSetDiv.style.setProperty('--col-'+adjustingColumn,undefined);`:''}
+                resultSetDiv.style["grid-template-columns"] = columnTemplates.join(' ');
+              });
+              cell.appendChild(grip);
+              footerDiv.before(cell);
+              columnTemplate += ' max-content';
+              ${withCollapsed?
+              `resultSetDiv.style.setProperty('--col-'+col,'200px');
+              cell.style['max-width'] = 'var(--col-'+col+')';`:''}
             });
+            resultSetDiv.style["grid-template-columns"] = columnTemplate;
 
-            // Initialize the footer
-            var footer = document.getElementById(htmlTableId).getElementsByTagName('tfoot')[0];
-            footer.innerHTML = '';
-
-            // Foot specificaly for updating tables.
-            if (updateTable) {
-              const newRow = footer.insertRow();
-              const updateCell = newRow.insertCell();
-              updateCell.colSpan = columnMetaData.length;
-              updateCell.id = updateMessageId;
-              updateCell.appendChild(document.createTextNode(' '));
-            }
 
-            const newRow = footer.insertRow();
+            document.addEventListener("mousemove",(e) => {
+              if(adjustingColumn !== undefined) {
+                const columnTemplates = resultSetDiv.style["grid-template-columns"].split(' ');
+                columnTemplates[adjustingColumn] = Math.max(startOffset + e.pageX,40) + "px";
+                ${withCollapsed?`resultSetDiv.style.setProperty('--col-'+adjustingColumn,undefined);`:''}
+                resultSetDiv.style["grid-template-columns"] = columnTemplates.join(' ');
+              }
+            });
 
-            const statusCell = newRow.insertCell();
-            statusCell.id = statusId;
-            statusCell.appendChild(document.createTextNode(' '));
+            document.addEventListener("mouseup", () => {
+              adjustingColumn = undefined;
+            });
 
-            const jobIdCell = newRow.insertCell();
-            jobIdCell.id = jobId;
-            jobIdCell.appendChild(document.createTextNode(' '));
+            // Foot specificaly for updating tables.
+            if (updateTable) {
+              // Initialize the footer
+              const footer = document.getElementById(updateMessageId);
 
-            if (columnMetaData.length > 2) {
-              statusCell.colSpan = 2;
-              jobIdCell.colSpan = columnMetaData.length - 2;
+              footer.innerHTML = '&nbsp;';
             }
           }
 
           function appendRows(rows) {
-            let tBodyRef = document.getElementById(htmlTableId).getElementsByTagName('tbody')[0];
+            const footerDiv = document.getElementById(footerId);
 
             for (const row of rows) {
               // Insert a row at the end of table
-              let newRow = tBodyRef.insertRow()
               let currentColumn = 0;
+              const rowDiv = document.createElement("div");
+              rowDiv.className = "row";
 
               for (const cell of row) {
-                let columnName = columnMetaData[currentColumn].name;
+                const columnName = columnMetaData[currentColumn].name;
                 // Insert a cell at the end of the row
-                let newCell = newRow.insertCell();
+                const newCell = document.createElement("div");
+                newCell.classList.add("cell");
 
-                let newDiv = document.createElement("div");
+                const newDiv = document.createElement("div");
                 newDiv.className = "hoverable";
                 if(columnMetaData[currentColumn].nullable === 1) {
                   newCell.classList.add("nullable");
@@ -526,17 +571,32 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
                 
                 newCell.column = columnName;
                 newCell.appendChild(newDiv);
+                ${withCollapsed?
+                `newCell.style['max-width'] = 'var(--col-'+currentColumn+')';`:''}
+                rowDiv.appendChild(newCell);
                 currentColumn += 1;
               }
+              footerDiv.before(rowDiv);
             }
           }
 
-          // columnHeadings parameter is the value of the "vscode-db2i.resultsets.columnHeadings" setting, either 'Name' or 'Label'
+          // columnHeadings parameter is the value of the "vscode-db2i.resultsets.columnHeadings" setting, either 'Name', 'Label' or 'Both'
           function updateHeader(columnHeadings) {
             if (columnMetaData) {
-              var headerCells = document.getElementById(htmlTableId).getElementsByTagName('thead')[0].rows[0].cells;
-              for (let x = 0; x < headerCells.length; ++x) {
-                headerCells[x].innerText = columnHeadings === 'Label' ? columnMetaData[x].label : columnMetaData[x].name;
+              var headerCells = document.getElementById(htmlTableId).querySelectorAll(':scope > div.header');
+              for (let x = 0; x < columnMetaData.length; ++x) {
+                const grip = headerCells[x].querySelector('div.grip');
+                switch(columnHeadings) {
+                  case 'Name':
+                    headerCells[x].innerText = columnMetaData[x].name;
+                    break;
+                  case 'Both':
+                    headerCells[x].innerHTML = escapeHTML(columnMetaData[x].name)+'<br>'+escapeHTML(columnMetaData[x].label);
+                    break;
+                  default:
+                    headerCells[x].innerText = columnMetaData[x].label;
+                }
+                headerCells[x].appendChild(grip);
                 headerCells[x].title = getTooltip(columnMetaData[x], columnHeadings);
               }
             }
@@ -570,18 +630,30 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
                 title = column.type;
             }
             title += \`\\n\`;
-            title += columnHeadings === 'Label' ? column.name : column.label;
+            switch(columnHeadings) {
+              case 'Name':
+                title += column.label;
+                break;
+              case 'Both':
+                break;
+              default:
+                title += column.name;
+            }
             return title;
           }
 
         </script>
       </head>
       <body style="padding: 0;">
-        <table id="resultset">
-          <thead></thead>
-          <tbody></tbody>
-          <tfoot id="resultfooter"></tfoot>
-          </table>
+        <div id="resultset">
+          <div id="footer">
+            <div id="updateMessage"></div>
+            <div id="footer2">
+              <span id="status"></span>
+              <span id="jobId"></span>
+            </div>
+          </div>
+        </div>
         <p style="padding-left: 20px;" id="messageSpan"></p>
         <div id="spinnerContent" class="center-screen">
           <p id="loadingText">Running statement</p>