Support for console.table like output

[robblovell]

The format of the output when using console.table in javascript is great. It would be awesome to have the debug function support this format of output for arrays of objects.

For example, something like this, perhaps with a %t formatter?

┌─────────┬──────────────────────────┬───────────┬──────────┬──────────┬───────────┬───────────┬───────┬─────────┬───────┬────────┬───────┬──────┐
│ (index) │        createdAt         │ creatorId │    x     │    y     │   width   │  height   │ angle │ mediaId │ after │ before │ first │ last │
├─────────┼──────────────────────────┼───────────┼──────────┼──────────┼───────────┼───────────┼───────┼─────────┼───────┼────────┼───────┼──────┤
│    0    │ 2022-12-23T14:56:17.587Z │   null    │ 0.855008 │  0.3881  │ 0.247896  │ 0.371528  │ null  │   20    │   1   │   13   │   1   │  13  │
│    1    │ 2022-12-23T14:56:18.489Z │   null    │ 0.306923 │ 0.410196 │ 0.356692  │ 0.535038  │ null  │   19    │   2   │   12   │   2   │  12  │
│    2    │ 2022-12-23T14:56:18.497Z │   null    │ 0.36553  │ 0.323443 │ 0.322601  │ 0.215067  │ null  │   18    │   3   │   11   │   3   │  11  │
│    3    │ 2022-12-23T14:56:21.602Z │   null    │ 0.513784 │ 0.388415 │ 0.172348  │  0.25726  │ null  │   22    │   4   │   10   │   4   │  10  │
│    4    │ 2022-12-23T14:56:21.803Z │   null    │ 0.574811 │ 0.303346 │ 0.322601  │ 0.214857  │ null  │   21    │   5   │   9    │   5   │  9   │
│    5    │ 2022-12-23T14:56:23.526Z │   null    │ 0.138994 │ 0.523832 │ 0.206019  │ 0.309028  │ null  │   22    │   6   │   8    │   6   │  8   │
│    6    │ 2022-12-23T14:56:24.538Z │   null    │ 0.425821 │ 0.243687 │ 0.322601  │ 0.215067  │ null  │   24    │   7   │   7    │   7   │  7   │
│    7    │ 2022-12-23T14:56:25.367Z │   null    │ 0.178346 │ 0.544034 │ 0.082702  │ 0.124053  │ null  │   25    │   8   │   6    │   8   │  6   │
│    8    │ 2022-12-23T14:56:25.727Z │   null    │ 0.611719 │ 0.417708 │ 0.139062  │ 0.185417  │ null  │   27    │   9   │   5    │   9   │  5   │
│    9    │ 2022-12-23T14:56:28.013Z │   null    │ 0.479497 │ 0.440228 │ 0.166667  │   0.125   │ null  │   28    │  10   │   4    │  10   │  4   │
│   10    │ 2022-12-23T14:56:29.136Z │   null    │ 0.936887 │ 0.273284 │ 0.064951  │ 0.0866013 │ null  │   29    │  11   │   3    │  11   │  3   │
│   11    │ 2022-12-23T14:56:32.198Z │   null    │ 0.691942 │ 0.328227 │ 0.0450368 │ 0.060049  │ null  │   30    │  12   │   2    │  12   │  2   │
│   12    │ 2022-12-23T14:56:32.799Z │   null    │ 0.216912 │ 0.35335  │ 0.064951  │ 0.0866013 │ null  │   30    │  13   │   1    │  13   │  1   │
└─────────┴──────────────────────────┴───────────┴──────────┴──────────┴───────────┴───────────┴───────┴─────────┴───────┴────────┴───────┴──────┘

[webketje]

You can already do this yourself (for example with lib https://github.com/AllMightySauron/ascii-table3). Example below assumes an array of objects (all with the same structure) is passed:

import { AsciiTable3, AlignmentEnum } from 'ascii-table3'

debug.formatters.t = function ({ title, data }) {
  if (!arr.length) return
  const headings = Object.keys(data[0])
  const table = new AsciiTable3()
  table.setHeading.apply(table, headings)
  table.setAlign(3, AlignmentEnum.CENTER)
  table.addRowMatrix(data.map((item) => Object.values(item))
  return table.toString()
}

// usage
debug('%t', { title: 'my log', data: [ { id: 1 },  { id: 2 } ] })

The formatting is quite some logic so I would argue this is outside the scope of debug-js

[joemccann]

+1 to console.table support