column

Overview

A column is a fundamental element of an object-table. All data displayed in an object-table is arranged in columns. Columns define the field or value to display, and the table's rows define the objects containing the field or value.

Basic Example

An object-table with 2 columns:

main.view.xml

<var name="users" type="query:user" />

<object-table label="Users" query="users">
    <column heading="First Name">{first_name}</column>
    <column heading="Last Name">{last_name}</column>
</object-table>

main.js

function init() {
    view.users = DB.user.all();
}

Standard Attributes

heading

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default: unset

The text that is displayed as a column header in the object-table.

Advanced Attributes

display

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default value: The cell's value

Override the value that is being displayed in the cell. See the guide on editing cells for more information.

filter

Optional

Default value: true

When set to false, the column can no longer be filtered by the user. See default-filter on object-table to specify the default value for all columns on a table.

fit

Optional

Type: auto | shrink | no-wrap

Default value: auto

Configure the width of object-table columns based on their content. See the column guide for more information.

freeze

Optional

Type: left | right | none

Default value: none

Shows the column statically either on the left or the right of the table. See the guide on frozen columns for more information.

icon

Optional

Type: string

Default value: unset

Adds an icon to the left side of a cell. The icon can be a Font Awesome icon or an Ionicons icon.

search

Optional

Type: boolean

Default value: When no columns specify search="true", all columns are included when searching. When any column is set to search="true", columns without it are not included in when searching.

Whether the column should be included when searching the table.

show-if and hide-if

pageshow-ifpagehide-if

sort

Optional

Type: asc | desc

Default value: unset

Puts the column into a default sort mode regardless of the underlying query. (Useful to indicate which column is being sorted when cells are editable).

sort-value

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default value: unset

The value to sort the column on instead of the display value. Useful when the display value would be something like: {cost} but the column should sort only on cost. In that case, the attribute would be: sort-value="$object.cost".

sorting

Optional

Type: boolean

Default value: true

When set to false, the column is no longer sortable by the user. See default-sorting on object-table to specify the default value for all columns on a table.

style

See object-table > style

style-align

See object-table > style-align

style-background-color

See object-table > style-background-color

style-bold

See object-table > style-bold

style-color

See object-table > style-color

style-icon-color

See object-table > style-icon-color

style-italics

See object-table > style-italics

style-strikethrough

See object-table > style-strikethrough

style-underline

See object-table > style-underline