LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • 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
  1. Build your App
  2. UI Components
  3. All UI Components

object-table

Previousobject-repeatNextaction

Last updated 10 months ago

Overview

object-table displays data from objects retrieved from a or 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 and .

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

query

Required

Default: unset

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

automatic

Optional

Type: boolean

Default: true

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

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

Version compatibility

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

label-color

Version compatibility

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

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.

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

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

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.

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

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

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

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

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

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

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

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-pagination

Version compatibility

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

Optional

Type: boolean

Default: true

show-search

Version compatibility

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

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).

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

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

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

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 .

💻
label
align-label
controlled object-table
bind
controls
id
label-case
label-color
modes
modes
on-change
copy & paste
copy & paste
$:function
navigation
JS/TS Events
state
$:function
navigation
JS/TS Events
controlled object-table
show-if
hide-if
$:function
styles
styles
styles
styles
styles
styles
styles
styles
styles
id
this guide
filter
sorting
init-state
on-state-change
state
on-state-change
on-state-change
mode
mode
mode
mode
mode
controls
controls
database query
database query
object-table v1
object-table v2
array
array
filter
sorting