---
title: "info-table"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/info-table/
---
# info-table

## Overview

<Info title={"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.
* Versions prior to **4.79.0** use the older `info-table` behavior and styling.

</Info>

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

<Warning>

`info-table` should not be confused with [`object-table`](/docs/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.

</Warning>

### Basic Example

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

**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>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-0e5cfb168863d46ae43960b176a999a1cf8fbd34-2finfo-table-example-e665f9e6.png)

## Advanced Attributes

### `content-direction`

<SyntaxCard type={"left-to-right, right-to-left"} defaultValue={"left-to-right"} introduced="4.86.1" />

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>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2f2vjf9rpl9c2gkwss8tey-2fimage-7eaa8c29.png)

### `align-label`

<AttributeReference label="align-label" href="/docs/build/ui-components/common-attributes/align-label/" badge="advanced" tone="muted" />

### `id`

<AttributeReference label="id" href="/docs/build/ui-components/common-attributes/id/" badge="advanced" tone="muted" />

### `label-case`

<AttributeReference label="label-case" href="/docs/build/ui-components/common-attributes/label-case/" badge="advanced" tone="muted" />

### `label-color`

<AttributeReference label="label-color" href="/docs/build/ui-components/common-attributes/label-color/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `label`

<AttributeReference label="label" href="/docs/build/ui-components/common-attributes/label/" />

## Component Methods

The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/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.