object-table
Overview
object-table displays data from objects retrieved from a database query or array in a table format.
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
<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>function init() {
view.users = DB.user.all();
}
Standard Attributes
label
labellabelquery
queryRequired
Default: unset
query contains the name of the database query or array variable to populate the objects in the object-table.
<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-labelalign-labelautomatic
automaticOptional
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
bindbindcontrols
controlsOptional
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
default-filterDeprecated
default-filter is deprecated. Please use filter instead.
default-sorting
default-sortingDeprecated
default-sorting is deprecated. Please use sorting instead.
empty-message
empty-messageOptional
Type: string
Default: "Your items will appear here"
Text displaying in the table when no data objects are available.
filter
filterOptional
Type: boolean
Default: false
Set the default value for the filter attribute on all columns in the table.
hydrate-state
hydrate-stateOptional
Default: unset
This attribute is deprecated. Please use init-state and on-state-change.
id
ididinit-state
init-stateOptional
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
label-caselabel-caselabel-color
label-colorlabel-colorlimit
limitOptional
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
loadingOptional
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.
mode
modeOptional
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
min-row-heightOptional
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-changeon-changeon-paste
on-pasteOptional
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
on-state-changeOptional
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:
on-state-changed
on-state-changedThis attribute is simply an alias to on-state-change.
padding-horizontal
padding-horizontalOptional
Type: integer
Default: 12 px
Specify the horizontal padding (left and right) within object-table cells (incl. header cells).
padding-vertical
padding-verticalOptional
Type: integer
Default: 8 px
Specify the vertical padding (top and bottom) within object-table cells (incl. header cells).
page-count
page-countOptional
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
paginate-padding-horizontalOptional
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
paginate-padding-verticalOptional
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
paginate-select-padding-horizontalOptional
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
paginate-select-padding-verticalOptional
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
paginate-select-text-sizeOptional
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
search-padding-horizontalOptional
Type: integer
Default: 10 px
Specify the horizontal padding (left and right) within the object-table search box.
search-padding-vertical
search-padding-verticalOptional
Type: integer
Default: 8 px
Specify the vertical padding (top and bottom) within the object-table search box.
search-font-size
search-font-sizeOptional
Type: integer
Default: 16 px
Specify the text size within the object-table search box.
show-if and hide-if
show-ifhide-ifshow-if and hide-ifshow-pagination
show-paginationOptional
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
show-searchOptional
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
sortingOptional
Type: boolean
Default: true
Set the default value for the sorting attribute on all columns in the table.
sticky-footer
sticky-footerOptional
Type: boolean
Default: unset
When set to true, freezes the object-table controls (when they display at the bottom of the table).
sticky-header
sticky-headerOptional
Type: boolean
Default: unset
When set to true, freezes the object-table header.
style
styleOptional
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
style-alignOptional
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
style-background-colorOptional
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
style-boldOptional
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
style-colorOptional
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
style-icon-colorOptional
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
style-italicsOptional
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
style-strikethroughOptional
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
style-underlineOptional
Type: boolean
Default: unset
Underlines text if set to true. See the guide on object-table/column styles for more information.
font-size
font-sizeOptional
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
setStateSet or update the state of the object-table. See more information in this guide.
scrollIntoView
scrollIntoViewProgrammatically scroll until the object-table is visible in the view.
toggleFullscreen
toggleFullscreenProgrammatically enable or disable fullscreen mode of the object-table.
Last updated