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)
When debugging complex data structures in JavaScript, standard logging can often lead to a cluttered and unreadable console.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve found that visual clarity is the most important factor in rapid problem-solving.
The most efficient and modern solution for inspecting collections of data is the console.table() method, which renders your data into a clean, sortable table.
This built-in tool significantly reduces the time spent expanding nested objects and helps you spot data inconsistencies instantly.
Use console.table() to render arrays or objects into a formatted table in the developer console.
const users = [
{ id: 1, name: 'John Doe', role: 'Admin' },
{ id: 2, name: 'Jane Smith', role: 'User' }
]
console.table(users)
The console.table() method takes one mandatory argument, which is the data you want to display (either an array or an object). When passed an array of objects, it automatically uses the object keys as column headers and the array indices as the first column. In the browser’s developer tools, these columns are often sortable, allowing you to organize the data by specific attributes without writing extra code.
1. Logging Basic Arrays
While most developers use console.table() for objects, it is equally effective for simple arrays of primitive values.
// Visualizing a simple array of strings
const frameworks = ['React', 'Vue', 'Angular', 'Svelte']
// This renders a two-column table: (index) and Value
console.table(frameworks)
// Contrast this with standard logging
// console.log(frameworks)
Using console.table() here provides a clear view of the index-to-value mapping. This is particularly useful when you are performing operations like sorting an array in JavaScript or when you need to verify the result of merging two arrays in JavaScript. The tabular view makes it much easier to verify that the items are in the expected order compared to the standard collapsed array view in the console.
2. Visualizing Arrays of Objects
This is the most powerful application of the table method, especially when dealing with data fetched from an API.
// A collection of products, similar to what we use in CoreUI templates
const products = [
{ sku: 'CUI-001', name: 'Dashboard Pro', price: 49.99, status: 'Active' },
{ sku: 'CUI-002', name: 'UI Kit', price: 29.00, status: 'Active' },
{ sku: 'CUI-003', name: 'Icon Pack', price: 9.00, status: 'Deprecated' }
]
// Renders a beautiful table with headers: sku, name, price, status
console.table(products)
In this example, each object in the array becomes a row in the table. If you are working on features like formatting a number as currency in JavaScript, seeing the “price” column alongside other attributes helps ensure that your raw data matches your UI requirements. It is a massive upgrade over console.log(), which would require you to click and expand every single object to compare values across the collection.
3. Filtering Specific Columns
If your objects contain many properties, the table can become too wide to read comfortably. You can pass a second argument to specify which columns to display.
const employees = [
{ id: 101, name: 'Alice', dept: 'Engineering', salary: 95000, remote: true },
{ id: 102, name: 'Bob', dept: 'Marketing', salary: 75000, remote: false },
{ id: 103, name: 'Charlie', dept: 'Engineering', salary: 110000, remote: true }
]
// Only display the 'name' and 'dept' columns
console.table(employees, ['name', 'dept'])
By providing an array of strings as the second parameter, you tell the console to ignore all other properties. This is an expert-level technique for focusing on specific data points while ignoring noisy metadata like IDs or timestamps. It is especially helpful when you are trying to filter an array in JavaScript and want to verify that only the relevant subsets are being processed correctly.
4. Debugging Single Objects
console.table() isn’t just for arrays; it also works brilliantly for single objects to display key-value pairs.
// Configuration object example
const config = {
apiUrl: 'https://api.coreui.io',
timeout: 5000,
retries: 3,
debugMode: true
}
// Renders a table with 'index' (the key) and 'Value'
console.table(config)
When you log a single object, the table displays two columns: the first for the property names (keys) and the second for their current values. This is much more readable than a horizontal string of properties. If you need to check if a string is empty in JavaScript within a large config object, this view allows you to scan the “Value” column vertically to find the missing data instantly.
5. Visualizing Nested Objects
When objects contain other objects, console.table() helps you understand the top-level structure, though it has limits with depth.
const coreuiTheme = {
colors: {
primary: '#321fdb',
success: '#2eb85c',
danger: '#e55353'
},
spacing: {
base: '1rem',
large: '1.5rem'
}
}
// Renders the top-level keys
console.table(coreuiTheme)
While console.table() won’t recursively render every nested level into a single table, it will show [Object] in the value column for nested structures. This is still useful for a high-level overview of your state. If you find yourself needing to dive deeper, you might consider flattening a nested array in JavaScript before logging it to get a more comprehensive tabular view of the data.
6. Practical Application: React Component Props
In React development, visualizing how props change can be challenging. Using console.table() in your render cycle or useEffect is a game-changer.
const MyComponent = (props) => {
// Quickly inspect all incoming props in a table
console.table(props)
return (
<div className='cui-wrapper'>
{/* Component Logic */}
</div>
)
}
This approach allows you to see every prop at a glance. If you are trying to get the length of an array in JavaScript passed via props, seeing that number in a table alongside Boolean flags and string labels makes debugging much more intuitive. In CoreUI development, we use this technique to ensure that complex component states are being updated predictably across re-renders.
Best Practice Note:
While console.table() is incredibly useful, remember that it is a synchronous operation. Avoid leaving these calls in high-frequency loops or production code, as rendering large tables can impact performance. This is the same principle we follow in CoreUI components: maintain high visibility during development, but strip debugging statements for production builds to ensure maximum speed and a clean user experience. Always use the column-filtering second argument when dealing with large datasets to keep your console readable and focused.
