Align columns for nested data

Author: nfarrell-kx

src/utils/queryUtils.ts

@@ -357,8 +357,10 @@ export function convertRowsToConsole(rows: string[]): string[] {
   }
 
   const columnCounters = vector[0].reduce((counters: number[], _, j) => {
+    // get max width of column, splitting values by new line
     const maxLength = vector.reduce(
-      (max, row) => Math.max(max, row[j].length),
+      (max, row) =>
+        Math.max(max, Math.max(...row[j].split("\n").map((l) => l.length))),
       0,
     );
     counters.push(maxLength + 2);
@@ -368,14 +370,27 @@ export function convertRowsToConsole(rows: string[]): string[] {
   vector.forEach((row) => {
     row.forEach((value, j) => {
       const counter = columnCounters[j];
-      const diff = counter - value.length;
-      if (diff > 0) {
-        if (!haveHeader && j !== columnCounters.length - 1) {
-          row[j] = value + "|" + " ".repeat(diff > 1 ? diff - 1 : diff);
-        } else {
-          row[j] = value + " ".repeat(diff);
+      const lines = value.split("\n");
+      row[j] = "";
+
+      lines.forEach((line, lineIndex) => {
+        if (lineIndex > 0) {
+          // prepend spacing to align lines within the same cell
+          const prevCol = columnCounters[j - 1];
+          if (prevCol) {
+            row[j] += "\n" + " ".repeat(prevCol);
+          }
         }
-      }
+
+        const diff = counter - line.length;
+        if (diff > 0) {
+          if (!haveHeader && j !== columnCounters.length - 1) {
+            row[j] += line + "|" + " ".repeat(diff > 1 ? diff - 1 : diff);
+          } else {
+            row[j] += line + " ".repeat(diff);
+          }
+        }
+      });
     });
   });
 

src/webview/components/kdbResultsView.ts

@@ -189,7 +189,12 @@ export class KdbResultsView extends LitElement {
                     (row: any) => html`
                       <tr class="rows">
                         ${this.columnDefs.map(
-                          (col: any) => html`<td nowrap>${row[col.field]}</td>`,
+                          (col: any) =>
+                            html`<td nowrap>
+                              <span style="white-space: pre-line"
+                                >${row[col.field]}</span
+                              >
+                            </td>`,
                         )}
                       </tr>
                     `,