object-table

Overview

object-table displays data from objects retrieved from a database query or array in a table format.

Version compatibility

object-table v3 was introduced in version 4.43.0 of the JourneyApps Container.

For older container versions, see the documentation for the deprecated object-table v1 and object-table v2.

Check out the Showcase: Object Tables template app. It includes implementations of the most common object-table functionality and features.

Object tables V3

These docs describe Object tables v3. To enable these object tables for an existing app (v3 is the default for new apps), enable the Object tables v3 setting in OXIDE (under App Settings).

Basic Example

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

`label`

label

`query`

Required

Default: unset

query contains the name of the database query or array variable to populate the objects in the object-table.

main.view.xml

<var name="countries" type="query:country" />
<!-- OR -->
<var name="countries" type="array:country" />

<object-table label="Countries" query="countries">
    <column heading="Country Name">{name}</column>
    <column heading="Population">{population}</column>
</object-table>

Advanced Attributes

`align-label`

align-label

`automatic`

Optional

Type: boolean

Default: true

A object-table with the automatic="false" attribute it will automatically go into controlled mode. See the controlled object-table guide for more information.

`bind`

An object-table with a bind attribute implemented allows for a row to be 'selected'. The row is then also visually highlighted in the table.

When the bound variable changes, a digest cycle is run. It is therefore safe to rely on this variable to represent the selected state of the table at all times.

It is also possible to change the bound variable programmatically in the view code, which will cause the object-table to update the row. When this happens, a digest cycle is not run since the change originates from the view code.

bind

`controls`

Optional

Type: none | bottom | top | both

Default: bottom

These include a search box and pagination controls for users to interact with the table and data. See more information in the guide on object-table controls.

`default-filter`

Deprecated

default-filter is deprecated. Please use filter instead.

`default-sorting`

Deprecated

default-sorting is deprecated. Please use sorting instead.

`empty-message`

Optional

Type: string

Default: "Your items will appear here"

Text displaying in the table when no data objects are available.

`filter`

Optional

Type: boolean

Default: false

Set the default value for the filter attribute on all columns in the table.

`hydrate-state`

Optional

Default: unset

This attribute is deprecated. Please use init-state and on-state-change.

`id`

`init-state`

Optional

Default: unset

init-state initializes an object-table's state after the table is loaded using a similar structure as on-state-change. See more information in the guide on object-table state.

`label-case`

Version compatibility

label-case was introduced in version 4.86.1 of the JourneyApps Runtime.

label-case

`label-color`

Version compatibility

label-color was introduced in version 4.86.1 of the JourneyApps Runtime.

label-color

`limit`

Optional

Type: integer

Default: 25

In a paginated table, the limit attribute determines how many rows to display on a single page. See more information in the guide on object-table modes.

`loading`

Optional

Type: boolean

Default: false

A table can be put into a loading mode using the loading="true" property, which can also be the result of a JavaScript/TypeScript function.

While a table is busy loading, it will display a placeholder loader. The table will load once it is ready.

`mode`

Optional

Type: paginate | scroll

Default: paginate

Specifies whether a table with a number of rows should be paginates or scrollable. See more information in the guide on object-table modes.

`min-row-height`

Version compatibility

min-row-height was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 38 px

Specify the minimum height of the object-table rows (incl. the header row). Note that padding-vertical may increase the actual row height.

`on-change`

on-change

The on-change attribute only has an effect if the bind attribute is set.

`on-paste`

Optional

Default: unset

Triggered when: Data is pasted into the object-table.

Event parameters: See more information in the guide on object-table copy & paste.

Return value: See more information in the guide on object-table copy & paste.

on-paste is an event that calls a JS/TS $:function or navigation. See more details:

JS/TS Events

`on-state-change`

Optional

Default: unset

Triggered when: the state of the table is changed due to a UI interaction such as changing to the next page or applying a column filter.

Event parameters: $state

Return value: See more information in the guide on object-table state.

on-state-change is an event that calls a JS/TS $:function or navigation. See more details:

