jig.table

The table jig displays structured data in rows and columns, allowing users to view and interact with multiple records within the app.

Table jig

Configuration options

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

The table Jigx type includes multiple child components, each of which can be configured individually based on the desired table layout. The properties for each component are described below.

component.table-row

component.table-row- The table jig is configured with a datasource, and a single component.table-row is configured and iterates through the datasource to display each row. This is a required component.

Structure
component.table-row	This is similar in configuration to a where a single table-row is configured and iterates through the datasource. instanceId - Unique identifier of the table-row component. When defined its possible to address its state. InstanceId: Expects a string. when - used to determine under which conditions the table will display. If the property is set to false, the component won't be displayed. Default is true. An expression can be configured in this property.
color	Highlight the row(s) with a distinct background color for emphasis or status. For example, color: - when: [email protected] > 60 color: warning
data	Reference the defined datasource to use in the component.table-row.
datasources	Configure a datasource to call the data to display in the table rows.
onPress	Action that will be triggered by pressing on the table row.

component.table-cell

This component is part of the columnDefinition setup, allowing reusable configurations for customizing column cells and ensuring consistent, flexible table layouts.

structure
children	Define the cell value by using a , or component.text. Specify a value for the cell, this can be text that can be evaluated, translated, and formatted.
onPress	Action that will be triggered by pressing on the table cell for a specific column.

component.table-header-cell

This component is part of the columnDefinition setup, allowing reusable configurations for column header cells and ensuring consistent, flexible table layouts.This component targets the cells in the columns' header.

Structure
children	Define the cell value by using a or by using a component.text. Specify a value for the cell, this can be text that can be evaluated, translated, and formatted.
onPress	Action that will be triggered by pressing on the text in the table header's cell for a specific column.

component.table-footer-cell

This component is part of the columnDefinition setup, allowing reusable configurations for column footer cells and ensuring consistent, flexible table layouts.This component targets the cells in the columns' footer.

Structure
children	Define the cell value by using a , or by using component.text. Specify a value for the cell, this can be text that can be evaluated, translated, formatted.
onPress	Action that will be triggered by pressing on the text in the table footer's cell for a specific column.

component.table-footer

• This component targets the entire table footer. All configured properties will be applied uniformly to it.

• This property works in conjunction with the component.table-footer-cell. When a component.table-footer-cell is defined within the columnDefinition, ensure that the component.table-footer property is also included to enable the footer component to render. See the YAML example below.

  tableFooter:
    type: component.table-footer

Structure
color	Add a distinct background color for emphasis or status to the table footer. For example, color: - when: true color: color4

component.table-header

• This component targets the entire table header. All configured properties will be applied uniformly to it.

• Specifying the component without additional properties will render the header columns using the column.id as the header text.

  tableHeader:
    type: component.table-header

columns

Other options
columns	Defines the structure and configuration for a single table column, either through inline definitions or by referencing a reusable column definition. Columns can also be dynamically set using a single expression for flexible configuration across all columns. id:Specifies a unique identifier for the column, used to reference the column’s data. The name must be the same as the datasource column name for the data to display. columnDefinition- a reusable configuration for a column, providing consistency across multiple columns. A columnDefinitionId: is required as an identifier of the column definition to be used.
columnDefinition	Defines reusable configurations for table columns, including properties like width, header, footer, and cell customization, allowing for flexible and consistent table layouts. Column Name- must match the name in the column:id cell - Sets the value for the individual cells in the column. You can use [email protected]., [email protected], or [email protected] footer - [email protected] header - [email protected] width - Customizes the width of columns to improve visibility and fit specific content, offering flexibility in the table layout. Options include large, regular, small.
selectionToolbar	The selectionToolbar appears at the bottom of the table when rows are selected. To enable row selection, isSelectable: true must be set at the root level of the jig. The toolbar displays a tag with the number of selected rows, followed by the configured action. Avoid overloading the selectionToolbar with too many actions or long labels, as it may compress, break layout, or disappear if space runs out.
tableHeader	Define the appearance and behavior of all table headers, including color or onPress actions.
tableFooter	Define the appearance and behavior of all table footers, including color or onPress actions.
toolbar	The toolbar appears at the top of the table as a buttons. The toolbar is configured with actions, such as got-to or execute-entity to create a new row.
sort	Initial sort configuration for the table. columnId - Provide the column name that the sorting will be applied to. isDescending - set to true sorts descending, set to false sorts ascending. [email protected] is used to access the sort state within the jig. To add sorting to a table the jig.table must be configured with the following: 1) isSortable: true at the root level. 2) The data property must be set with an expression to sort the data in the columns. See data-yaml code example below. 3) The sort property configured at the root level to configure descending or ascending. See sort-yaml code example below.

