info-table

Overview
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 for versions prior to 4.79.0 of the JourneyApps Runtime.
This component displays a table with a label, and a number of rows. Each row contains a left-aligned label and a right-aligned value.
info-table should not be confused with object-table, which is used to display a collection of multiple objects, with any number of columns, and a header row.
Basic Example
The simplest way to use info-table is to specify the <row> tags between the <info-table> tag.
main.view.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>
Standard Attributes
label
label
Advanced Attributes
align-label
align-label
content-direction
Version compatibility
content-direction was introduced in version 4.86.1 of the JourneyApps Runtime.
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.
<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>
id
id
label-case
Version compatibility
label-case was introduced in version 4.86.5 of the JourneyApps Runtime.
label-case
label-color
label-color
show-if and hide-if
show-if
hide-if
Component Methods
The following component methods are available when an 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.

info

row

Last modified 1mo ago

info-table

Overview

Basic Example

Standard Attributes

`label`

Advanced Attributes

`align-label`

`content-direction`

`id`

`label-case`

`label-color`

`show-if` and `hide-if`

Component Methods

`scrollIntoView`