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.