feat(extensions/console): right align numeric columns in table (#11748)

2 files changed, 47 insertions, 36 deletions

diff --git a/cli/tests/unit/console_test.ts b/cli/tests/unit/console_test.ts
index 3d34c83ce..eee3d3cf1 100644
--- a/cli/tests/unit/console_test.ts
+++ b/cli/tests/unit/console_test.ts
@@ -1318,11 +1318,11 @@ unitTest(function consoleTable() {
       `┌───────┬───────┬───────┬────────┐
 │ (idx) │ 0     │ 1     │ Values │
 ├───────┼───────┼───────┼────────┤
-│ 0     │       │       │ 1      │
-│ 1     │       │       │ 2      │
-│ 2     │ 3     │ [ 4 ] │        │
-│ 3     │ 5     │ 6     │        │
-│ 4     │ [ 7 ] │ [ 8 ] │        │
+│     0 │       │       │      1 │
+│     1 │       │       │      2 │
+│     2 │ 3     │ [ 4 ] │        │
+│     3 │ 5     │ 6     │        │
+│     4 │ [ 7 ] │ [ 8 ] │        │
 └───────┴───────┴───────┴────────┘
 `,
     );
@@ -1334,10 +1334,10 @@ unitTest(function consoleTable() {
       `┌────────────┬────────┐
 │ (iter idx) │ Values │
 ├────────────┼────────┤
-│ 0          │ 1      │
-│ 1          │ 2      │
-│ 2          │ 3      │
-│ 3          │ "test" │
+│          0 │ 1      │
+│          1 │ 2      │
+│          2 │ 3      │
+│          3 │ "test" │
 └────────────┴────────┘
 `,
     );
@@ -1354,8 +1354,8 @@ unitTest(function consoleTable() {
       `┌────────────┬─────┬────────┐
 │ (iter idx) │ Key │ Values │
 ├────────────┼─────┼────────┤
-│ 0          │ 1   │ "one"  │
-│ 1          │ 2   │ "two"  │
+│          0 │   1 │ "one"  │
+│          1 │   2 │ "two"  │
 └────────────┴─────┴────────┘
 `,
     );
@@ -1395,11 +1395,11 @@ unitTest(function consoleTable() {
       `┌───────┬────────┬──────────────────────┬────┬────────┐
 │ (idx) │ 0      │ 1                    │ a  │ Values │
 ├───────┼────────┼──────────────────────┼────┼────────┤
-│ 0     │        │                      │    │ 1      │
-│ 1     │        │                      │    │ "test" │
-│ 2     │        │                      │    │ false  │
-│ 3     │        │                      │ 10 │        │
-│ 4     │ "test" │ { b: 20, c: "test" } │    │        │
+│     0 │        │                      │    │ 1      │
+│     1 │        │                      │    │ "test" │
+│     2 │        │                      │    │ false  │
+│     3 │        │                      │ 10 │        │
+│     4 │ "test" │ { b: 20, c: "test" } │    │        │
 └───────┴────────┴──────────────────────┴────┴────────┘
 `,
     );
@@ -1459,9 +1459,9 @@ unitTest(function consoleTable() {
       `┌───────┬─────────┐
 │ (idx) │ Values  │
 ├───────┼─────────┤
-│ 0     │ "Hello" │
-│ 1     │ "你好"  │
-│ 2     │ "Amapá" │
+│     0 │ "Hello" │
+│     1 │ "你好"  │
+│     2 │ "Amapá" │
 └───────┴─────────┘
 `,
     );
@@ -1476,8 +1476,8 @@ unitTest(function consoleTable() {
       `┌───────┬───┬───┐
 │ (idx) │ 0 │ 1 │
 ├───────┼───┼───┤
-│ 0     │ 1 │ 2 │
-│ 1     │ 3 │ 4 │
+│     0 │ 1 │ 2 │
+│     1 │ 3 │ 4 │
 └───────┴───┴───┘
 `,
     );
@@ -1489,9 +1489,9 @@ unitTest(function consoleTable() {
       `┌───────┬───┐
 │ (idx) │ b │
 ├───────┼───┤
-│ 1     │ 5 │
-│ 2     │   │
-│ 3     │ 6 │
+│     1 │ 5 │
+│     2 │   │
+│     3 │ 6 │
 └───────┴───┘
 `,
     );
@@ -1503,10 +1503,10 @@ unitTest(function consoleTable() {
       `┌───────┬───┬───┐
 │ (idx) │ a │ b │
 ├───────┼───┼───┤
-│ 0     │ 0 │   │
-│ 1     │ 1 │ 1 │
-│ 2     │ 2 │   │
-│ 3     │ 3 │ 3 │
+│     0 │ 0 │   │
+│     1 │ 1 │ 1 │
+│     2 │ 2 │   │
+│     3 │ 3 │ 3 │
 └───────┴───┴───┘
 `,
     );
@@ -1521,10 +1521,10 @@ unitTest(function consoleTable() {
       `┌───────┬───┬───┬───┐
 │ (idx) │ a │ b │ c │
 ├───────┼───┼───┼───┤
-│ 0     │ 0 │   │   │
-│ 1     │ 1 │   │ 1 │
-│ 2     │ 2 │   │   │
-│ 3     │ 3 │   │ 3 │
+│     0 │ 0 │   │   │
+│     1 │ 1 │   │ 1 │
+│     2 │ 2 │   │   │
+│     3 │ 3 │   │ 3 │
 └───────┴───┴───┴───┘
 `,
     );
diff --git a/ext/console/02_console.js b/ext/console/02_console.js
index 40ff2e25d..178b3955b 100644
--- a/ext/console/02_console.js
+++ b/ext/console/02_console.js
@@ -191,13 +191,17 @@
     return width;
   }
 
-  function renderRow(row, columnWidths) {
+  function renderRow(row, columnWidths, columnRightAlign) {
     let out = tableChars.left;
     for (let i = 0; i < row.length; i++) {
       const cell = row[i];
       const len = getStringWidth(cell);
-      const needed = columnWidths[i] - len;
-      out += `${cell}${StringPrototypeRepeat(" ", needed)}`;
+      const padding = StringPrototypeRepeat(" ", columnWidths[i] - len);
+      if (columnRightAlign?.[i]) {
+        out += `${padding}${cell}`;
+      } else {
+        out += `${cell}${padding}`;
+      }
       if (i !== row.length - 1) {
         out += tableChars.middle;
       }
@@ -206,6 +210,11 @@
     return out;
   }
 
+  function canRightAlign(value) {
+    const isNumber = !isNaN(value);
+    return isNumber;
+  }
+
   function cliTable(head, columns) {
     const rows = [];
     const columnWidths = ArrayPrototypeMap(head, (h) => getStringWidth(h));
@@ -214,6 +223,7 @@
       (n, a) => MathMax(n, a.length),
       0,
     );
+    const columnRightAlign = new Array(columnWidths.length).fill(true);
 
     for (let i = 0; i < head.length; i++) {
       const column = columns[i];
@@ -225,6 +235,7 @@
         const width = columnWidths[i] || 0;
         const counted = getStringWidth(value);
         columnWidths[i] = MathMax(width, counted);
+        columnRightAlign[i] &= canRightAlign(value);
       }
     }
 
@@ -244,7 +255,7 @@
       `${tableChars.rightMiddle}\n`;
 
     for (const row of rows) {
-      result += `${renderRow(row, columnWidths)}\n`;
+      result += `${renderRow(row, columnWidths, columnRightAlign)}\n`;
     }
 
     result +=