Tables

---

Tables

The table component is a highly configurable, feature rich and navigable data grid. It allows for presentation of data in many different ways, and it is often possible fulfil business requests, just by configuration. The table implements the common framework concept and uses Cytoscape.js#data eles data select keys to configure data into cells. Read Understanding the graph model to learn more about the high level concept.

{
    "tables" : {
        "example" : {
            "datasets": ["rootNodesInitalLoadData"],
            "columns": [
                "title",
                "owner",
                "state",
                "DEFAULT_SEPARATOR",
                "related_docs"
            ],
            "services": ["initialLoadService"],
            "expand": {
                "services": ["expandService"],
                "datasets": ["expandData"]
            }
        }
    }
}

Table properties

Prop Name	Description	Data Type	Required	Example
columns	List of column names to display in the table. "DEFAULT_SEPARATOR" is a built in column that adds a small space in between columns.	array string	yes	["title", "name","DEFAULT_SEPARATOR" "state"]
contextMenu	Reference to a context menu definition.	string	no	"issueContextMenu"
datasets	References to datasets providing data for the table.	array string	yes	["issueData"]
deferredServices	Services loaded lazily after initial render.	array string	no	["lazyLoadDetails"]
dropHandler	Reference to a drop handler for drag-and-drop functionality.	string	no	"dropHandler": "cr_table_drop_zone",
expand	Configuration for expandable rows or data.	object	no	Table expand
name	Name of the table (not used explicitly here).	string	yes	"IssueTable"
services	References to services fetching data for the table.	array string	no	"services": ["fetchAllIssues"]
settings	Table-specific settings (e.g., drag behavior, column mapping).	object	no	{"multiDraggable": true}
toolbars	Reference to a toolbar definition for interactivity.	string	no	"toolbars": "toolbar_issue_details"

Context menu

Right-clicking a table row shows a context menu. Define menus in the top-level contextMenus map and reference one by name from the table's contextMenu property. Each menu is an array of command-name references — commands themselves are defined in the top-level commands map (same pattern used by toolbars).

{
  "tables": {
    "productStructure": {
      "datasets": ["contextNode"],
      "columns": ["title", "owner", "state"],
      "contextMenu": "openWithMenu"
    }
  },
  "contextMenus": {
    "openWithMenu": ["openWith", "promote", "demote"]
  },
  "commands": {
    "openWith": {
      "type": "openWith",
      "isMenu": true,
      "label": "Open With",
      "openApps": {
        "ENOLCMI_AP": { "label": "Item Lifecycle" },
        "VPLMProjectManagement_AP": { "label": "Project Management" },
        "ENO3DMultiCAD_AP": { "label": "3D Multi CAD" }
      }
    },
    "promote": {
      "label": "Promote",
      "type": "genericService",
      "settings": {
        "relatedConfig": {
          "services": ["promoteItemService"],
          "responseMapping": { "expression": "results[0].maturityState", "attribute": "state" }
        }
      }
    },
    "demote": {
      "label": "Demote",
      "type": "genericService",
      "settings": {
        "relatedConfig": {
          "services": ["demoteItemService"],
          "responseMapping": { "expression": "results[0].maturityState", "attribute": "state" }
        }
      }
    }
  }
}

contextMenus map

Field	Description	Type	Required
<menuName>	An ordered list of command-name references. Items are rendered in declaration order.	array of string	yes

Open With submenu

If one of the referenced commands has type: "openWith", it is rendered as a submenu (with a ▶ arrow) instead of a plain menu item. Hovering the entry reveals a submenu containing:

1. The apps declared in the command's openApps, in declaration order.
2. A More apps… entry (always appended) — opens the Compass side panel so the user can pick any other compatible app.

The submenu label comes from the openWith command's label. openApps is an object where each key is the app ID and the value is { "label": "..." }.

Submenus (isMenu: true)

Any context menu entry can be turned into a nested submenu by setting isMenu: true and defining the submenu in the top-level menus array. Hovering the entry reveals the submenu with a ▶ arrow.

{
  "contextMenus": {
    "myMenu": [
      "openWith",
      { "name": "stateActions", "isMenu": true }
    ]
  },
  "menus": [
    {
      "name": "stateActions",
      "label": "State Actions",
      "icon": "Workflow",
      "commands": [
        { "name": "promote" },
        { "name": "demote" }
      ]
    }
  ],
  "commands": {
    "promote": {
      "label": "Promote",
      "type": "genericService",
      "settings": {
        "relatedConfig": {
          "services": ["promoteItemService"],
          "responseMapping": [
            { "expression": "results[0].maturityState", "attribute": "state" }
          ]
        }
      }
    },
    "demote": {
      "label": "Demote",
      "type": "genericService",
      "settings": {
        "relatedConfig": {
          "services": ["demoteItemService"],
          "responseMapping": [
            { "expression": "results[0].maturityState", "attribute": "state" }
          ]
        }
      }
    }
  }
}

