introduction

A feature request for WebKit has recently been added which suggests adding a new method to the console object named table. This method is intended to be used to dump tabular data to the debugger console. The feature request is: Bug 38664: Web Inspector: add a "table" method to console, to allow output of tabular data.

The new console.table() method takes one required parameter, the data to be dumped, and an optional parameter specifying which "columns" to be dumped and optionally the column label.

console.table(data[, columns])

The data argument should be one of:

• an array of arrays of values
• an array of objects
• an object

When the data is an array of arrays of values, it would be a structure such as:

[
    [1, 2, 3],
    [4, 5, 6]
]

In this case, the way the data is laid out is the same way it's printed above.

When the data is an array of objects, the properties of the objects are used as the columns.

For an object, the resulting table will have one row per property of the object.

For the case where data is an array, the columns used will the union of all the properties available in all of the row objects (arrays or objects). Non-existent values will have blank cells (undefined or null or both?).

The columns argument is an array of columns to be generated (instead of generating a row for every property/element), and is either an array of strings or integers, or an array of objects of the form:

{ property: propertyKey, label: labelString }

The propertyKey value is an index value to use against a row to obtain the value for a cell. For instance, if a row of data is stored in the variable rowValue, then the value for the cell will be obtained via the expression rowValue[propertyKey]. The value for propertyKey should be an integer or string.

The labelString value will be the column header label for that column.

If the columns argument is just an array of strings or integers, these are converted to the object form as follows:

for (var i=0; i<columns.length; i++) {
    columns[i] = { 
        property: columns[i], 
        label:    columns[i].toString()
    }
}

var data = [[1,2,3], [4,5,6]]
console.table(data)

var data = [{a:1, b:2, c:3}, {c:6, b:5, a:4}]
console.table(data)

var data = {a:1, b:2, c:3}
console.table(data)

var data = [[1,2,3], [4,5,6]]
var columns = [1,2]
console.table(data, columns)

var data = [[1,2,3], [4,5,6]]
var columns = [
    {property:1, label: "2nd"},
    {property:2, label: "3rd"}
]
console.table(data, columns)

var data = [{a:1, b:2, c:3}, {a:4, b:5, c:6}]
var columns = ["b", "c" ]
console.table(data, columns)

var data = [{a:1, b:2, c:3}, {a:4, b:5, c:6}]
var columns = [
    {property:"b", label:"the b field"}, 
    {property:"c", label:"the c field"}
]
console.table(data, columns)

var data = [{a:1, b:2, c:3}, {b:4, c:5, d:6}]
console.table(data)

var data = [
    {a:1001, b:"value 2002", c:3003}, 
    {a:4,    b:"value 5",    c:6}
]
console.table(data)

var data = document.getElementsByTagName("h1")
console.table(data, ["textContent", "offsetTop"])

var data = document.getElementsByTagName("h1")
var columns = [
    {property: "textContent", label: "heading"},
    {property: "offsetTop",   label: "y offset"}
]
console.table(data, columns)

var data = document.getElementsByTagName("h1")
console.table(data)