aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/api/console/table/index.html
blob: 85b58e27983ac9a8dbf2c0ba0b812c2d4fc56490 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
---
title: Console.table()
slug: Web/API/Console/table
translation_of: Web/API/Console/table
---
<div>{{APIRef("Console API")}}</div>

<p><span class="seoSummary">Exibe dados tabulares como uma tabela.</span></p>

<p>Essa função recebe um parâmetro obrigatório <code>data</code>, que deve ser um array ou um objeto, e um parametro opcional <code>columns</code>.</p>

<p>Registra <code>data</code> como uma tabela. Cada elemento no array (ou propriedade enumerável se <code>data</code> for um objeto) será uma linha na tabela.</p>

<p>A primeira coluna na tabela será rotulada <code>(index)</code>. Se <code>data</code> for um array, seus valores serão os índices da matriz. Se <code>data</code> for um objeto, seus valores serão os nomes das propriedades. Observe que (no Firefox) o <code>console.table</code> está limitado a exibir 1000 linhas (a primeira linha é o índice rotulado).</p>

<p>{{AvailableInWorkers}}</p>

<h3 id="Coleções_de_tipos_primitivos">Coleções de tipos primitivos</h3>

<p>O argumento <code>data</code> pode ser um array ou um objeto.</p>

<pre class="brush: js">// um array de strings

console.table(["apples", "oranges", "bananas"]);</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>

<pre class="brush: js">// um objeto cujas propriedades são strings

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>

<h3 id="Coleções_de_tipos_compostos">Coleções de tipos compostos</h3>

<p>Se os elementos no array, ou propriedades no objeto, forem arrays ou objetos, seus elementos ou propriedades serão enumerados na linha, um por coluna:</p>

<pre class="brush: js">// um array de arrays

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);</pre>

<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>

<pre class="brush: js">// um array de objetos

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);</pre>

<p>Observe que, se a matriz contiver objetos, as colunas serão rotuladas com o nome da propriedade.</p>

<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>

<pre class="brush: js">// um objeto cujas propriedades são objetos

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);</pre>

<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>

<h3 id="Restringindo_as_colunas_exibidas">Restringindo as colunas exibidas</h3>

<p>Por padrão, <code>console.table()</code> lista todos os elementos em cada linha. Você pode usar o parâmetro opcional <code>columns</code> para selecionar um subconjunto de colunas a serem exibidas:</p>

<pre class="brush: js">// um array de objetos, registrando apenas firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);</pre>

<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>

<h3 id="Classificando_colunas">Classificando colunas</h3>

<p>Você pode classificar a tabela por uma coluna específica clicando no rótulo dessa coluna.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
</pre>

<h3 id="Parâmentros">Parâmentros</h3>

<dl>
 <dt><code>data</code></dt>
 <dd>Os dados a serem exibidos. Deve ser um array ou um objeto.</dd>
 <dt><code>columns</code></dt>
 <dd>Um array contendo os nomes das colunas para incluir na saída.</dd>
</dl>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
   <td>{{Spec2("Console API")}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>


<p>{{Compat("api.Console.table")}}</p>
</div>