# Table Display your data in form of a table with the table widget. ![](/files/-M6Zvl5BUplWW4HRWkkH) ## 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. {% hint style="info" %} 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](/manual/sf-platform/dashboards/default-sort-for-table-widgets.md). {% endhint %}

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](/files/2ockAMxumeoPDr83VcmV) ### 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.

Example of a fixed hyperlink in a table widget

{% hint style="info" %} 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. {% endhint %} ### Conditions and Statuses In the *Customize* tab, you will also find the option to add conditions, statuses, and progress bars to your table columns. {% hint style="info" %} 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. {% endhint %} #### 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: ![Example of a status configuration](/files/uEaybMKUQHHFGYpA8JH2) ![Example of a table widget with 2 statuses on the temp column](/files/lpstLW5E8Mnr2C2rGm1u) #### 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: 1. **Fixed Values:** * Select "Fixed" as the boundary datatype. * Manually enter both the minimum and maximum values that your progress bar should use. 2. **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.

A table widget with a progress bar column and fixed boundary values

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.

Table widget with a progress bar column and two conditions

#### 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:
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](/files/bASIWYKl4mcfaax11I90) ### 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](#conditions-and-statuses). {% hint style="info" %} Find out how to use emojis in a table widget [here](/manual/sf-platform/widgets/faq-and-troubleshooting.md#can-i-use-emojis-in-a-single-text-or-table-widget). {% endhint %} ### Colors The information about the *Colors tab* you can find [here](https://manual.senseforce.io/manual/sf-platform/widgets/color-conditions). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://manual.senseforce.io/manual/sf-platform/widgets/table.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.