console.table() in JavaScript

In this tutorial, we’ll learn how we can display data in tabular format in console using console.table() advance logging method. This comes in very handy to visualize complex array and objects in JavaScript.

console.table([])

We are logging array of numbers using both console.log() and console.table() to see how nicely console.table() has printed a table to display numbers array.

var numbers = ["one", "two", "three"];

console.log(numbers);
console.table(numbers);

Output
[ 'one', 'two', 'three' ]

┌─────────┬─────────┐
│ (index) │ Values  │
├─────────┼─────────┤
│    0    │  'one'  │
│    1    │  'two'  │
│    2    │ 'three' │
└─────────┴─────────┘

console.table([ [], [], [] ])

The visualization in tabular format becomes more handy when we print array of arrays using console.table() as compare to console.log() method.

var numbers = [["one", "1", "I"], ["two", "2", "II"], ["three", "2", "III"]];

console.log(numbers);
console.table(numbers);

Output
[ [ 'one', '1', 'I' ],
  [ 'two', '2', 'II' ],
  [ 'three', '3', 'III' ] ]

┌─────────┬─────────┬─────┬───────┐
│ (index) │    0    │  1  │   2   │
├─────────┼─────────┼─────┼───────┤
│    0    │  'one'  │ '1' │  'I'  │
│    1    │  'two'  │ '2' │ 'II'  │
│    2    │ 'three' │ '3' │ 'III' │
└─────────┴─────────┴─────┴───────┘

console.table(Object)

Similar to arrays, Objects can be printed using console.table() to visualize in tabular format.

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

var john = new Person("John", "Smith", 41);

console.log(john);
console.table(john);

Output
Person { firstName: 'John', lastName: 'Smith', age: 41 }

┌───────────┬─────────┐
│  (index)  │ Values  │
├───────────┼─────────┤
│ firstName │ 'John'  │
│ lastName  │ 'Smith' │
│    age    │   41    │
└───────────┴─────────┘

console.table(Objects[])

The visualization in tabular format becomes more handy when we print array of objects using console.table() as compare to console.log() method.

var john = new Person("John", "Smith", 41);
var jane = new Person("Jane", "Doe", 38);
var emily = new Person("Emily", "Jones", 12);

console.log([john, jane, emily]);
console.table([john, jane, emily]);

Output

[ Person { firstName: 'John', lastName: 'Smith', age: 41 },
  Person { firstName: 'Jane', lastName: 'Doe', age: 38 },
  Person { firstName: 'Emily', lastName: 'Jones', age: 12 } ]

┌─────────┬───────────┬──────────┬─────┐
│ (index) │ firstName │ lastName │ age │
├─────────┼───────────┼──────────┼─────┤
│    0    │  'John'   │ 'Smith'  │ 41  │
│    1    │  'Jane'   │  'Doe'   │ 38  │
│    2    │  'Emily'  │ 'Jones'  │ 12  │
└─────────┴───────────┴──────────┴─────┘

Restrict Column Display

You can pass the second arguments as array of fields, which you want to display. Only those columns will be displayed in tabular format.

console.table([john, jane, emily], ["firstName"]);

Output
┌─────────┬───────────┐
│ (index) │ firstName │
├─────────┼───────────┤
│    0    │  'John'   │
│    1    │  'Jane'   │
│    2    │  'Emily'  │
└─────────┴───────────┘

console.table(Object of Objects)

Complex nested objects are very easy to visualize using console.table()

var family = {};

family.mother = new Person("Jane", "Smith", 38);
family.father = new Person("John", "Smith", 41);
family.daughter = new Person("Emily", "Smith", 12);

console.table(family);

Output
┌──────────┬───────────┬──────────┬─────┐
│ (index)  │ firstName │ lastName │ age │
├──────────┼───────────┼──────────┼─────┤
│  mother  │  'Jane'   │ 'Smith'  │ 38  │
│  father  │  'John'   │ 'Smith'  │ 41  │
│ daughter │  'Emily'  │ 'Smith'  │ 12  │
└──────────┴───────────┴──────────┴─────┘

Sort Column Display

Also note that when these tabular formats are rendered in browser console. You can click on table column headers to sort by column.

┌──────────┬─────────────┬──────────┬─────┐
│ (index)  │ firstName ▲ │ lastName │ age │
├──────────┼─────────────┼──────────┼─────┤
│ daughter │  'Emily'    │ 'Smith'  │ 12  │
│  mother  │  'Jane'     │ 'Smith'  │ 38  │
│  father  │  'John'     │ 'Smith'  │ 41  │
└──────────┴─────────────┴──────────┴─────┘

Restrict Column Display

Again, pass the second arguments as array of fields, which you want to display. Only those columns will be displayed in tabular format.

console.table(family, ["firstName", "age"]);

Output
┌──────────┬───────────┬─────┐
│ (index)  │ firstName │ age │
├──────────┼───────────┼─────┤
│  mother  │  'Jane'   │ 38  │
│  father  │  'John'   │ 41  │
│ daughter │  'Emily'  │ 12  │
└──────────┴───────────┴─────┘

Conclusion

We learned in this tutorial that how console.table() is useful to visualize complex arrays and objects in tabular format, and also provide the ability to sort columns and restrict column display.

This advance logging method is supported by all modern browsers like chrome, edge, firefox, opera and safari.

Reference: MDN web docs