51

I am viewing an array of data in the console.

console.table(myArray) always has the index as the first column. This is fine when viewing object data, when the index is the key, but not when the index is the array index (in my case it is distracting/ annoying/ takes away from the content). Is there any way to show the table without this index? The optional columns parameter allows one to show only wanted columns... except for the index.

mrj
  • 849
  • 2
  • 8
  • 18

3 Answers3

40

As shown in the MDN Web docs

The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names. Note that (in Firefox) console.table is limited to displaying 1000 rows (first row is the labeled index).

So for an array, you cannot hide the index key to be shown. BUT, as a workaround, you could transform the array into an object where you use your keys.

Example: (Open your console to see results)

const array = [{myId: 42, name: 'John', color: 'red'}, {myId: 1337, name: 'Jane', color: 'blue'}]

const transformed = array.reduce((acc, {myId, ...x}) => { acc[myId] = x; return acc}, {})

console.table(transformed)
Errorname
  • 2,228
  • 13
  • 23
  • 5
    result object: *{ '42': { name: 'John', color: 'red' }, '1337': { name: 'Jane', color: 'blue' }}* – IvanM Feb 24 '20 at 15:29
  • 5
    This does not work and still showing the index column, in latest chrome and node 14 – Rotem Jul 29 '21 at 06:51
  • 2
    @Rotem Indeed, as written in the answer: "So for an array, you >cannot< hide the index key to be shown." What the code shows is: "as a workaround, you could transform the array into an object where you use >your< keys" – Errorname Sep 27 '21 at 11:23
  • Works in Node 17 at least, a decent work-around IMO. – ken Jan 18 '23 at 22:45
15

If you are using node (not the browser) and you want a solution without bringing in a dependency you can do this:

(Building off this answer):

const { Console } = require('console');
const { Transform } = require('stream');

function table(input) {
  // @see https://stackoverflow.com/a/67859384
  const ts = new Transform({ transform(chunk, enc, cb) { cb(null, chunk) } })
  const logger = new Console({ stdout: ts })
  logger.table(input)
  const table = (ts.read() || '').toString()
  let result = '';
  for (let row of table.split(/[\r\n]+/)) {
    let r = row.replace(/[^┬]*┬/, '┌');
    r = r.replace(/^├─*┼/, '├');
    r = r.replace(/│[^│]*/, '');
    r = r.replace(/^└─*┴/, '└');
    r = r.replace(/'/g, ' ');
    result += `${r}\n`;
  }
  console.log(result);
}

const test = [
  { name: "Jane", id: '1234', pastime: 'Archery' },
  { name: "John", id: '1235', pastime: 'Knitting' },
  { name: "Jess", id: '1236', pastime: 'Fishing' }
];

table(test);

Results in this table with no index column:

┌────────┬────────┬────────────┐
│  name  │   id   │  pastime   │
├────────┼────────┼────────────┤
│  Jane  │  1234  │  Archery   │
│  John  │  1235  │  Knitting  │
│  Jess  │  1236  │  Fishing   │
└────────┴────────┴────────────┘
Brickshot
  • 151
  • 1
  • 3
0

Building on the Errorname answer and using one of the properties instead of the index while assigning the rest of the properties:

let arr = [
  {id: 1, firstName: 'John', lastName: 'Smith', height: 180}, 
  {id: 2, firstName: 'Jane', lastName: 'Doe', height: 170}]

let arrNoIndex = arr.reduce((acc, {id, firstName, ...x}) => 
  { acc[firstName] = x; return acc; }, {})

console.table(arrNoIndex);
mp31415
  • 6,531
  • 1
  • 44
  • 34