data-yaml

data: | 
    =$sort(@ctx.datasources.roster, function($l, $r) {
    @ctx.jig.state.sort.isDescending ?
      ($lookup($l, @ctx.jig.state.sort.columnId) > $lookup($r, @ctx.jig.state.sort.columnId)) :
      ($lookup($l, @ctx.jig.state.sort.columnId) < $lookup($r, @ctx.jig.state.sort.columnId))
  })

sort-yaml

State Configuration	Key	Notes
[email protected].	sort	Used to access the sorting state in the table.

Considerations

• There is no horizontal scroll. Depending on the device, some columns may not be visible. For the best experience when viewing tables with many columns in the app, we recommend using a tablet.

• To enable sorting in a table, set isSortable: true at the root level. The data property must include an expression for sorting and lookup, and the sort: isDescending property must be set to either false for ascending or true for descending.

• To enable row selection, isSelectable: true must be set at the root level of the jig. The selectableToolbar becomes visible only when rows are selected and appears at the bottom of the table. It displays a tag showing the number of selected rows, followed by the configured action.

• Avoid overloading the selectionToolbar with too many actions or long labels, as it may compress, break layout, or disappear if space runs out.

Examples and code snippets

Basic table with color

Basic table with color

This example demonstrates a basic jig.table configuration using a static datasource to display construction project data. Row colors are dynamically set using a when condition based on the project's status ("Complete" or "Delayed").

Example: See the full code example in GitHub.

jig-table-basic.jigx

title: Construction Project Status Report
# The table must be configured in a table jig type.
type: jig.table

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1592818993411-eba55f84e788?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHJlcG9ydHMlMjBjb25zdHJ1Y3Rpb258ZW58MHx8MHx8fDA%3D
# The table requires a datasource to populate the rows.
datasources:
  projects:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Downtown Office Tower
          status: In Progress
          percentage: 65% 
        - id: 2å
          name: Riverside Housing Units
          status: Completed
          percentage: 100%
        - id: 3
          name: Northside Shopping Plaza
          status: Not Started
          percentage: 0% 
        - id: 4
          name: Eastside Logistics Center
          status: Planning
          percentage: 20% 
        - id: 5
          name: Hillview Apartment Block
          status: Delayed
          percentage: 40%       
# Reference the defined datasource to use in the table.
data: [email protected]
# Define the appearance and behavior of all table rows.
item:
  type: component.table-row
  options: 
    # Configure the color condition highlighting projects that are complete,
    # or at risk due to delays.    
    color:
      - when: [email protected] = 'Delayed'
        color: negative
      - when: [email protected] = 'Completed'
        color: positive
# Specify the required table columns. 
# The column names must match the datasource column names.        
columns:
  - id: name 
  - id: status
  - id: percentage  

Table with header, footer and sorting

This table example displays a week's shifts per technician using a jig.table with Dynamic Data. The table is set up with a colored header and footer, and sorting is configured in descending order on the Technician Name column.

Example: See the full code example in GitHub.

Table with colored header & footer

Note: To add sorting to a table the jig.table must be configured with the following:

1. isSortable: true at the root level.

2. The data property must be set with an expression to sort the data in the columns.

   data: |
     =$sort(@ctx.datasources.roster, function($l, $r) {
       @ctx.jig.state.sort.isDescending ?
         ($lookup($l, @ctx.jig.state.sort.columnId) > $lookup($r, @ctx.jig.state.sort.columnId)) :
         ($lookup($l, @ctx.jig.state.sort.columnId) < $lookup($r, @ctx.jig.state.sort.columnId))
     })

3. The sort property configured at the root level to configure descending or ascending.

jig-header-footer-sorting

title: Weekly Technican Roster
type: jig.table
# Specify that the table can be sorted.
isSortable: true
 
# Reference the defined datasource to use in the table.
# Configure how the data can be sorted.
data: |
  =$sort(@ctx.datasources.roster, function($l, $r) {
    @ctx.jig.state.sort.isDescending ?
      ($lookup($l, @ctx.jig.state.sort.columnId) > $lookup($r, @ctx.jig.state.sort.columnId)) :
      ($lookup($l, @ctx.jig.state.sort.columnId) < $lookup($r, @ctx.jig.state.sort.columnId))
  })
