How to use console.table in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using console.table provides a clean, organized way to view arrays and objects in a tabular format, making data inspection much easier during debugging.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve used console.table extensively for debugging complex data structures and API responses.
From my expertise, the most effective approach is passing arrays of objects to console.table() to create well-organized, readable output in the browser console.
This method transforms complex data into easily scannable tables with columns and rows.
Use console.table() to display arrays and objects in a formatted table structure for easier data inspection.
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 }
]
console.table(users)
Here console.table(users) displays the array of objects in a table format with columns for index, id, name, and age. Each object becomes a row, and object properties become columns. The method automatically creates headers based on the property names. For simple arrays, it shows index and value columns. You can also specify which columns to display by passing a second argument with an array of property names.
Best Practice Note:
This is the same approach we use in CoreUI development for debugging component data, API responses, and configuration objects during development. Console.table makes it much easier to spot patterns, missing data, or inconsistencies in large datasets compared to regular console.log output.
