Datagrid Component

DataGrid is a component that displays data in a grid format. It supports pagination, sorting, and filtering. The component can be used to display data from a GraphQL query.

Example

component: dataGrid
name:
inputs:
props:
  refreshHandler: "countries"
  enableStore: true # enable store for the datagrid, Row data will be placed in the store
  views:
    - name: allCountries
      displayName:
        en-US: All Countries
      enableEdit: true
      enableSelect: "Multiple"
      onRowClick: # action to execute when a row is clicked (override default action)
      columns:
        - name: countryCode
          label:
            en-US: Country code
        - name: name
          label:
            en-US: Name
          editor:
            type: text
          showAs:
            component: text
            props:
              value: "{{ name }}"
        - name: created
          label:
            en-US: Created
        - name: createdByUser.userName
          label:
            en-US: Created by
        - name: lastModified
          label:
            en-US: Last modified
        - name: lastModifiedByUser.userName
          label:
            en-US: Last modified by
        - name: customField
          value: "{{ item.customField }}"
      filter:
      orderBy: # default sorting for the datagrid
        - name: countryCode
          direction: ASC
      childViews: # child views for the datagrid
        - name: states # field name / resolver for GraphQL query
          onRowClick: # action to execute when a row is clicked
          columns:
            - name: stateCode
              label:
                en-US: State code
  options:
    query: countries
    rootEntityName: Country
    enableToolbar: true # show toolbar in the datagrid, default is true
    enableColumns: true # enable column selection in the datagrid, default is true
    enableFilter: true # enable filtering in the datagrid, default is true
    enableSearch: true # enable search in the datagrid, default is true
    entityKeys:
      - countryCode
    enableDynamicGrid: true
    navigationType: browser # browser or store,
    editableOptions:
      onNewRow: # mutation to create a new record
        mutation:
      onRowChange: # mutation to update a record
        mutation:
      onRowDelete: # mutation to delete a record
        mutation:
    itemTemplate: ?
      countryCode: "{{ data.countryCode }}"
    onDataLoad:
      - name: "setCountryCode"
        args:
          countryCode: "{{ data[0].countryCode }}"
    onEditClick:
      navigate: countries/{{ countryCode }}
    onRowClick:
      dialog:
        name: updateCountryDialog
        props:
          permission: System/Countries/Update
          title:
            en-US: "Update Country"
          countryCode: "{{ countryCode }}"
          organizationId: "{{ organizationId }}"
        component:
          layout:
            component: layout
            props:
            children:
              - component: Countries/UpdateCountry
    defaultView: allCountries
  toolbar:
    - component: dropdown
      props:
        label:
          en-US: Actions
        name: actionscountries
        icon: activity
        options:
          variant: secondary
        items:
          - label:
              en-US: Import Countries
            onClick: []
          - label:
              en-US: Export Countries
            onClick: []
children:

DataGrid Options

The options object is used to configure the datagrid. The options object has the following properties:

• query - The name of the GraphQL query to use to fetch data for the datagrid.
• rootEntityName - The name of the root entity in the GraphQL query.
• entityKeys - An array of entity keys to use to identify the entity in the datagrid.
• enableDynamicGrid - A boolean value that indicates whether the datagrid is dynamic.
• navigationType - The type of navigation to use when navigating to a new page.
• editableOptions - An object that contains the editable options for the datagrid.
• onDataLoad - An array of actions to execute when the data is loaded.
• onEditClick - An action to execute when the edit button is clicked.
• onRowClick - An action to execute when a row is clicked.
• defaultView - The default view to display in the datagrid.
• toolbar - An array of toolbar items to display in the datagrid.
• items - An array of items to display in the datagrid. As alternative to query property.

Columns

The columns object is an array of objects that define the columns in the datagrid. Each object in the columns array has a name property that defines the field name or resolver for the GraphQL query.

Column Properties

• name - The name of the field or resolver for the GraphQL query.
• label - An object that contains the labels for the column.
• editor - An object that defines the editor for the column.
• showAs - An object that defines how to display the column value.
• value - Value column. GraphQL query will ignore this column, and the value will be computed from the value property.

Editable Options (Prototype Phase)

To enable editing on the datagrid, you need to provide the editableOptions object in the options object and set the enableEdit property to true in the views object.

The editableOptions object has two properties: onRowChange and onRowDelete. Both properties are objects that have a mutation property. The mutation property is a mutation that will be executed when the row is changed or deleted.

Column editors can be defined in the columns object. The editor object is a field component that will be used to edit the column value. The editor object has a type property that defines the type of editor to use.

views:
  - name: allCountries
    enableEdit: true
    columns:
      - name: countryCode
        label:
          en-US: Country code
        editor:
          # field props for the editor
          type: text
editableOptions:
  onNewRow: # mutation to create a new record
    mutation:
  onRowChange: # mutation to update a record
    mutation:
  onRowDelete: # mutation to delete a record
    mutation:

Selectable

To enable selection on the datagrid, you need to set the enableSelect property to Single or Multiple in the views object.

