# row

A `row` is responsible for displaying data inside an `info-table`. An `info-table` can have multiple `row`s.

The rows of `info-table` are specified using `row` tags. Rows act similarly to [`info`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/info) component.

## Standard Attributes

### `bind`

**Optional**

**Type**: `string`

**Default**: unset

The variable or field's value which should be displayed on the right hand side of the `info-table` row.

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" bind="view_variable" />
</info-table>
```

{% endcode %}

{% hint style="warning" %}
Use either [`bind`](#row-bind) or [`value`](#value), not both.
{% endhint %}

{% hint style="info" %}
**Note:** when binding to a field the field's label will automatically be used. Specify `label=""` to override this behavior.
{% endhint %}

### `label`

**Optional**

**Type**: `string`

**Default**: unset

Specify a label to be displayed on the left side of the `info-table` row.

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" />
    <row label="Job description" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-7cfc1b691ee5731f05e4a3952b5e2599f017ef0f%2Finfo-table-row-label.png?alt=media)

### `value`

**Optional**

**Type**: `string`

**Default**: unset

Specify the text to display on the right side of the `info-table` row. This is an alternative to using the [`bind`](#bind) attribute.

{% hint style="warning" %}
Use either [`bind`](#row-bind) or [`value`](#value), not both.
{% endhint %}

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" value="Text based value for row" />
    <row label="Job Description" value="Text based value for row" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b684d226aeb7d58629c3e14bc0baebe306b418c4%2Finfo-table-row-value.png?alt=media)

## Advanced Attributes

### `label-color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: Primary text color

Specify the color of the [`label`](#label) text of the `info-table` `row`.&#x20;

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" label-color="#ff6f00" />
    <row label="Job Description" label-color="#ff6f00" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-01598906786a41d42993646fb70705ae2a062aad%2Finfo-table-row-label-color.png?alt=media)

### `label-icon`

{% hint style="info" %}
**Version compatibility**

`label-icon` was introduced in version **4.86.1** of the JourneyApps Runtime to replace [`left-icon`](#left-icon).
{% endhint %}

**Optional**

**Type**: `string`

**Default**: unset

Specify the left icon in the row. Find a list of available icons [here](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/icons).

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" value="Text based value for row" label-icon="fa-star" />
    <row label="Job Description" value="Text based value for row" label-icon="fa-star" left-icon-color="#1e88e5" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-134b9994f69a79b95c559cde612a11f09bbb2ef8%2Finfo-table-row-left-icon.png?alt=media)

### `label-icon-color`

{% hint style="info" %}
**Version compatibility**

`label-icon-color` was introduced in version **4.86.1** of the JourneyApps Runtime to replace [`left-icon-color`](#left-icon-color).
{% endhint %}

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: unset

Specify the color of the `label-icon`.&#x20;

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Description" value="Text based value for row" label-icon="fa-star" label-icon-color="#1e88e5" />
</info-table>
```

{% endcode %}

### `left-icon`

{% hint style="danger" %}
**Deprecated**

`left-icon` is deprecated since version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

Deprecated. See [`label-icon`](#label-icon).

### `left-icon-color`

{% hint style="danger" %}
**Deprecated**

`left-icon-color` is deprecated since version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

Deprecated. See [`label-icon-color`](#label-icon-1).

### `right-icon`

{% hint style="danger" %}
**Deprecated**

`right-icon` is deprecated since version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

Deprecated. See [`value-icon`](#label-icon-1).

### `right-icon-color`

{% hint style="danger" %}
**Deprecated**

`right-icon-color` is deprecated since version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

Deprecated. See [`value-icon-color`](#value-icon-color).

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `value-icon`

{% hint style="info" %}
**Version compatibility**

`value-icon` was introduced in version **4.86.1** of the JourneyApps Runtime to replace [`right-icon`](#right-icon).
{% endhint %}

**Optional**

**Type**: `string`

**Default**: unset

Specify the right icon of the `row`. Find a list of available icons [here](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/icons).

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" value="Text based value for row" value-icon="fa-star" value-icon-color="#ff6f00" />
    <row label="Job Description" value="Text based value for row" value-icon="fa-star" value-icon-color="#ff6f00" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-f0ffa4fd5254dedbbd533f89e829486b815769e1%2Finfo-table-row-right-icon.png?alt=media)

### `value-icon-color`

{% hint style="info" %}
**Version compatibility**

`value-icon-color` was introduced in version **4.86.1** of the JourneyApps Runtime to replace [`right-icon-color`](#right-icon-color).
{% endhint %}

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: unset

Specify the color of the `value-icon`.&#x20;

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Description" value="$:{asset.description}" value-icon="fa-star" value-icon-color="#1e88e5" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-f0ffa4fd5254dedbbd533f89e829486b815769e1%2Finfo-table-row-right-icon.png?alt=media)

### `value-color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: Primary text color

Specify the color of the [`value`](#value) text of the `info-table` row.&#x20;

{% code title="main.view\.xml" %}

```xml
<info-table>
    <row label="Job Title" value="Text based value for row" value-color="#1e88e5" />
    <row label="Job Description" value="Text based value for row" value-color="#1e88e5" />
</info-table>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e132e876490f5283e9ffe962342616b090e4d04b%2Finfo-table-row-value-color.png?alt=media)