JS/TS Events

`on-state-changed`

This attribute is simply an alias to on-state-change.

`padding-horizontal`

Version compatibility

padding-horizontal was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 12 px

Specify the horizontal padding (left and right) within object-table cells (incl. header cells).

`padding-vertical`

Version compatibility

padding-vertical was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 8 px

Specify the vertical padding (top and bottom) within object-table cells (incl. header cells).

`page-count`

Optional

Type: integer

Default: unset

When an object-table is in controlled mode, the page-count attribute must reference a function which returns the total number of pages, since the table cannot determine the page count in its own. See the controlled object-table guide for more information.

`paginate-padding-horizontal`

Version compatibility

paginate-padding-horizontal was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 10 px

Specify the horizontal padding (left and right) within the object-table pagination controls (where mode is set to paginate).

`paginate-padding-vertical`

Version compatibility

paginate-padding-vertical was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 8 px

Specify the vertical padding (top and bottom) within the object-table pagination controls (where mode is set to paginate).

`paginate-select-padding-horizontal`

Version compatibility

paginate-select-padding-horizontal was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 10 px

Specify the horizontal padding (left and right) within the page selection dropdown within the object-table pagination controls (where mode is set to paginate).

`paginate-select-padding-vertical`

Version compatibility

paginate-select-padding-vertical was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 8 px

Specify the vertical padding (top and bottom) within the page selection dropdown within the object-table pagination controls (where mode is set to paginate).

`paginate-select-text-size`

Version compatibility

paginate-select-text-size was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 16 px

Specify the text size within the page selection dropdown within the object-table pagination controls (where mode is set to paginate).

`search-padding-horizontal`

Version compatibility

search-padding-horizontal was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 10 px

Specify the horizontal padding (left and right) within the object-table search box.

`search-padding-vertical`

Version compatibility

search-padding-vertical was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 8 px

Specify the vertical padding (top and bottom) within the object-table search box.

`search-font-size`

Version compatibility

search-text-size was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 16 px

Specify the text size within the object-table search box.

`show-if` and `hide-if`

show-if hide-if

`show-pagination`

Version compatibility

show-pagination was introduced in version 4.89.0 of the JourneyApps Runtime.

Optional

Type: boolean

Default: true

In a paginated table, and when controls are shown, the show-pagination attribute can be used to show or hide the pagination controls. This may be useful for tables that only have a single page.

`show-search`

Version compatibility

show-search was introduced in version 4.89.0 of the JourneyApps Runtime.

Optional

Type: boolean

Default: true

When controls are shown, the show-search attribute can be used to show or hide the search box independent of the pagination controls.

`sorting`

Optional

Type: boolean

Default: true

Set the default value for the sorting attribute on all columns in the table.

`sticky-footer`

Optional

Type: boolean

Default: unset

When set to true, freezes the object-table controls (when they display at the bottom of the table).

When an object-table has sticky headers and/or footers along with mode="paginate", the controls will also be present in the corresponding sticky header or footer.

`sticky-header`

Optional

Type: boolean

Default: unset

When set to true, freezes the object-table header.

When an object-table has sticky headers and/or footers along with mode="paginate", the controls will also be present in the corresponding sticky header or footer.

`style`

Optional

Default: unset

References a JavaScript/TypeScript $:function, which returns a single payload with styling information that is used to style the entire row (when set on the object-table level) or cell (when set on a column level). See the guide on object-table/column styles for more information.

`style-align`

Optional

Type: left | right | center

Default: left

Align the text content inside a cell to the left, right or center. See the guide on object-table/column styles for more information.

`style-background-color`

Optional

Type: string - can be a named color or #HEX value

Default: The app's background color in light vs dark mode

The background color of the entire cell. See the guide on object-table/column styles for more information.

`style-bold`

Optional

Type: boolean

Default: unset

Transforms the text to bold if set to true. See the guide on object-table/column styles for more information.

`style-color`

Optional

Type: string

