Comment on page
object-table
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).
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();
}

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>
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.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.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.Deprecated
Deprecated
Optional
Type:
string
Default: "Your items will appear here"
Text displaying in the table when no data objects are available.
Optional
Type:
boolean
Default:
false
Optional
Default: unset
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.Version compatibility
label-case
was introduced in version 4.86.1 of the JourneyApps Runtime.Version compatibility
label-color
was introduced in version 4.86.1 of the JourneyApps Runtime.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.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.
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.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.The
on-change
attribute only has an effect if the bind
attribute is set.Optional
Default: unset
Triggered when: Data is pasted into the object-table.
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
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).
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).
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.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
).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
).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
).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
).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
).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.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.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.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.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.Optional
Type:
boolean
Default:
true
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.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.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.Optional
Type:
string
- can be a named color or #HEX valueDefault: 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.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.Optional
Type:
string
Default: Primary text color
Optional
Type:
string
- can be a named color or #HEX valueDefault: Primary text color
Color of icon on the left of the cell. See the guide on
object-table
/column
styles for more information.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.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.Optional
Type:
boolean
Default: unset
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).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:Programmatically scroll until the
object-table
is visible in the view.Programmatically enable or disable fullscreen mode of the
object-table
.Last modified 3mo ago