Columns

columns without a heading

When the visible columns of an object-table are empty, the row of columns gets hidden in its entirety. In the example below both columns evaluate to an empty string, which makes the column heading disappear.

<object-table>
    <column heading="">{age}</column>
    <column>{color}</column>
</object-table>

Fitting content

Various fit directives are exposed for controlling column content. The default is auto where the column attempts to divide space evenly or, if possible, expand to its maximum width.

Using to break lines

object-table will always respect escape sequences regardless of the fit mode being applied. In both examples below, the content will always be on at least 3 lines.

<object-table>
    <column display="Content on 3 lines">Line 1\nLine2\nLine3</column>
</object-table>

function getContent(){
    return "Line 1\nLine 2\nLine 3";
}

Shrink

With fit="shrink" the column will shrink to its minimum width, causing column headings and content to wrap.

<object-table>
    <column fit="shrink" display="Name">{name}</column>
    <column>{age}</column>
    <column fit="shrink" display="Last Name">{surname}</column>
</object-table>

No Wrap

With fit="no-wrap" the column will prevent automatic wrapping, which forces the content into a single line.

Tip: Use this in conjunction with escape sequences to ensure how many lines of text there will be, while ensuring that each line does not wrap.

Auto / Word wrap

With fit="auto" (which is also the default) content will automatically wrap at the tables discretion. The table will always try to prevent horizontal scrolling by causing content to wrap when it can. In cases where content can no longer wrap to new lines, the table will start to scroll horizontally.

Visibility

show-if and hide-if can also be applied on individual columns:

<object-table ...>
    <column show-if="false" heading="Hidden col 1">hidden</column>
    <column hide-if="true" heading="Hidden col2">hidden</column>
</object-table>

Note: When sets of show-if and hide-if change at the same time, the table will wait for all of the changes to propagate first and then apply them at the same time.