Search code examples
javascriptcommand-line-interface

How to generate a comfortable form using JavaScript

I want to generate a form that is comfortable to look using JavaScript like this enter image description here

However, I tried console.table to do that, but it actually generated a bad form. How I can resolve this issue?

export function showNodeVersion(metadata: Metadata[]): void {
    const current = getCurrent(metadata).slice(0, 9);
    const lts = getLTS(metadata).slice(0, 9);
    const craft = {
        Current: current.map(m => {
            return m.version;
        }),
        LTS: lts.map(m => {
            return m.version;
        })
    }
    console.table(craft)
}

enter image description here

Solution

  • console.table can produce a table somewhat like the desired output shown, but with some caveats:

    • The data would need to be provided as an array of objects,
    • Column headers can be provided as an array using the second parameter of console.log,
    • An extra column appears on the left showing array index vales.
    • If used in a client-side browser, column content appears to be provided in a variable width font (not monospace) with left justification.

    Copy and past the following into your browser console and press enter to see the output (Code Snippets don't appear to support console.table).

    // 4 rows of dummy data:

const sep = /,\s*/;
const CURRENT = "21.4.0,  21.3.0, 21.2.0,  21.1.0"  .split(sep); 
const LTS =     "20.10.0, 20.9.0, 18.19.0, 18.18.2" .split(sep);

const table = [];
const nRows = 4;
for( let i = 0; i < nRows; ++ i) {
  table.push( {CURRENT: CURRENT[i], LTS: LTS[i]})
}

console.table( table, ["CURRENT", "LTS"]);

    If the caveats are acceptable you would still need to create the table data for the four columns shown in the post's desired output.