object-table
Last updated
Last updated
object-table
displays data from objects retrieved from a or 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).
label
query
Required
Default: unset
align-label
automatic
Optional
Type: boolean
Default: true
bind
controls
Optional
Type: none
| bottom
| top
| both
Default: bottom
default-filter
Deprecated
default-sorting
Deprecated
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
hydrate-state
Optional
Default: unset
id
init-state
Optional
Default: unset
label-case
label-color
limit
Optional
Type: integer
Default: 25
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.
mode
Optional
Type: paginate
| scroll
Default: paginate
min-row-height
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-paste
Optional
Default: unset
Triggered when: Data is pasted into the object-table.
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
on-state-changed
padding-horizontal
Optional
Type: integer
Default: 12 px
Specify the horizontal padding (left and right) within object-table cells (incl. header cells).
padding-vertical
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
paginate-padding-horizontal
Optional
Type: integer
Default: 10 px
paginate-padding-vertical
Optional
Type: integer
Default: 8 px
paginate-select-padding-horizontal
Optional
Type: integer
Default: 10 px
paginate-select-padding-vertical
Optional
Type: integer
Default: 8 px
paginate-select-text-size
Optional
Type: integer
Default: 16 px
search-padding-horizontal
Optional
Type: integer
Default: 10 px
Specify the horizontal padding (left and right) within the object-table
search box.
search-padding-vertical
Optional
Type: integer
Default: 8 px
Specify the vertical padding (top and bottom) within the object-table
search box.
search-font-size
Optional
Type: integer
Default: 16 px
Specify the text size within the object-table
search box.
show-if
and hide-if
show-pagination
Optional
Type: boolean
Default: true
show-search
Optional
Type: boolean
Default: true
sorting
Optional
Type: boolean
Default: true
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).
sticky-header
Optional
Type: boolean
Default: unset
When set to true
, freezes the object-table
header.
style
Optional
Default: unset
style-align
Optional
Type: left
| right
| center
Default: left
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
style-bold
Optional
Type: boolean
Default: unset
style-color
Optional
Type: string
Default: Primary text color
style-icon-color
Optional
Type: string
- can be a named color or #HEX value
Default: Primary text color
style-italics
Optional
Type: boolean
Default: unset
style-strikethrough
Optional
Type: boolean
Default: unset
style-underline
Optional
Type: boolean
Default: unset
font-size
Optional
Type: integer
Default: 16 px
Specify the text size within object-table
cells (incl. header cells).
setState
scrollIntoView
Programmatically scroll until the object-table
is visible in the view.
toggleFullscreen
Programmatically enable or disable fullscreen mode of the object-table
.
query
contains the name of the or variable to populate the objects in the object-table
.
A object-table
with the automatic="false"
attribute it will automatically go into controlled mode. See the guide for more information.
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
.
default-filter
is deprecated. Please use instead.
default-sorting
is deprecated. Please use instead.
Set the default value for the attribute on all columns in the table.
This attribute is deprecated. Please use and .
init-state
initializes an object-table
's state after the table is loaded using a similar structure as . See more information in the guide on object-table
.
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
.
Specifies whether a table with a number of rows should be paginates or scrollable. See more information in the guide on object-table
.
Event parameters: See more information in the guide on object-table
.
Return value: See more information in the guide on object-table
.
on-paste
is an event that calls a JS/TS or . See more details:
Return value: See more information in the guide on object-table
.
on-state-change
is an event that calls a JS/TS or . See more details:
This attribute is simply an alias to .
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 guide for more information.
Specify the horizontal padding (left and right) within the object-table
pagination controls (where is set to paginate
).
Specify the vertical padding (top and bottom) within the object-table
pagination controls (where is set to paginate
).
Specify the horizontal padding (left and right) within the page selection dropdown within the object-table
pagination controls (where is set to paginate
).
Specify the vertical padding (top and bottom) within the page selection dropdown within the object-table
pagination controls (where is set to paginate
).
Specify the text size within the page selection dropdown within the object-table
pagination controls (where is set to paginate
).
In a paginated table, and when 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.
When are shown, the show-search
attribute can be used to show or hide the search box independent of the pagination controls.
Set the default value for the attribute on all columns in the table.
References a JavaScript/TypeScript , 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
for more information.
Align the text content inside a cell to the left, right or center. See the guide on object-table
/column
for more information.
The background color of the entire cell. See the guide on object-table
/column
for more information.
Transforms the text to bold if set to true
. See the guide on object-table
/column
for more information.
Color of the text in a cell. See the guide on object-table
/column
for more information.
Color of icon on the left of the cell. See the guide on object-table
/column
for more information.
Transforms the text to italic if set to true
. See the guide on object-table
/column
for more information.
Transforms the text to strikethrough if set to true
. See the guide on object-table
/column
for more information.
Underlines text if set to true
. See the guide on object-table
/column
for more information.
The following component methods are available when an is assigned to the component and component.objectTable({id:'my-id'})
is called from JS/TS:
Set or update the state of the object-table
. See more information in .