When selection is enabled, the selected rows will be available in the gridName.selectedItems property in store.

Child Views

Child views are used to display nested data in the datagrid. The childViews object is an array of objects that define the child views for the datagrid. Each object in the childViews array has a name property that defines the field name or resolver for the GraphQL query.

Styling

The DataGrid component supports conditional styling for rows and columns based on data values, with support for light and dark themes.

Row Styles

Configure row styles using the rowStyles property within each view:

views:
  - name: allCountries
    rowStyles:
      # Conditional styles based on row data
      conditions:
        - condition: "{{ isEquals item.status 'active' }}"
          className: "row-active"
          style:
            light:
              backgroundColor: "#e8f5e9"
              borderColor: "#4caf50"
            dark:
              backgroundColor: "#1b5e20"
              borderColor: "#66bb6a"
        
        - condition: "{{ moreThan item.amount 10000 }}"
          className: "row-high-value"
          style:
            light:
              backgroundColor: "#fff3e0"
              color: "#e65100"
              fontWeight: "bold"
            dark:
              backgroundColor: "#3e2723"
              color: "#ffab40"
              fontWeight: "bold"
        
        - condition: "{{ eval item.daysOverdue > 30 }}"
          className: "row-overdue"
          style:
            light:
              backgroundColor: "#ffebee"
              opacity: 0.9
            dark:
              backgroundColor: "#4a1419"
              opacity: 0.9
      
      # Use a field value as className
      classNameField: "item.rowStyleClass"
      
      # Style function for complex logic
      styleFunction: "{{ eval getRowStyle(item) }}"

Column Styles

Extend column definitions with style properties:

columns:
  - name: status
    label:
      en-US: Status
    styles:
      # Conditional cell styles
      conditions:
        - condition: "{{ isEquals value 'completed' }}"
          className: "cell-success"
          style:
            light:
              backgroundColor: "#d4edda"
              color: "#155724"
              borderRadius: "4px"
              padding: "4px 8px"
            dark:
              backgroundColor: "#1e4620"
              color: "#82e284"
              borderRadius: "4px"
              padding: "4px 8px"
        
        - condition: "{{ isEquals value 'pending' }}"
          className: "cell-warning"
          style:
            light:
              backgroundColor: "#fff3cd"
              color: "#856404"
              borderRadius: "4px"
              padding: "4px 8px"
            dark:
              backgroundColor: "#3d2f00"
              color: "#ffd54f"
              borderRadius: "4px"
              padding: "4px 8px"
        
        - condition: "{{ isEquals value 'failed' }}"
          className: "cell-danger"
          style:
            light:
              backgroundColor: "#f8d7da"
              color: "#721c24"
              borderRadius: "4px"
              padding: "4px 8px"
            dark:
              backgroundColor: "#4a1419"
              color: "#ff8a95"
              borderRadius: "4px"
              padding: "4px 8px"
      
      # Column-wide style
      className: "column-status"
      align: "center"  # left, center, right
      width: "120px"
      minWidth: "80px"
      maxWidth: "200px"

Complete Styling Example