Default: Primary text color

Color of the text in a cell. See the guide on object-table/column styles for more information.

`style-icon-color`

Optional

Type: string - can be a named color or #HEX value

Default: Primary text color

Color of icon on the left of the cell. See the guide on object-table/column styles for more information.

`style-italics`

Optional

Type: boolean

Default: unset

Transforms the text to italic if set to true. See the guide on object-table/column styles for more information.

`style-strikethrough`

Optional

Type: boolean

Default: unset

Transforms the text to ~~strikethrough~~ if set to true. See the guide on object-table/column styles for more information.

`style-underline`

Optional

Type: boolean

Default: unset

Underlines text if set to true. See the guide on object-table/column styles for more information.

`font-size`

Version compatibility

font-size was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: integer

Default: 16 px

Specify the text size within object-table cells (incl. header cells).

Component Methods

The following component methods are available when an id is assigned to the component and component.objectTable({id:'my-id'}) is called from JS/TS:

`setState`

Set or update the state of the object-table. See more information in this guide.

`scrollIntoView`

Programmatically scroll until the object-table is visible in the view.

`toggleFullscreen`

Programmatically enable or disable fullscreen mode of the object-table.

Previousobject-repeat Nextaction

Last updated 1 year ago

hashtagOverview

hashtagBasic Example

hashtagStandard Attributes

hashtaglabel

hashtagquery

hashtagAdvanced Attributes

hashtagalign-label

hashtagautomatic

hashtagbind

hashtagcontrols

hashtagdefault-filter

hashtagdefault-sorting

hashtagempty-message

hashtagfilter

hashtaghydrate-state

hashtagid

hashtaginit-state

hashtaglabel-case

hashtaglabel-color

hashtaglimit

hashtagloading

hashtagmode

hashtagmin-row-height

hashtagon-change

hashtagon-paste

hashtagon-state-change

hashtagon-state-changed

hashtagpadding-horizontal

hashtagpadding-vertical

hashtagpage-count

hashtagpaginate-padding-horizontal

hashtagpaginate-padding-vertical

hashtagpaginate-select-padding-horizontal

hashtagpaginate-select-padding-vertical

hashtagpaginate-select-text-size

hashtagsearch-padding-horizontal

hashtagsearch-padding-vertical

hashtagsearch-font-size

hashtagshow-if and hide-if

hashtagshow-pagination

hashtagshow-search

hashtagsorting

hashtagsticky-footer

hashtagsticky-header

hashtagstyle

hashtagstyle-align

hashtagstyle-background-color

hashtagstyle-bold

hashtagstyle-color

hashtagstyle-icon-color

hashtagstyle-italics

hashtagstyle-strikethrough

hashtagstyle-underline

hashtagfont-size

hashtagComponent Methods

hashtagsetState

hashtagscrollIntoView

hashtagtoggleFullscreen

Overview

Basic Example

Standard Attributes

`label`

`query`

Advanced Attributes

`align-label`

`automatic`

`bind`

`controls`

`default-filter`

`default-sorting`

`empty-message`

`filter`

`hydrate-state`

`id`

`init-state`

`label-case`

`label-color`

`limit`

`loading`

`mode`

`min-row-height`

`on-change`

`on-paste`

`on-state-change`

`on-state-changed`

`padding-horizontal`

`padding-vertical`

`page-count`

`paginate-padding-horizontal`

`paginate-padding-vertical`

`paginate-select-padding-horizontal`

`paginate-select-padding-vertical`

`paginate-select-text-size`

`search-padding-horizontal`

`search-padding-vertical`

`search-font-size`

`show-if` and `hide-if`

`show-pagination`

`show-search`

`sorting`

`sticky-footer`

`sticky-header`

`style`

`style-align`

`style-background-color`

`style-bold`

`style-color`

`style-icon-color`

`style-italics`

`style-strikethrough`

`style-underline`

`font-size`

Component Methods

`setState`

`scrollIntoView`

`toggleFullscreen`