Overview

O widget Tabela do Studio (Table Widget) permite que você exiba seus dados em uma tabela simples.

How do I create a table ?

Create the flow

No payload enviado ao nó do Brainstudio, você precisa de uma propriedade para cada tabela que deseja alimentar.
Flow

O conteúdo desta propriedade deve ser um array. Este array conterá todas as linhas de sua tabela (exceto os cabeçalhos). Cada linha por sua vez é um array de valores.

Exemplo :

//            Nome,         Min, Max, Valor atual
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];

const simpleTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

msg.payload = {
    'simpleTable' : simpleTable
}

return msg;

Add a Table widget in your Studio

Escolha o widget de tabela entre os widgets configuráveis :
drawer

Escolha o assunto/tópico (o nome que você deu ao nó do brainstudio no Data Flow Manager). Depois, você poderá escolher a chave de payload (a propriedade dentro da qual você colocou seus dados no payload) :
Missing

Se a mensagem “Awaiting data…” persistir, verifique o seu dataflow (fluxo de dados).

Altere o nome das colunas :
table

Resultado final :
simple

How do I format my table ?

Configure a fixed format

Na gaveta de configuração, você poderá adaptar alguns parâmetros da sua tabela :
fixed
Você pode configurar :

O nome (ou pode ser deixado vazio para remover a linha associada),
Uma descrição que será exibida abaixo do título,
A propriedade de densidade para reduzir a altura das linhas e oferecer uma exibição mais compacta,
A cor de fonte padrão (sobreposta pelo código HTML),
A cor do grid,
A cor de plano de fundo (background),
Exibir/ocultar a borda.

Add a dynamic format

É possível sobrepor a formatação definida na gaveta Edição aplicando código HTML a partir do fluxo :

Exemplo para alterar a cor da fonte condicionalmente :

//            Nome,         Min, Max, Valor atual
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];
let fontTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

color = "black";
for (let i = 0 ; i < fontTable.length ; i++){
    const vari = fontTable[i];
    const min = vari[1];
    const max = vari[2];
    const val = vari[3];

    if(val >= min && val <= max) color = "green";
    else if (val >= min/1.5 && val <= max*1.5) color = "#FFDD00";
    else color = "red";

    const formattedString = `<b><font style="color:${color}">${val}</font></b>`

    fontTable[i][3] = formattedString;
}

msg.payload = {
    'fontTable' : fontTable,
}
return msg;

Exemplo para alterar a cor do plano de fundo condicionalmente :

//            Nome,         Min, Max, Valor atual
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];
let backgroundTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

color = "black";
for (let i = 0; i < backgroundTable.length; i++){
    const vari = backgroundTable[i];
    const min = vari[1];
    const max = vari[2];
    const val = vari[3];

    if(val >= min && val <= max) color = "green";
    else if (val >= min/1.5 && val <= max*1.5) color = "yellow";
    else color = "red";

    formattedString = `<font style="background-color:${color}">${val}</font>`

    backgroundTable[i][3] = formattedString;
}

msg.payload = {
    'backgroundTable' : backgroundTable
}

return msg;

cond

TABLE