The context menu entry { "name": "stateActions", "isMenu": true } tells the renderer to look up stateActions in the menus array and render it as a submenu. The label and icon on the menu definition control what the parent entry looks like. Commands inside the submenu are looked up from the same top-level commands map.

menus array

Field	Description	Type	Required
name	Unique identifier referenced by isMenu: true entries in contextMenus.	string	yes
label	Display label for the submenu parent entry.	string	yes
icon	Icon name for the submenu parent entry (uses the platform icon set).	string	no
commands	Ordered list of { "name": "<commandName>" } references into the top-level commands map.	array	yes

contextMenus entry fields (when using isMenu)

A context menu array item can be either a plain string (command reference) or an object:

Field	Description	Type	Required
name	Command or menu name to look up.	string	yes
isMenu	Set to true to render this entry as a submenu (resolved from the menus array). Omit or set to false for a plain command.	boolean	no
label	Inline label override. When present, overrides the label from the resolved command/menu definition.	string	no
icon	Inline icon override.	string	no

Command types

Commands referenced from a context menu (or from inside a menus submenu) support the following type values:

type	Description
openWith	Renders an Open With submenu populated by the command's openApps.
genericService	Calls a service on the selected row's object. services is an array of service names (strings). After the call completes, the row is refreshed according to settings.relatedConfig.refreshBehavior or responseMapping.

Commands without a type are treated as plain menu items — clicking invokes the configured onClick handler (if any).

refreshBehavior values

Value	Description
refreshRowWithColumnService	Re-fetches column-level services for the affected row only.
refreshRow	Re-renders the row from the current graph data without a network call. Used automatically when responseMapping is defined.

responseMapping — update the row from the service response

When a genericService command returns data that should be immediately reflected in the table (for example a maturity state change), use responseMapping instead of refreshRowWithColumnService. The row updates instantly from the service response — no second network round-trip is needed.

"promote": {
  "label": "Promote",
  "type": "genericService",
  "settings": {
    "relatedConfig": {
      "services": ["promoteItemService"],
      "responseMapping": { "expression": "results[0].maturityState", "attribute": "state" }
    }
  }
}

responseMapping fields:

Field	Description	Type	Required
expression	JSONata expression evaluated against the raw HTTP response body.	string	yes
attribute	Graph node attribute to write the result to. Must match the data field of the target column definition.	string	yes

Finding the right attribute name — look at the column definition; the data field is the graph attribute:

"maturity_state": {
  "label": "Maturity State",
  "data": "state"
}

Here "data": "state" means the graph attribute is state, so "attribute": "state" is correct.

Multiple attributes — pass an array:

"responseMapping": [
  { "expression": "results[0].maturityState", "attribute": "state" },
  { "expression": "results[0].owner",         "attribute": "owner" },
  { "expression": "results[0].modifiedDate",  "attribute": "modified" }
]

JSONata expressions can transform values, not just extract them:

{ "expression": "$uppercase(results[0].maturityState)", "attribute": "stateLabel" }

When responseMapping is defined, refreshBehavior is ignored — the row re-renders directly from the updated graph data.

Open with app (column-level)

You may also set openWith, openApps or openApp on individual columns. openApp is a shortcut for a single-app left-click launch (no menu); openWith and openApps follow the same right-click rules as above.

Selecting an entry invokes the platform-provided handler (the same one the OOTB Compass uses), so the chosen app opens via TransientWidget with the row's object as context.

Settings properties

Prop Name	Description	Data Type	Required	Example
colorMappedColumn	Reference to a column name that will have color mapping applied.	string	no	"priority"
multiDraggable	Allows selecting multiple rows for drag-and-drop. The related column data is dragged together.	boolean	no	true
onTableRowDropEnable	Enables a drop zone on top of the table for supporting drag-and-drop connections.	boolean	no	true
paginationEnable	if set false then pagination disabled for table.	boolean	no	"paginationEnable": false
paginationConfig	Control selectable pagination sizes and the default used	object	no	"paginationConfig":{ "pagination": true, "itemsPerPage":[25,50,100], "defaultItemsPerPage": 25 }

Expand properties

Expand setting defines how rows or nodes are expanded in a structure table. For expanding node in some cases a service call is needed to fetch the data. Dataset is used to navigate to or from the node / row to get child nodes.

Prop Name	Description	Data Type	Required	Example
datasets	Defines which datasets to call to navigate from row or node to get child nodes.	array string	yes	"expand": { "services": [ "physicalProductService" ], "datasets": [ "ups1Level" ] },
services	In case data is not yet present in data store (graph) services are used to load data on expandRow that is getting expanded as used as contextId while calling service	array string	no	"expand": { "services": [ "physicalProductService" ], "datasets": [ "ups1Level" ] },
expandRootNodesOnLoad	Set to true for making default expand enable for level 1	boolean	no	"expand": { "services": [ "physicalProductService" ], "datasets": [ "ups1Level" ], "expandRootNodesOnLoad": true }

Advanced table implementations

The table component allows advanced implementations such as custom rendering or data calculations using the plugin architecture. Learn more about plugins in Plugin code extensions.