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.	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"

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.