object-table

Overview

object-table displays data from objects retrieved from a database query or array in a table format.
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).
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.

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

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

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.

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

Optional
Type: boolean
Default: false
Set the default value for the filter attribute on all columns in the table.

default-sorting

Optional
Type: boolean
Default: true
Set the default value for the sorting attribute on all columns in the table.

empty-message

Optional
Type: string
Default: "Your items will appear here"
Text displaying in the table when no data objects are available.

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.

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.

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:

on-state-change

Optional
Default: unset
Triggered when: the state of the table is changed due to a UX/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:

on-state-changed

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

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.

show-if and hide-if

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.
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
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
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.
Last modified 2mo ago
Copy link
On this page
Overview
Basic Example
Standard Attributes
label
query
Advanced Attributes
automatic
bind
controls
default-filter
default-sorting
empty-message
hydrate-state
id
init-state
limit
loading
mode
on-change
on-paste
on-state-change
on-state-changed
page-count
show-if and hide-if
sticky-footer
sticky-header
style
style-align
style-background-color
style-bold
style-color
style-icon-color
style-italics
style-strikethrough
style-underline