Overview

The Studio Table Widget allows you to display your data in a simple table.

How do I create a table ?

Create the flow

In the payload sent to the Brainstudio node, you need a property for each table you want to feed.

The content of this property has to be an array. This array will contain all the lines of your table (except the headers). Each line is an array of values.

Example :

//            Name,         Min, Max, Current value
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

Choose the table widget among the widgets:

Choose the topic (the name you gave to the brainstudio node in the Data Flow Manager). Then, you can choose the payload key (the property in which you put your data in the payload):

If the “Awaiting data…” message persists, please check your dataflow.

Change the name of the columns:

Final result:

How do I format my table ?

Configure a fixed format

In the drawer, you can adapt some parameters of your table :

You can configure:

• The name, or it can be left empty to remove the associated line,
• A description which will be displayed under the title,
• The density property to reduce the height of the lines and have a more compact display,
• The default font color (overridden by HTML code),
• The grid color,
• The background color,
• Show/hide the border,

Add a dynamic format

It is possible to override the formatting defined in the Edition drawer by applying some HTML code from the flow:

Example to change font color conditionally:

//            Name,         Min, Max, Current value
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;

Example to change background color conditionally:

//            Name,         Min, Max, Current value
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;