info-table
Last updated
Last updated
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.
The simplest way to use info-table is to specify the <row> tags between the <info-table> tag.
<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>labelalign-labelcontent-directionOptional
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>idlabel-caselabel-colorshow-if and hide-ifThe following component methods are available when an id is assigned to the component and component.infoTable({id:'my-id'}) is called from JS/TS:
scrollIntoViewProgrammatically scroll until the info-table is visible in the view.
