Width calculations are off when table contains terminal hyperlink control characters

[msabramo]

Using this code:

import Table from 'cli-table';
import hyperlinker from 'hyperlinker';

const data = [
  { name: 'Google', url: 'https://google.com' },
  { name: 'Adobe', url: 'https://adobe.com' },
];

console.log('Table without hyperlinks\n');

const tableWithoutHyperlinks = new Table({ head: ['Web site', 'Link'] });

for (const row of data) {
  const { name, url } = row;
  tableWithoutHyperlinks.push([name, url]);
}

console.log(tableWithoutHyperlinks.toString());

console.log('\nTable with hyperlinks\n');

const tableWithHyperlinks = new Table({ head: ['Web site', 'Link'] });

for (const row of data) {
  const { name, url } = row;
  tableWithHyperlinks.push([name, hyperlinker('Link', url)]);
}

console.log(tableWithHyperlinks.toString());

The output is:

$ ts-node --transpile-only ../../table_hyperlink_test.ts
Table without hyperlinks

┌──────────┬────────────────────┐
│ Web site │ Link               │
├──────────┼────────────────────┤
│ Google   │ https://google.com │
├──────────┼────────────────────┤
│ Adobe    │ https://adobe.com  │
└──────────┴────────────────────┘

Table with hyperlinks

┌──────────┬────────────────────────────────────┐
│ Web site │ Link                               │
├──────────┼────────────────────────────────────┤
│ Google   │ Link │
├──────────┼────────────────────────────────────┤
│ Adobe    │ Link  │
└──────────┴────────────────────────────────────┘

As you can see, the table rendering is messed up for the column with hyperlinks.

[msabramo]

If there is a way that I can hint what the actual width of the data is or provide the naked string, that would be very useful.

[msabramo]

As a data point, I noticed that https://github.com/oclif/cli-ux#clitable doesn't seem to have this problem.

 #!/usr/bin/env ts-node --transpile-only

// cli_ux_table_hyperlink_test.ts

import { cli } from 'cli-ux';
import Table from 'cli-table';
import hyperlinker from 'hyperlinker';

const data = [
  { url: 'https://google.com', name: 'Google' },
  { url: 'https://adobe.com', name: 'Adobe' },
];

console.log('Table without hyperlinks\n');

const tableWithoutHyperlinks = new Table({ head: ['Link', 'Web site'] });

for (const row of data) {
  const { name, url } = row;
  tableWithoutHyperlinks.push([url, name]);
}

console.log(tableWithoutHyperlinks.toString());

console.log('\nTable with hyperlinks\n');

const tableWithHyperlinks = new Table({ head: ['Link', 'Web site'] });

for (const row of data) {
  const { name, url } = row;
  tableWithHyperlinks.push([hyperlinker('Link', url), name]);
}

console.log(tableWithHyperlinks.toString());

// ---------- cli-ux table -----------

console.log('\ncli-ux table with hyperlinks\n');

const dataWithLinks = [
  { url: hyperlinker('Link', 'https://google.com'), name: 'Google' },
  { url: hyperlinker('Link', 'https://adobe.com'), name: 'Adobe' },
];

cli.table(dataWithLinks, {
  url: { header: 'Link', minWidth: 20 },
  name: { header: 'Web site', minWidth: 20 },
});

Running this yields:

$ ./cli_ux_table_hyperlink_test.ts
Table without hyperlinks

┌────────────────────┬──────────┐
│ Link               │ Web site │
├────────────────────┼──────────┤
│ https://google.com │ Google   │
├────────────────────┼──────────┤
│ https://adobe.com  │ Adobe    │
└────────────────────┴──────────┘

Table with hyperlinks

┌────────────────────────────────────┬──────────┐
│ Link                               │ Web site │
├────────────────────────────────────┼──────────┤
│ Link │ Google   │
├────────────────────────────────────┼──────────┤
│ Link  │ Adobe    │
└────────────────────────────────────┴──────────┘

cli-ux table with hyperlinks

 Link                Web site
 ─────────────────── ───────────────────
 Link                Google
 Link                Adobe

[msabramo]

I think the magic that makes https://github.com/oclif/cli-ux#clitable work for these links is:

https://www.npmjs.com/package/string-width