# info-table

## Overview

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

* `info-table` is supported in all versions of the JourneyApps Runtime.
* `info-table` was functionally and visually updated in version **4.79.0** of the JourneyApps Runtime.
* Please refer to the legacy `info-table` component [documentation](https://docs.journeyapps.com/legacy-docs/ui-components/info-table-legacy-docs) for versions prior to **4.79.0** of the JourneyApps Runtime.
  {% endhint %}

This component displays a table with a label, and a number of rows. Each [`row`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/info-table/row) contains a left-aligned [label](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/row#label) and a right-aligned [value](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/row#value).

{% hint style="warning" %}
`info-table` should not be confused with [`object-table`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table), which is used to display a collection of multiple objects, with any number of columns, and a header row.
{% endhint %}

### Basic Example

The simplest way to use `info-table` is to specify the `<row>` tags between the `<info-table>` tag.

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

```xml
<info-table label="Example Info Table">
    <row label="Left Value" value="Right Value" />
    <row label="Left Value" value="Right Value" />
    <row label="Left Value" value="Right Value" />
</info-table>
```

{% endcode %}

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

## Standard Attributes

### `label`

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

## Advanced Attributes

### `align-label`

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

### `content-direction`

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

`content-direction` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `left-to-right`, `right-to-left`

**Default**: `left-to-right`

Specify the direction of the component’s content. Typically this mirrors all elements within the component.

```xml
<columns>
    <column>
        <info>content-direction="left-to-right"</info>
        <info-table content-direction="left-to-right">
            <row label-icon="fa-calendar" label="My label" value="My value" />
            <row label="My label 2" value="My value 2" value-icon="fa-plane" />
        </info-table>    
    </column>
    <column>
        <info>content-direction="right-to-left"</info>
        <info-table content-direction="right-to-left">
            <row label-icon="fa-calendar" label="My label" value="My value" />
            <row label="My label 2" value="My value 2" value-icon="fa-plane" />
        </info-table>   
    </column>
</columns>
```

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2F2VjF9rpl9C2gkwSS8tEY%2Fimage.png?alt=media&#x26;token=b239849c-873d-4015-b015-de696ffe6b3d" alt=""><figcaption></figcaption></figure>

### `id`

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

### `label-case`

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

`label-case` was introduced in version **4.86.5** of the JourneyApps Runtime.
{% endhint %}

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

### `label-color`

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

### `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 %}

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.infoTable({id:'my-id'})` is called from JS/TS:

### `scrollIntoView`

Programmatically scroll until the `info-table` is visible in the view.