Links

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

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

style-align

style-background-color

style-bold

style-color

style-icon-color

style-italics

style-strikethrough

style-underline

Last modified 6mo ago