Display your data in form of a table with the table widget.
In the Table tab you can find some settings that will affect your table as a whole:
- Show Units: decide if you want to display the units associated with the displayed columns in the header of the column.
- Sticky Header: turned on the header will stay visible at the top of your widget even when scrolling down.
- Sortable: with sortable enabled you can sort your table by clicking on the table headers.
- Hide Lines: will hide all horizontal grid lines from your table.
After enabling the Sortable setting, you may notice that a new section Default sort settings will show up below.
By default, a table will not have any columns sorted when it is first rendered on e.g. a dashboard and will simply display the sort order that is defined in the underlying dataset/script. When defining a column and a sort order in the Default sort settings section, your table will initially always have this default sorting.
Settings for a sortable table that is initially sorted by the Timestamp column in ascending order
In the Customize tab you also have the option to change certain settings on each column separately:
- Bold: makes the text for this column bold
- Width: if you want you can give your column a fixed width in percent here
If your data consists of decimals numbers – you can use the “Value decimals” field, where the user can set the number of symbols after the dot (put the data from min “1” to max “20”).
Value Decimals field
You additionally have the possibility to add hyperlinks to your columns values. To do that, navigate to the Customize tab and select the column to which you want to add a hyperlink to. After doing that, you should see a toggle called Hyperlink that you need to enable.
Now you have two different options to set the URL that your hyperlink should lead to:
- Datasource: When you select datasource, you will be able to select a string column from your widgets datasource (either a dataset or a script). Each hyperlink in your table, will then get the value of that column in the same row and use it as the target URL of the hyperlink.
- Fixed: When selecting fixed, you will be able to simply set a target URL by entering it in the corresponding field. This way, all hyperlinks in your table will lead to the same URL.
Example of a fixed hyperlink in a table widget
In the Customize tab, you will also find the option to add conditions and statuses to your table columns.
With statuses, you can choose to display a colored circle and a specific text, depending on the value of your underlying column. So for example, instead of just displaying the raw value, you could create two statuses:
- Status 1: Displays a green circle when the value is below a certain threshold
- Status 2: Display a red circle when the value is above a certain threshold
This can be useful if you e.g. want to easily see if a temperate value is too high.
Status is defined by the following values:
- Color: The color in which the status circle should be displayed
- Status text: A helper text that will get displayed next to the status circle
- Min/max: Defines the range of the status
The following image is an example of a status defining that a value between 40 and 1000 should have a red status circle and the text "Too hot" next to it:
Example of a status configuration
Example of a table widget with 2 statuses on the temp column
Conditions are very similar to statuses, but instead of replacing the raw value of your column with a status circle, a condition instead just changes the text color and/or the background color of your table cell depending on a condition.
Another difference is that a condition can depend on a different column than the one it's defined on. With that you can define e.g. a condition on a thing column, saying that the text color should be green when the value of the temperature column is between 0 and 40.
A condition is defined by the following values:
- Text color: The text color that should be used when the condition is met
- Background color: Optionally, the background color that should be used when the condition is met.
- Column: A column of the datasource that should be used to check if the condition is met
- Min/max: Defines the range of the status
The following image is an example of a condition defined on the "Thing" column, saying that the text color should be
#00ff00and the background color should be
#2ccce4, when the value of temp column is between 0 and 40:
Example configuration of a condition
This condition would then look like this:
Example with a condition on the thing column depending on the value of the temp column
On the Condition tab of a widget, you can define global conditions. While conditions on a single column change the text and/or background color only of the single column, global conditions change the text and/or background color of all columns.