object-table (v2) (deprecated)
object-table v2 is considered deprecated
Support for object-table
v2 may be dropped in future versions of the JourneyApps Runtime. Please upgrade your app to use object-table
v3 to ensure that your app remains compatible with the JourneyApps Runtime.
Version compatibility
object-table
v2 was introduced in version 4.24.0 of the JourneyApps Container.
Top-level attributes
e.g.
Attribute | Details | Example | From version |
---|---|---|---|
| Integer. The number of items to display. | ||
Defaults to |
| 4.24.0 | |
| Text. Where to place the controls (search bar, pagination controls).
Options include: |
| 4.24.0 |
| Boolean. Whether to freeze the header or not.
Defaults to |
| 4.24.0 |
| Boolean. Whether to freeze the controls (when they display at the bottom)
Defaults to |
| |
| Boolean. Whether to display the outline borders or not.
Defaults to |
| 4.24.0 |
| Boolean. Defaults to |
| 4.24.0 |
| Text. |
| 4.27.0 |
| Used to style an entire row given specific conditions. See Row and Cell Formatting for more details. |
| 4.32.0 |
| The default value for |
| 4.40.5 |
| The default value for |
| 4.40.5 |
Column-level attributes
e.g.
Attribute | Details | Example | From version |
---|---|---|---|
| Boolean. Whether this column should be included when searching. Default:
|
| 4.24.0 |
| Controls whether the column is hidden or shown. |
| 4.26.1 |
| Used to style a cell given specific conditions. See Row and Cell Formatting for more details. |
| 4.32.0 |
| Adds an icon to the left-hand-side of a cell. The icon can be a Font Awesome icon or an Ionicons icon. Defaults to no icon. |
| 4.32.0 |
| Puts the column into a default sort mode regardless of the underlying query. (Useful to indicate which column is being sorted when cells are editable). Can either be |
| 4.32.0 |
| The value to sort the column on instead of the display value. Useful when the display value would be something like: |
| 4.32.0 |
| Boolean.
Whether the column should be filterable. Defaults to |
| 4.32.0 |
| Boolean
Whether the column is sortable. Defaults to |
| 4.40.5 |
Sorting
All columns are sortable. Click on a column header to sort it, and again to toggle ascending/descending order.
If a column consists solely of numbers, it will be sorted by numeric value. Similarly, if the column can be matched as a date, the date value is used instead of the display value. Finally, it is possible to specify a sort-value attribute (see table above) to override this default behavior when the display value no longer represents the underlying scalar value (for example the display value being: Percent: {number}%
)
Mode
Version compatibility
This feature was introduced in version 4.27 of the JourneyApps Container.
Object tables have two possible modes:
paginate
(Paginating mode) (default)scroll
(Fixed height mode)
Note that for each of the two modes, limit
has a different function.
Mode | Description | limit= |
---|---|---|
| Data is loaded in pages, with controls to jump to the next or previous page. | The number of entries to display on a page |
| The data is loaded all at once, and the table itself is scrollable to reveal more data. | The height of the object table, measured in rows.
e.g. |
e.g.
Row and Cell Formatting
Version compatibility
This feature was introduced in version 4.32 of the JourneyApps Container.
Row vs Cell styling
To style a specific cell, the property should be added to the
<column>
tag.To style an entire row, the property should be added to the
<object-table>
tag.
Example:
Styleable properties
Field | Description | Example |
---|---|---|
| The alignment of the text within the cell. |
|
| The background color of the cell. Default values include:
Defaults to |
|
| Boolean. If the text should be bold or not.
Defaults to |
|
| The text color of the cell. Default values include:
Defaults to |
|
| The color of the left-hand-side icon (if present). Default values include:
Defaults to |
|
| Boolean. If the text should be italicized or not.
Defaults to |
|
| Boolean. If the text should be strikethrough or not.
Defaults to |
|
| Boolean. If the text should be underlined or not.
Defaults to |
|
| Object. Combination of these attributes, programatically determined by the JavaScript/TypeScript. See section below for details. |
|
Example:
style=``
Styles can be computed programmatically using JavaScript/TypeScript.
Example:
Notes:
Returning an empty object will apply no styling
Properties omitted from the returned object will not be affected
Editing Cells
Version compatibility
This feature was introduced in version 4.32 of the JourneyApps Container.
To make a cell editable, add an <edit-
entry into the column. Valid options include edit-text
, edit-number
, edit-boolean
, edit-date
, edit-datetime
and edit-select
. They are explained in more detail below.
Display and edit flow
Step | Visually | Programatically |
---|---|---|
Initially | The object table will appear in a read-only (display) mode. | The value in |
As soon as the user taps or clicks on a cell | The cell will go into edit mode, allowing the user to modify the value. | The value in |
After modifying the value, the user presses enter | The table goes back into display mode. | The function in |
Example
Properties on <edit-
<edit-
Field | Description | Example |
---|---|---|
| The initial editing value. | |
Can either be:
|
| |
| The function to be called as soon as the user hits enter.
Note that |
|
Caveat: Prepend $:
to the on-change
function
If you return false
from your on-change
function, be sure to prepend $:
to your on-change
value, e.g. $:updateValue($object, newValue, oldValue)
. This allows JourneyApps to handle the returned value correctly.
Example
<edit-
types
<edit-
typesName | Details | Example |
---|---|---|
| Used to edit a string. |
|
| Used to edit a number. A numerical keyboard will show on mobile. |
|
| Used to edit a date. A date picker will show. |
|
| Used to edit a datetime. A date picker will show, followed by a time picker. |
|
| Used to edit a boolean value. A checkbox will show. |
|
| Used to pick a value from a list of possible values. Note:
| See below |
User Experience Tip: Specify an orderBy
on your query
Since the default ordering for queries is by modification date, editing the value of an object's field via edit-
will cause that object to be the last modified one. This causes your query to reload and the last modified object will be at the end of the list, creating the impression that it disappeared.
To prevent this from happening, be sure to specify an orderBy
on your query on something other than the modification date, e.g. DB.user.all().orderBy('name')
. This keeps the ordering stable, resulting in better user experience.
edit-select
examples
edit-select
examplesExample 1
Simple string array
Example 2
Array of {key, value}
objects
Example 3
Using a single object with key and value
Cell-level actions
Version compatibility
This feature was introduced in version 4.32 of the JourneyApps Container.
To apply an action on a cell-click level, add an <action>
to the <column>
tag.
For example:
Object Table Actions
Version compatibility
This feature was introduced in version 4.34.6 of the JourneyApps Container.
Object Table Actions enable additional buttons to be appended to the controls area of an object table. Additionally, these buttons can call functions passing the current data in the object table.
For example:
Each of the buttons call a function in their on-press
attribute with the following three parameters:
$filteredData
: An object of the form{columns: string[], rows: DatabaseObject[]}
.DatabaseObject
refers to the familiar JourneyApps object that can be used to update values in the database.filteredDisplayData
: An object of the form{columns: string[], rows: string[][]}
. The rows correspond to the text currently displayed in the table. This object can be directly passed to CSV's stringify function to create a CSV export of the table's data.controls
: An object of the form{page: number, totalPages: number, limit: number, filters: {string: string[]}}
. This represents the current state of the search criteria and filters applied to the object table.
In both parameters where data is passed to the function the sort order and current table filters are applied to the data.
User Experience Tip: Use mode="split"
on the button-group
When you have more than one button in the button-group
and would like to emphasize one of them, use mode="split"
. This will display the first button in the group and place the rest in an Action Sheet.
Example: One-click CSV export
Last updated