Tables with console.table

JavaScript course · Beginner · Lesson 113/133

Learn console.table to display arrays and objects as tables.

Tables with console.table

console.table displays arrays and objects in a table format. If you pass an array each item becomes a row; the row index and the value appear as columns.

If you pass an object each property becomes a row, with key and value columns. For nested arrays (an array of objects) each object's properties become column headers. This is ideal for quickly inspecting a lot of data.

Selecting columns

You can choose which columns are shown by giving console.table a second argument. This argument is a property name or an array of property names.

Example: console.table(students, "name"). This way only the name column appears. It reduces noise in wide objects and highlights the field you care about. It is a handy way to quickly see which field matters in a wide dataset.

Exercise Show students as a table

Define an array called students. Each item should be an object with name and grade properties (add at least two items). Then print the array as a table by calling console.table(students).

Show example solution

const students = [
  { name: "Alex", grade: 85 },
  { name: "Sam", grade: 72 }
];
console.table(students);

Test yourself

Which data looks best with console.table?
- An array of objects
- A single number
- A boolean value
- null
Show answer

An array of objects — Correct. An array of objects turns each property into a column.

Add the table method

const students = [
  { name: "Ayşe", grade: 85 }
];
console.____(students);

Show answer

const students = [
  { name: "Ayşe", grade: 85 }
];
console.table(students);

Match the input to the columns

Array

Row index + value
Object

Property name + value
Array of objects

Column headers from properties
Empty array

Empty table

All lessons in Beginner

1 Variables and data types

Tables with console.table