component: dataGrid
name: ordersGrid
props:
  views:
    - name: allOrders
      displayName:
        en-US: All Orders
      
      # Row styling configuration
      rowStyles:
        conditions:
          - condition: "{{ isEquals item.priority 'urgent' }}"
            className: "row-urgent"
            style:
              light:
                backgroundColor: "#ffebee"
                borderLeft: "4px solid #f44336"
                fontWeight: "600"
              dark:
                backgroundColor: "#4a1419"
                borderLeft: "4px solid #ff5252"
                fontWeight: "600"
          
          - condition: "{{ moreThan item.totalAmount 50000 }}"
            className: "row-high-value"
            style:
              light:
                backgroundColor: "#e8f5e9"
                borderLeft: "4px solid #4caf50"
                fontWeight: "600"
              dark:
                backgroundColor: "#1b5e20"
                borderLeft: "4px solid #66bb6a"
                fontWeight: "600"
          
          - condition: "{{ moreThan item.daysOverdue 0 }}"
            className: "row-overdue"
            style:
              light:
                backgroundColor: "#fff3e0"
                borderLeft: "4px solid #ff9800"
                opacity: 0.9
              dark:
                backgroundColor: "#3e2723"
                borderLeft: "4px solid #ffab40"
                opacity: 0.9
          
          # Date comparison examples
          - condition: "{{ moreThan (daysAgo item.dueDate) 0 }}"
            className: "row-past-due"
            style:
              light:
                backgroundColor: "#ffcdd2"
                borderLeft: "4px solid #d32f2f"
              dark:
                backgroundColor: "#5d1418"
                borderLeft: "4px solid #ff5252"
          
          - condition: "{{ lessThan (daysUntil item.expiryDate) 7 }}"
            className: "row-expiring-soon"
            style:
              light:
                backgroundColor: "#fff9c4"
                borderLeft: "4px solid #fbc02d"
              dark:
                backgroundColor: "#3d3200"
                borderLeft: "4px solid #ffd54f"
          
          - condition: "{{ moreThan (dateDiff item.actualDate item.plannedDate) 5 }}"
            className: "row-delayed"
            style:
              light:
                backgroundColor: "#ffccbc"
                borderLeft: "4px solid #d84315"
              dark:
                backgroundColor: "#3e2723"
                borderLeft: "4px solid #ff6e40"
      
      # Column styling configuration
      columns:
        - name: orderNumber
          label:
            en-US: Order #
          styles:
            className: "column-order-number"
            align: "center"
            style:
              light:
                fontWeight: "600"
                color: "#1976d2"
              dark:
                fontWeight: "600"
                color: "#90caf9"
        
        - name: status
          label:
            en-US: Status
          styles:
            align: "center"
            conditions:
              - condition: "{{ isEquals value 'delivered' }}"
                style:
                  light:
                    backgroundColor: "#d4edda"
                    color: "#155724"
                    borderRadius: "4px"
                    padding: "4px 8px"
                  dark:
                    backgroundColor: "#1e4620"
                    color: "#82e284"
                    borderRadius: "4px"
                    padding: "4px 8px"
              
              - condition: "{{ isEquals value 'pending' }}"
                style:
                  light:
                    backgroundColor: "#fff3cd"
                    color: "#856404"
                    borderRadius: "4px"
                    padding: "4px 8px"
                  dark:
                    backgroundColor: "#3d2f00"
                    color: "#ffd54f"
                    borderRadius: "4px"
                    padding: "4px 8px"
              
              - condition: "{{ isEquals value 'cancelled' }}"
                style:
                  light:
                    backgroundColor: "#f8d7da"
                    color: "#721c24"
                    borderRadius: "4px"
                    padding: "4px 8px"
                  dark:
                    backgroundColor: "#4a1419"
                    color: "#ff8a95"
                    borderRadius: "4px"
                    padding: "4px 8px"
        
        - name: totalAmount
          label:
            en-US: Total
          styles:
            align: "right"
            width: "150px"
            conditions:
              - condition: "{{ moreThan value 50000 }}"
                style:
                  light:
                    color: "#2e7d32"
                    fontWeight: "600"
                  dark:
                    color: "#66bb6a"
                    fontWeight: "600"
              - condition: "{{ moreThan value 100000 }}"
                style:
                  light:
                    color: "#1b5e20"
                    fontWeight: "bold"
                    fontSize: "1.1em"
                  dark:
                    color: "#4caf50"
                    fontWeight: "bold"
                    fontSize: "1.1em"
  
  options:
    query: orders
    rootEntityName: Order

Style Properties Reference

Row Style Properties

• conditions: Array of conditional styles based on row data
• className: CSS class name to apply
• classNameField: Field path to get className from row data
• styleFunction: JavaScript function to compute styles dynamically
• style: Style object with light and dark theme variants

Column Style Properties

• conditions: Array of conditional styles based on cell value
• className: CSS class name for the column
• align: Text alignment (left, center, right)
• width: Fixed column width
• minWidth: Minimum column width
• maxWidth: Maximum column width
• style: Style object with light and dark theme variants

Available Style Conditions

• {{ isEquals item.field 'value' }}: Check equality
• {{ moreThan item.field 100 }}: Check if greater than
• {{ lessThan item.field 100 }}: Check if less than
• {{ isTrue item.field }}: Check boolean value
• {{ isNullOrEmpty item.field }}: Check null or empty
• {{ any item.fields }}: Check if any value is true
• {{ eval expression }}: Evaluate custom JavaScript expression (⚠️ Not recommended due to performance issues)

Date Comparison Functions

• {{ dateDiff date1 date2 }}: Days between dates (positive if date1 > date2)
• {{ daysBetween date1 date2 }}: Absolute days between dates
• {{ daysUntil futureDate }}: Days until future date from now
• {{ daysAgo pastDate }}: Days since past date until now
• {{ isDateBefore date1 date2 }}: Check if date1 is before date2
• {{ isDateAfter date1 date2 }}: Check if date1 is after date2
• {{ now() }}: Current date for comparisons

Date Styling Examples

# Style if due date has passed
condition: "{{ moreThan (daysAgo item.dueDate) 0 }}"

# Style if expiring within 7 days
condition: "{{ lessThan (daysUntil item.expiryDate) 7 }}"

# Style if delivery is delayed by more than 3 days
condition: "{{ moreThan (dateDiff item.actualDelivery item.plannedDelivery) 3 }}"

# Style if created more than 30 days ago
condition: "{{ moreThan (daysAgo item.createdDate) 30 }}"

Common CSS Properties

• backgroundColor: Background color
• color: Text color
• fontSize: Font size
• fontWeight: Font weight (normal, bold, 600, etc.)
• borderLeft, borderRight, borderTop, borderBottom: Border styles
• borderRadius: Rounded corners
• padding: Cell padding
• opacity: Transparency (0-1)
• textAlign: Text alignment
• textDecoration: Underline, strikethrough, etc.