Components
grid

3min
 The grid component enables you to create grid layouts in your app, organizing content into rows and columns for a visually consistent and flexible interface. It helps align elements proportionally, ensuring a structured design. The grid is ideal for creating galleries to display photos or product images, dashboards, menus, and product lists. This component is very similar to the jig.grid﻿  the only exception is that this component can be used in a jig.default﻿ with other components.
﻿Configuration options﻿
The grid component has two available configuration options:
Auto Grid - used to create a grid layout from a datasource. This is similar in configuration to a jig.list﻿ where a single grid-item is configured and iterates through the datasource.
Custom Grid - used to create a custom grid layout using widgets, images, or custom components in various sizes.  
Core structure
﻿
type
Within a grid component, the grid-item﻿ component is used to define each of the elements in the grid layout. Within the grid-item a select set of components can be configured.  
data
Configure a datasource to call the data in the grid layout. The data property is required for the Auto Grid, but is optional for the Custom Grid selection.
﻿Examples and code snippets ﻿
Auto grid
﻿
In this example, a gallery of images is created to showcase the services a company offers. The jig.default type, grid component and datasource is used, enabling a simple configuration based on the records in the datasource. The component.grid-item only needs to be configured once using the expression [email protected]. followed by the desired data field. Using current loops through the datasource, creating a grid item for each data record. Note that the specified size will apply to all returned records.
grid-cleaning-service.jigx
datasource (Dynamic Data)
title: Cleaning services
description: Available services in your area.
type: jig.default
# Define the datasource used to list the images and services.

children:
  - type: component.grid
    options:
      # Select the configured data source where the data will originate. 
      data: [email protected]
      item:
        # One grid-item component generates the entire grid using current data. 
        type: component.grid-item
        options:
      # Select the size that all the items will display as, all items use the same size.        
           size: "2x2"
           children: 
             # Choose the component to show in the grid.            
              type: component.image
              options:
        # Use the expression [email protected] with the data field name.
        # Use current loops through the datasource creating grid-items for each data record.             
                title: [email protected]
                source:
                  uri: [email protected]
title: Cleaning services
description: Available services in your area.
type: jig.default
# Define the datasource used to list the images and services.

children:
  - type: component.grid
    options:
      # Select the configured data source where the data will originate. 
      data: =@ctx.datasources.cleaning
      item:
        # One grid-item component generates the entire grid using current data. 
        type: component.grid-item
        options:
      # Select the size that all the items will display as, all items use the same size.        
           size: "2x2"
           children: 
             # Choose the component to show in the grid.            
              type: component.image
              options:
        # Use the expression =@ctx.current.item.x with the data field name.
        # Use current loops through the datasource creating grid-items for each data record.             
                title: =@ctx.current.item.service
                source:
                  uri: =@ctx.current.item.image
﻿
This example demonstrates combining the grid component with other components (entity and form) in a default . The grid is customized to show an image component (4x2), a list widget (2x2) and chart widget (2x2). 
Custom grid 
﻿
grid-custom-component
list-with-stage-dd
chart-bar1_2x2
title: Global Sales 
type: jig.default

children:
    - type: component.entity
      options:
        isCompact: true
        children:
         -  type: component.entity-field
            options:
              label: Region Sales Schedule
              value: My Schedule
    - type: component.divider 
    # Add a grid to contain multiple grid-items.  
    - type: component.grid
      options: 
        children:
        # First grid-item adds an image to the grid.
        # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 4x2
              children: 
                type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGJvb2tpbmd8ZW58MHx8MHx8fDA%3D 
         # Second grid-item adds a list widget to the grid.
          # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 2x2
              children: 
                type: component.jig-widget
                options:
                  jigId: list-with-stage-dd
                  widgetId: "2x2"
          # Third grid-item adds a chart widget to the grid.
          # Specify the grid-item size to apply to the item.        
          - type: component.grid-item
            options:
              size: "2x2"
              children: 
                type: component.jig-widget
                options:
                  jigId: chart-bar1_2x2
                  widgetId: "2x2"
    # The grid and grid-item components can be combined with other components.
    - type: component.form
      instanceId: flightCheck-in
      options:
        isDiscardChangesAlertEnabled: false
        children:
          - type: component.field-row
            options:
              children:
                - type: component.text-field
                  instanceId: fullname
                  options:
                    label: Name
                - type: component.text-field
                  instanceId: mobile-phone
                  options:
                    label: Contact
                    icon: phone
          - type: component.text-field
            instanceId: flightNumber
            options:
              label: Flight number        
title: Global Sales 
type: jig.default

children:
    - type: component.entity
      options:
        isCompact: true
        children:
         -  type: component.entity-field
            options:
              label: Region Sales Schedule
              value: My Schedule
    - type: component.divider 
    # Add a grid to contain multiple grid-items.  
    - type: component.grid
      options: 
        children:
        # First grid-item adds an image to the grid.
        # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 4x2
              children: 
                type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGJvb2tpbmd8ZW58MHx8MHx8fDA%3D 
         # Second grid-item adds a list widget to the grid.
          # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 2x2
              children: 
                type: component.jig-widget
                options:
                  jigId: list-with-stage-dd
                  widgetId: "2x2"
          # Third grid-item adds a chart widget to the grid.
          # Specify the grid-item size to apply to the item.        
          - type: component.grid-item
            options:
              size: "2x2"
              children: 
                type: component.jig-widget
                options:
                  jigId: chart-bar1_2x2
                  widgetId: "2x2"
    # The grid and grid-item components can be combined with other components.
    - type: component.form
      instanceId: flightCheck-in
      options:
        isDiscardChangesAlertEnabled: false
        children:
          - type: component.field-row
            options:
              children:
                - type: component.text-field
                  instanceId: fullname
                  options:
                    label: Name
                - type: component.text-field
                  instanceId: mobile-phone
                  options:
                    label: Contact
                    icon: phone
          - type: component.text-field
            instanceId: flightNumber
            options:
              label: Flight number        
﻿
﻿
Core structure
type	Within a grid component, the grid-item component is used to define each of the elements in the grid layout. Within the grid-item a select set of components can be configured.
data	Configure a datasource to call the data in the grid layout. The data property is required for the Auto Grid, but is optional for the Custom Grid selection.
Updated 21 Feb 2025
Did this page help you?
text-field
grid-item
grid

﻿Configuration options﻿

Core structure

﻿Examples and code snippets ﻿

Auto grid

Custom grid

Configuration options

Examples and code snippets