# Specific the initial column to sort on, either descending or ascending.
sort: 
  columnId: TechnicianName
  isDescending: true
  
# Define the appearance and behavior of all table rows.  
item:
  type: component.table-row
  options:
    color:
      - when: false
        color: color1
# Define the appearance of all table headers.        
tableHeader:
  type: component.table-header
  options:
    color:
      - when: true
        color: color2
# Define the appearance of all table footers.      
tableFooter:
  type: component.table-footer
  options:
    color:
      - when: true
        color: color2
    
# Specify the required table columns. 
# The column names must match the datasource column names.      
columns: 
  - id: TechnicianName  
  - id: Monday   
  - id: Tuesday  
  - id: Wednesday
  - id: Thursday 
  - id: Friday

datasource

Table with column widths, columnDefinitions, header and footer

Table widths & column definitions

In this example, a table summarizes the sale of products for the month. In the columnDefinition, the width, footer, and cell:format is configured. The tableHeader and tableFooter's appearance is enhanced by adding a color.

Example: See the full code example in GitHub.

jig-table-columndef-width.jigx

title: Sales Summary
type: jig.table
# Reference the defined datasource to use in the table.
data: [email protected]

# Component.table-row is required for data to display in the rows.
item: 
  type: component.table-row

# Define the specific layout for each column,
# using the column id as the identifer.          
columnDefinition:
  # Configure the first column's width, 
  # ensuring that all text is visible in the column. 
  Product: 
    width: regular
  # In the second column,
  # configure the width, which maximizes table layout,
  # by using just the required space.
  # Configure the cells to display the currency in each cell of the column.
  # Format the column footer to display the total revenue,
  # using an expression to add up the values in the column.    
  TotalRevenue:
    width: small
    cell:
      type: component.table-cell
      options:
        children: 
          type: component.text
          options:
            value: 
              text: [email protected]
              format:
                numberStyle: currency
                currency: USD               
    footer:
      type: component.table-footer-cell
      options:
        children: 
          type: component.text
          options:
            value: 
              text: =$sum(@ctx.datasources.sales-summary.TotalRevenue)
              format: 
                numberStyle: currency
                currency: USD
# In the third column,
# format the column footer to display the total number of units sold.                
  UnitsSold:
    footer:
      type: component.table-footer-cell
      options:
        children: 
          type: component.text
          options:
            value: =$sum(@ctx.datasources.sales-summary.UnitsSold)
# Specify the columns for the table.
# Configure the columns to use the definition defined for each column.          
columns: 
  - id: Product
    columnDefinitionId: Product
  - id: TotalRevenue
    columnDefinitionId: TotalRevenue
  - id: UnitsSold  
    columnDefinitionId: UnitsSold
# Define the color of the table header.    
tableHeader:
  type: component.table-header
  options:
    color:
      - when: true
        color: color9
# Define the color of the table footer.    
tableFooter:
  type: component.table-footer
  options:
    color:
      - when: true
        color: color9

sales-summary.jigx

Edit table rows using onPress

Editing the table

In this example, a table displays delivery items and their current status. The status column is editable to reflect delivery progress. The component.table-row is configured with an onPress event that triggers a go-to action. This action uses isModal: true to open a jig as a bottom modal. Inputs are passed to this jig, including the row’s id and status.

The modal jig includes a form component with a text-field that displays the initialValue using the status passed from the onPress event. An execute-entity action is used to update the status, and a goBack: previous closes the modal, returning to the table with the updated status shown.

Example: See the full code example in GitHub.

jig-table-opnpress-edit.jigx

title: Site Deliveries
type: jig.table
     
header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1592818993411-eba55f84e788?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHJlcG9ydHMlMjBjb25zdHJ1Y3Rpb258ZW58MHx8MHx8fDA%3D

# Reference the datasource to use in the table.
data: [email protected]
# Define the appearance and behavior of all table rows.
item:
  type: component.table-row
  options:
    # Add an onPress action that opens a jig as a modal with the rows status displayed in a text-field.
    # The status is updated and the table shows the new status. 
    onPress: 
      type: action.action-list
      options:
        isSequential: true
        actions:
          - type: action.go-to
            options:
              # Set the jig to open as a modal,
              # instead of navigating away from the table jig. 
              isModal: true
              linkTo: table-onpress-edit  
              # Pass the row’s status and id as inputs to the jig,
              # used for editing the status.
              inputs:
                status: [email protected]
                id: [email protected]
