Better Visualization of Console Data with Tables

In this post, we discuss a few ways we can log data to the console in a visually easy-to-read tabular format using the console.table() method.

Data visualization is a major part of modern-day web development principles, and that has given rise to the need for better ways to manage and log structured data to the browser console. To achieve this, let's demonstrate how we can log data to the console in a tabular format with the console.table() method.

console.table()

This method allows us to log data to the console in the form of tables. It takes a mandatory data argument that can be either an array or an object and an optional columns parameter. If the data argument is an array, it logs data as a table with each element in the array as a row in the table.

The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. But if data is an object, then its values will be the property names.

Logging Arrays as Tables

Like we said earlier, when logging arrays with console.table(), the array elements are logged as table rows and its values will be the array indices. Consider the example below:

var exampleArray = [
  "First item in the array",
  "I'm the second item in this array",
  "Obviously i'm the last item"
];
console.table(exampleArray);

Here, we have defined an example array with three items and logged the array with the console.table() method. If you run this snippet, you should get the following output in the console:

 

Just like we said, the array elements are rendered to the console as the table rows, with their respective positions as the indices.

Logging Array of Arrays as Tables

What if we take this up a notch and log an array of arrays? You can already start imagining the output. If the elements in the array are themselves arrays, then their elements are enumerated in the row, one per column. Well, let’s stop imagining and start demonstrating it with the example below:

var arrayOfArrays = [
 	["Phone", "Samsung"], 
  	["Car", "Ferrari"], 
  	["Sports", "Football"]
];
console.table(arrayOfArrays)

Like we proposed, we have logged an array with three other array elements as its children. If we run this snippet and pull up the console, we should have this output:

Logging Objects as Tables

Just like arrays, we can also log objects with the console.table() method. However, it renders the contents a bit differently. With objects, the values of the tables will be the objects property names. Consider the example below:

function Employee(firstName, lastName, email) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.email = email
}
var employee = new Employee("John", "Smith", "jsmith@test.com");
console.table(employee);

Here, we created a new employee object from our Employee function and passed in custom data for the employee details, and finally we logged the new employee we created to the console with the console.table() method. If we run the snippet and check the console, the employee details will be rendered in a tabular format like so:

Logging Array of Objects as a Table

Just like with array of arrays, if the properties in the object are themselves objects, then their properties are enumerated in the row, one per column. Consider the example below:

function Employee(firstName, lastName, email) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.email = email;
}
var Peter = new Employee("Peter", "Eze", "peter@test.com");
var Chris = new Employee("Chris", "Nwamba", "chris@test.com");
var William = new Employee("William", "Imoh", "william@test.com");

console.table([Peter, Chris, William]);

Without running this snippet, you can already imagine how the console.table() method will arrange and render this data in the console. Again, if we run this snippet and check out the console, here’s what we’ll have:

As expected, the object properties are enumerated in the table rows, one object per column with the values rendered in each column. This doesn’t look quite complete with the index column reading numeric values, so what if we can change that with the next table?

Logging Nested Objects as Tables

This is yet another scenario that gives us the ability to define a custom content in the index column. What this means is that we can log an object whose properties are themselves objects. Here’s an example, continuing from the last:

function Employee(firstName, lastName, email) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.email = email;
}
var team = {};
  team.leader = new Employee("Peter", "Eze", "peter@test.com");
  team.manager = new Employee("Chris", "Nwamba", "chris@test.com");
  team.writer = new Employee("William", "Imoh", "william@test.com");
console.table(team);

Here, we created a new team object that demonstrates an object whose properties are objects. In cases like this, the console.table() method labels the index appropriately with the nested object properties. Here’s the log output:

Conditional Rendering

Finally, the console.table() method takes an optional column parameter that lets us allow/restrict the rendering of certain columns in our table. For instance in our last example, we can decide to only render the firstName column in the table. Here’s how we can do that:

function Employee(firstName, lastName, email) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.email = email;
}
var team = {};
  team.leader = new Employee("Peter", "Eze", "peter@test.com");
  team.manager = new Employee("Chris", "Nwamba", "chris@test.com");
  team.writer = new Employee("William", "Imoh", "william@test.com");
        
console.table(team, ["firstName"]);

This will produce the following console output on the browser:

 

Conclusion

In this post, we have gone over the various way you can log arrays and objects as tables to the browser console for better data visualization. If this article is not clear enough and you need some more information about this concept, read more from the MDN documentation.

For More Info on Building Great Web Apps

Want to learn more about creating great user interfaces? Check out Kendo UI - our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.