Table widgets present your data in a tabular way. It is one of the special kinds of widgets that unlike the others, you won’t find the traditional variable selector, initially there’s only two fields to fill: the number of rows and columns. After selecting these two values, you’ll have a scheme of how the table is going to look like with all your rows and cells.

To finish, you just need to fill your cells either with text or with the value of a variable. To do that, click on a cell, select the type and fill the value (a text or a variable).

Cells with variables will always display the last value of the variable and it will be updated in real time as soon as a new value arrives.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/XOjhsa4iTaiWOYtJJ2y-EwgJwxfJeGWYeDILZPPwsso/widget_table--dU.png


Links

If the variable contains a URL, an icon will be shown, and if the user clicks in the icon, or the URL, this link will be opened in a new tab.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/lr4S372jFE3-bIPqxj3vPh8VOoD2RoPvdKwqMEYjIrw/Screen Shot 2018-04-17 at 17.13.17-vDE.png


Metadata for Color and Link Options

You are able to define colors for the cell where a variable is displayed. By default, the background is transparent (white). If you use metadata when posting a variable, you are able to define the background color of that specific cell. For example, by adding metadata to this POST in JSON below, the cell that shows the variable ‘temperature’ will change its color to ‘green’.

{
    "variable" : "temperature",
    "value": 71,
    "unit"  :"F",
    "metadata": {"color":"yellow"}
}

As the color should be associated with the data of a variable, it is not possible to color cells that are selected as type ‘Text’ (option available in each cell input used during the configuration). Use the metadata color options from your Analysis to help your users to detect issues or alerts on a table more easily.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/FPM2Nu-fV9IFg2mW_JBRvWJz2fscb8aBLX8BAR3gDNo/widget_table_color-VTs.png

You can also use the metadata parameter to create a link to another dashboard or external Url. Let's take a look in another example:

{
    "variable" : "address",
    "value": "Raleigh, N.C",
    "serie"  :"12444",
    "metadata": {"url":"https://admin.tago.io/dashboards/info/5b16b4c86ba351000105badc"}
}

If the user click in the text Raleigh, N.C, he will be redirected to another dashboard. You can use that to improve the user navigation or redirect them to more informations in another application/site.

This is the final result:

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/UIwGODh75C00-U43LucSt8tZjNxzurjhN8ypDCWOI7A/Screen Shot 2018-07-24 at 16.00.02--IE.png


Dynamic Table

Dynamic tables are tables that are populated dynamically as your data arrive while keeping the history of the previous data in each row. Its configuration is easy, just pick your variables, choose a time span and you are ready to go. Make sure that the data you want to display in the table is grouped using a serie number, otherwise the values will appear each one in its own rows, with all the other cells left in blank.

Each one of the variables you selected will become a column and the rows will contain the values, from the most recent to the oldest data. As soon as new values of the selected variables arrives, they are added to the table.

By default the column title will be the variable name, but you can change it by adding a label to your variables.

To temporarily order columns just click on the label of the column, clicking again will toggle the order in descend and ascend mode.

Advanced options

Under parameter configuration you will find some specific options:

  • Maximum number of rows: if the time span isn’t enough, you can also filter the exact amount of data that will appear in your table using this option. We suggest to keep the number of rows as low as possible, as numbers above 20 can start to get the visualization of the browser very slow (caused by a combination of the browser technology, internet speed, and computer available memory).
  • Only display rows with all values: this option guarantees that only rows with values in all of its cells will be displayed.
  • Display date and time: if you check this options, a column named “Time” will be added to the table and will show the time of one of the values of that row. This “Time” comes from the original json field data (time stamp from the device).
  • Add filter field: If set to Yes, a filter field will be displayed at the top of the dynamic table. This field allows users to search for characters or words in the whole table, displaying the filtered results.
https://cdn.elev.io/file/uploads/VkSrjeSoWpdg7LeGdh2jKUEagxh0dd_cO83j6HUV_6s/1Qua3qSo36ZG4zlFoRwlMmodcgOfyysWdttipZEUqRU/filter_feature-R2k.png
  • Allow User to delete rows: if you check this option, the dynamic table will render a column with a Trash icon on each row. By clicking on this icon, users can delete the entire row - which means that the data showed in that row will be completely deleted from the bucket.
  • Analysis to run when user delete rows: When the options “Allow User to delete rows” is checked, you can select an analysis that will run when the user click on the ‘Trash’ icon. All data that was deleted will be sent to the selected Analysis on the scope parameter.

Editing values inside of the table

You can quickly modify a variable's value inside of a table by enabling the edit option located inside the widget's configuration. This options makes it very easy for you to do quick changes to your variable's values.

To enable this option, head over to the widget's configuration, available by clicking in the menu option in the far top right of your widget.

Now, select the option Edit. A new set of options will appear, select the Parameter Configuration tab.

Right below Edit Configuration, there is another set of options, each option is being associated with a variable of your table. 

  • The first option, Allow user to edit field?, indicates wheter you can edit or not, this field in the table. The other options will only be available if you mark the editable option as yes.
  • The Field Type option indicated what kind of value will be able to be submitted in the input once the user modifies it.
  • The Is it a required field? option indicates if the field can be left empty or not when it is modified. If it is marked as yes, the field will be obligatory.
  • The Field placeholder option shows a placeholder in the input when the data in the variable is empty.

Once you mark this field as editable, you can modify all the editable values of a row by pressing the pencil icon of the respective row in the right side of the table. 

Only the fields that were marked as editable will be able to be modified.

To save the changes, press the save icon that will subsequently appear.

These are the types of fields available for a variable when we modify it.

  • Text (default)
  • Number
  • Dropdown

Text

A Field with the type text accepts any kind of input.

Number

If the field type is Number, only numbers will be accepted in the input that will appear once we modify the row.

Dropdown

The dropdown field shows suggestions of values once the focus in on the field. Upon selecting this option, new options will appear for you to customize your dropdown. 

The first option in the top left corner is called Enable Label Option, this options allows labels to be displayed instead of the actual values of the options. if you set this field as yes, everytime the variable's value matches one of the values in the options, the text inside the variable will be changed to the respective label.

In this example, we are saying that everytime we select the option Car in the dropdown, automatically that variable will be set to the value "static_1".

By selecting the option Car, the variable will have a value of "static_1". If the option Bike is chosen, the variable will have a value of "static_2", just like it was set in the options.

The second field in the dropdown's configuration is the type of the dropdown. A dropdown can be either Static or Dynamic. 

Static dropdowns are the ones that contain a static amount of suggestions that are put manually in the field's configuration. 

Dynamic dropdowns are the ones that contain an infinite amount of suggestions, the suggestions are acquired from the variables of your system.

In the dropdown above, we have set the suggestions to dynamic, and to get the values from the variable my_variable from the Bucket My Bucket.

If we enter in edit mode and focus the input, the options of the dropdown will be shown in accordance with the values of the variable my_variable

In dynamic dropdowns, an optional label field can be sent via devices in the metadata object to set the label of the variable shown. The same principles apply here, meaning if a label was sent via device and the value matches a value being displayed, the text will show the label, and not the value.