Table

Owned by Katya Raykova
Last updated: Apr 08, 2024
5 min read

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.

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

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.

  • 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.

  • 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.

Colors

The information about the Colors tab you can find here.