Table

Display your data in form of a table with the table widget.

Customization

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.

The default sort of any table widget can also be overwritten for every dashboard you use your table widget in. You can read more about this here.

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”).

Adding Hyperlinks to column values

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.

Before displaying a hyperlink, the table widget will check if the hyperlink's URL (set either by data source or a fixed value) is valid. If the link is not valid, no hyperlink will be displayed.

Conditions and Statuses

In the Customize tab, you will also find the option to add conditions, statuses, and progress bars to your table columns.

You can only use one feature at a time, so if you use statuses, you can't use conditions or progress bars and vice versa. You can switch between the features by toggling on "Use status" or "Use progress bars", or use conditions if none are toggled on.

Also, keep in mind that statuses and progress bars only work on numeric columns, so if you don't see the "Use Status" or "Use progress bar" toggle, it's because the column you selected is not numeric.

Statuses

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: Displays 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 be 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:

Progress bars

When you enable progress bars, you have the option to display a progress bar within each cell instead of showing a numeric value. The progress bar visually represents the value that would otherwise be displayed numerically.

To ensure the progress bar effectively conveys meaningful information, it's crucial to set appropriate minimum and maximum values for it. After enabling "Use progress bar," additional controls will appear below the toggle, allowing you to define the boundaries for your progress bar.

You have two options for setting these boundaries:

Fixed Values:
- Select "Fixed" as the boundary datatype.
- Manually enter both the minimum and maximum values that your progress bar should use.
Dynamic Values from a Dataset or Script:
- Choose either "Dataset" or "Script" to obtain boundary values from a dataset or script.
- Select the specific dataset or script you want to use.
- Specify which columns from the selected dataset or script should serve as your minimum and maximum values for the progress bar.

In addition to the standard progress bar settings, you can enhance your progress bars by adding conditions, which operate in a manner similar to statuses and general conditions.

By default, a progress bar is displayed with a blue fill color. However, with conditions, you can dynamically change the fill color of the progress bar based on specific value ranges.

For instance, you might define a condition that turns the progress bar red when a temperature value falls below a certain threshold and green when the temperature is within an acceptable range.

Conditions

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 #00ff00 and the background color should be #2ccce4, when the value of temp column is between 0 and 40:

This condition would then look like this:

Global conditions

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.

Configuring global conditions works exactly the same as on a column, so please refer to the documentation here.

Find out how to use emojis in a table widget here.