# Table

The Table portlet is used to display data in a table format. The portlet can be read only or editable, the data can be formatted per column as text, number, date etc, the data can be grouped, and exported to Excel (.xlsx).&#x20;

<div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FfZgLaW0VH3ANzzJCTjjh%2FTable%20example.png?alt=media&#x26;token=a20beace-41b3-4f0c-86f8-f47778af11e3" alt=""><figcaption></figcaption></figure></div>

## General

General data is required for all portlets.

[General configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#general)

### Advanced settings

Exportable: enables a button to export the data as a Microsoft Excel File (.xlsx)

Render value as HTML: If the source data contains HTML tags the data be formatted accordingly

Draggable: Adds drag and drop possibility to the table. Table rows can be dragged to Gantt, Scheduler and Kanban using the drag-and-drop workflow configured in the receiving portlet.

## Listeners

The portlet can listen to the following events:

* On Row Selection
* On Refresh
* On Point Selection
* On Filter
* On Tree Node Selection

The portlet can send the following events:

* On Row Selection
* On Refresh

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M8tbrSaGIRYe9EthohB%2F-M8teH4YcOdpjR_NFfh4%2Fimage.png?alt=media&#x26;token=a6a858f7-e142-4381-a8d2-7694bd79d651" alt=""></div>

[Listeners configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#listeners)

## Data

### Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

* Database: uses a flow connector to retrieve data from a database
* Workflow: runs a workflow to retrieve data

[Data source configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#database-source)

[Workflow source configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#workflow-source)

### Data source columns

Copy from portlet: sets the default column size and order. To change the size of the columns, click and drag the column margin until the correct size is reached. To change the order of columns, drag and drop a column to a new location.

Manage: the columns can be configured in a grid view as well as the list view. This view can help for a better overview and quicker configuration when a lot of columns used.

Click *Execute* in the data source section to fetch the columns. Each column can be configured with:

* display name
* column type
* whether the column should be visible
* whether the column should be editable
* if the text in the column should be wrapped

<div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2F7eBBi79xDIFmABgS3yq1%2FTable%20-%20data%20source%20columns.png?alt=media&#x26;token=fad6a897-484f-4920-9933-e23a0adaacf5" alt=""><figcaption></figcaption></figure></div>

There are a number of column types to choose from. The default column type is text.

* Text: use to display column as a text fields
* Number: use for number fields where the number is an integer
* Decimal: used for numbers with decimals
* Date: will display the column as a date with no time
* Date & Time: use to display date and time
* Checkbox: the column field will be a checkbox The checkbox component only supports Boolean values.
* List of Value: connect the column to a list of values, which will be a drop-down list in the column field. Click the *Manage* button to go to Manage lists of values. Follow the link below to read more about lists of values.&#x20;
* Link: will display the content as a clickable link. Check the box Pretty link to show the link not as the URL value but as either a text or a column value.

{% content-ref url="../../getting-started/settings/list-of-value-management" %}
[list-of-value-management](https://help.novacuraflow.com/development/flow-portal-2/getting-started/settings/list-of-value-management)
{% endcontent-ref %}

### Default presentation

* Wrap header: choose whether to have the header content wrap instead of being clipped if the text does not fit. Note - column text wrap is configured in Data source column on the individual columns
* Unique row identifier column: If the table contains a column with a unique identifier for each row, it is possible to assign this here. This will allow the table to keep rows selected even after running a workflow or refreshing the data. Notice that Portal 2 will not check if the values are unique so it is the user's responsibility that the values are unique. (Released in version 2020.13.1 of Portal 2)
* Sort by: choose whether sorting should be by a specific column and/or if sorting should be in ascending or descending order. Note that if a column is formatted as a number but the value coming from the database is not a number, the columns can be sorted as text.
* Groupable: choose if the table content should be groupable by the users. It is also possible to set a default grouping for the content.
* Rows per page: set the number of rows shown on each page, and use pagination to go to the next page. Note: if the portlet size is smaller than the number of rows to be shown, the portlet will get a scroll bar.
* Copy cell sizes: choose to set the configured size of font and row size as default. To configure the font and row height, use the menu located in the bottom left corner of the table portlet. Once set, click the 'Copy cell sizes' to save the size as the default.

<div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FLqFZolovDVtnpDiVQyt1%2FTable%20-%20default%20presentation.png?alt=media&#x26;token=943c2aa1-e285-43f4-b944-6d32c8ebfd51" alt=""><figcaption></figcaption></figure></div>

### Edit operations

Edit operations are used to connect actions, such as creating, updating and deleting workflows through the portlet. The workflows can be either user or machine-type.&#x20;

Tick *allow selection of multiple rows* to enable selection of more than one row in the table. Use the Shift key to select multiple rows.

Click the drop-down to select an existing workflow or *New* to create a new one. In *Supported Actions,* tick the actions the workflow is to perform: create, update, or delete.

The variables sent to the workflow needs to be specified in the start step:‌

1. Table with table name specified in output.
2. All columns to be specified as variables inside the table.
3. Type variable which contains the action *create, update and delete*.

Click *New* to create a new workflow. A text box will pop up. Fill in the name of the workflow. Use Add, Map and Remove All to add the workflow input parameters.

* Add: add a user-defined column
* Map: adds all selected columns&#x20;
* Remove All: removes all columns

![](https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0RV_uSreIYGqavMluf%2F-M0Rj4RHTePHn47z1qVP%2FEditOperationsNewWF.gif?alt=media\&token=3f08d900-dcb7-4679-a144-5e8bad00ac0d)

## Interaction

### Quick action

Quick action is a row-specific action available to the user by clicking the cogwheel in the first grid column. The row data is sent as in-parameters to the workflow and can be picked up in the start step (and thus used in the workflow).

The quick action workflow is added by selecting a workflow from the drop-down list.&#x20;

### Custom button

The custom button is used to enable access to workflows in the portlet. The button will be placed in the portlet header.

Click *New* to add a custom button. Enter the button name: this text will be displayed on the button in the portlet. Select the workflow which is to be connected to the custom button from the drop-down list.

Configure when the custom button should be enabled:

* Always: the button is always available
  * if no rows are selected in the table, an empty data set is sent to the workflow
  * if one or more rows are selected, this data will be sent to the workflow
* Condition: the button is enabled if the condition is true for ALL selected rows
  * the selected row data is sent to the workflow

<div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FviUSPgKK9vr7pKlanMV4%2FCustom%20button%202.png?alt=media&#x26;token=468759c5-a8a6-47f8-8800-69ac28638b7c" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FPahkN294Z7yoIcdJO5ZM%2FTable%20buttons.png?alt=media&#x26;token=8287ca98-3305-4875-973f-dcd79dd3e25a" alt=""><figcaption></figcaption></figure></div>

## Row color rules

*Alternate row color* sets every other row to a default light grey color in order to make the table row visualization better. The color can be configured by clicking on the color box and selecting a color.

The table rows can have one or more color rules. To enter a new rule:&#x20;

* click *New*
* select a color
* enter the condition field, operator and value
* preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.&#x20;

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0Yr-L6UQiwZsh6bkXH%2F-M0Yrag9_4QrgcDWKJyA%2Fimage.png?alt=media&#x26;token=776fe6fb-b0e1-49c7-b54a-808215a3d9b4" alt=""></div>

## Style

In the style section for the table portlet, it's possible to change the header text color and add a header stripe. It is also possible to set up color rules for table rows and cells.

### Row color rules

*Alternate row color* sets every other row to a default light grey color in order to make the table row visualization better. The color can be configured by clicking on the color box and selecting a color.

The table rows can have one or more color rules. To enter a new rule:&#x20;

* click *New*
* select colors
* enter the condition field, operator and value
* preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.&#x20;

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-MOHO6DA7sRkWtPki1av%2F-MOHRuwTnfRxQSdda9wi%2Fimage.png?alt=media&#x26;token=8c783167-db5a-4a25-9bcb-c00335d017d3" alt=""></div>

### Cell color rules

The table cells can have one or more color rules. To enter a new rule:&#x20;

* click *New*
* select colors
* enter the condition field, operator and value
* preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.&#x20;

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-MOHSEe6nVffzDibE4CR%2F-MOHTOmBtVVLVc_O--j-%2Fimage.png?alt=media&#x26;token=3731e99f-637f-434f-9ad7-f9529b9b249b" alt=""></div>

More about style configuration below.

[Style configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#style)

## Table Usage

The following sections briefly explain how a user can interact with the table portlet in the Portal.

### Column rearrangements

The user can rearrange columns if preferred by dragging and dropping from the column’s header.

### Sorting

The user can choose to sort the data in the table by either clicking directly in the header cell or by clicking on the column menu and selecting the appropriate sorting. It is also possible to sort multiple columns.  To sort multiple columns, hold **CTRL** key and click the column header. To clear sort for a column, hold **SHIFT** key and click the column header.

### Filter

The user can choose to filter the data in the table to show the requested data. The filter is accessible from the column menu by choosing *Filter*. The user can then choose the appropriate filter operator and value to filter on.

### Export to Excel

If the table portlet has been configured to allow exports, the user can choose to export the table data to Excel by clicking on the *export* button in the top right corner of the table portlet. The user is then given the choice to either export all of the data results, or the results from the specific page in the table.

### Render values as HTML

When checked, the table cells will render the contents as HTML. I.e. the cell data could be:

```
<strong>Some heading text</strong>
<br /><br />
Cell data here
```

### Full screen

By clicking the *full screen* button in the top right corner of the table portlet, the table portlet can be viewed in full screen mode.