# Define the appearance of all table headers.                      
tableHeader:
  type: component.table-header
  options:
    color:
      - when: true
        color: color14
# Specify the required table columns. 
# The column names must match the datasource column names.           
columns:  
  - id: deliveryId
  - id: Item
  - id: destination
  - id: status 

table-onpress-edit.jigx

product-delivery (datasource)

Delete selected rows (selectableToolbar)

This example demonstrates how to delete rows from a table. The isSelectable: true property is set at the root level of the jig, allowing rows to be selected. The selectableToolbar is configured to execute an action that deletes the selected data from the datasource, which also removes it from the table.

Note: The selectableToolbar only appears when rows are selected. Avoid overloading the selectionToolbar with too many actions or long labels, as it may compress, break layout, or disappear if space runs out.

Example: See the full code example in GitHub.

Delete rows in table

jig-table-delete-select-toolbar.jigx

title: Deliveries
type: jig.table
# Configure the table rows to be selecatable.
isSelectable: true
    
header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1566576721346-d4a3b4eaeb55?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVsaXZlcnl8ZW58MHx8MHx8fDA%3D

onFocus: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/product-delivery
# Reference the defined datasource to use in the table.
data: [email protected]
item:
  type: component.table-row
  
# Define the color of the table header.                       
tableHeader:
  type: component.table-header
  options:
    color:
      - when: true
        color: color6
# Specify the columns for the table. 
# The column names must match the datasource column names.       
columns: 
  - id: deliveryId
  - id: Item
  - id: destination
  - id: status         
# Configure that execute-entites to delete multiple rows from the table and datasource.
selectionToolbar:
  children:
    - type: action.execute-entities
      options:
        title: Remove Delivered items
        provider: DATA_PROVIDER_DYNAMIC
        entity: default/product-delivery
        method: delete
        # Configure the rows with data to delete, using the jig state.
        data: [email protected]

Add a new row (toolbar)

Add row to table

In this example, a table displays recorded sales. An action button in the top toolbar allows users to add a new row to the table. Tapping the button opens a jig as a bottom modal using isModal: true. The modal contains a component.form and an execute-entity action to create the new row. Once submitted, the goBack: previous property closes the modal, and the table updates to show the newly added row at the bottom.

Example: See the full code example in GitHub.

jig-table-add-toolbar

title: Sales Summary
type: jig.table
# Reference the defined datasource to use in the table.
data: [email protected]

item: 
  type: component.table-row
# Define the specific layout for each column using the column id as the identifer.          
columnDefinition:
# Configure the first column's width, ensuring that all text is visible in the column. 
  Product: 
    width: regular
# In the second column,
# configure the width, which maximizes table layout by using just the required space.
# Configure the cells to display the currency in each cell of the column.
# Format the column footer to display the total revenue using an expression,
# to add up the values in the column.        
  TotalRevenue:
    width: small
    cell:
      type: component.table-cell
      options:
        children: 
          type: component.text
          options:
            value: 
              text: [email protected]
              format:
                numberStyle: currency
                currency: USD
    footer:
      type: component.table-footer-cell
      options:
        children: 
          type: component.text
          options:
            value: 
              text: =$sum(@ctx.datasources.sales-summary.TotalRevenue)
              format: 
                numberStyle: currency
                currency: USD
  # In the third column,
  # format the column footer to display the total number of units sold.              
  UnitsSold:
    footer:
      type: component.table-footer-cell
      options:
        children: 
          type: component.text
          options:
            value: =$sum(@ctx.datasources.sales-summary.UnitsSold)
# Specify the columns for the table.
# Configure the columns to use the definition defined for each column.          
columns: 
  - id: Product
    columnDefinitionId: Product
  - id: TotalRevenue
    columnDefinitionId: TotalRevenue
  - id: UnitsSold  
    columnDefinitionId: UnitsSold
# Define the color of the table header.    
tableHeader:
  type: component.table-header
  options:
    color:
      - when: true
        color: color14
# Define the color of the table footer.    
tableFooter:
  type: component.table-footer
  options:
    color:
      - when: true
        color: color14
# Cofigure the toolbar that will display above the table.
# Add the reuqired action, to open a jig as a modal.
# The jig has a form for capturing the new row's data. 
toolbar:
  actions:
    - type: action.go-to
      options:
        title: Add sale
        linkTo: table-add-row
        isModal: true

table-add-row.jigx

sales-summary.jigx