Table

Overview

Allows people to view and edit data in a tabular format
You can set the input type for particular columns

For example one column could only take numbers where another one could search for assets

No Code set up options using the side panel

Example of the No Code set up side panel

No Code side panel

General

Title	Name of the component.
Title	Name of the Component.
Columns	Add new, arrange, remove and explore the settings for various column types here. For detailed information about specific column types, refer to the relevant pages in this knowledge base, which cover components of the same type.

Advanced

Property	Description
Default data	Automatically populate the component data from a variety of sources. For more information about the default data options available, please refer to the sections 'From this Workflow,' 'Asset Property,' 'Custom Data,' and 'Calculation' below.
From this Workflow	Note: this is a default data option Choose a component that, when its value is entered, will populate this component. You can only select components that are in the current or previous tasks. You can also only select components that are the same type as this component. When the linked component has data entered into it, the data will also populate this component.
Asset property	Note: this is a default data option Choose an asset search component that, when an asset is selected, the relevant asset property will populate this component. You can only link to asset search components that are in the current or previous tasks. You can only select properties from the selected asset type that are the same type as this component. When the linked asset search component has an asset selected, the data from the relevant property within the selected asset will populate this component.
Custom data	Note: this is a default data option Custom data allows you to set your own custom value. After selecting the custom data option, you can enter a value into the component within the workflow builder interface.
Read only	When enabled, users can’t edit with this component from within a work item.

Advanced Editor set up options

Properties shared between components

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`label`	The title or label to be displayed	“My Component”
`dataPath`	The data path where to save the value. ex.: “$.hello.world” would result to: `{ hello: { world: [] } }`	“$.task.section.myComponent”	A string that starts with `$` for the root, and each step is separated by a dot `.`. A step is a string without any space.
`isRequired`	A flag if component is required to be filled before complete	true
`isReadOnly`	A flag if component is read-only or not editable	false
`isHidden`	A flag if component is hidden	false
`condition`	Hides component if condition not met	"’{$.order.product[0].qty}’ > 10000” or ”’{$.task.section.componentName}’ == ‘value’”	Can either be <, >, or == A calculation expression that can use arithmetic operators, but this time, prefix `=` is not necessary
`onChange`	url to be called when component value changed	`"/api/v3/flow/execute/activity/{$.id}?refreshLayout=true"`	Use the exact value in the example here. Any Diana API url path in swagger that are `GET` methods. a variable can be used by wrapping it with `{}` in the example case it has `{$.id}` it resolves to the id of work
`width`	The with size of component	“col-1” “col-2” “col-3” “col-4” “col-5” “col-6” “col-7” “col-8” “col-9” “col-10” “col-11” “col-12”	A string that starts with “col-” followed by a number from 1 to 12. e.g. 12 means it takes up 100% of the horizontal space, and 6 means it takes up half the horizontal space, etc)
`defaultValue`	The default value of the component	“$.something.otherComponent” ”Hello World” ”={$.num1}+{$.num2}”	- Can be a literal string value like for text input component. For example, putting “Hello World”, will make it as default value of the text input - Can be a data path from other components, with this setup it will copy the value of other component. - Can be a calculation using arithmetic operators. The data path of other components like number input can be used as variable, but they need to be wrapped by `{}` for example, to add 10 to the value of a data path, it would be `={$.num1}+10`. to activate calculation, it should start with `=` - Can be any math.js function. See https://mathjs.org/ for a list of functions
`validation`	A list of validation rules	`[ { "type": "error", "message": "This field is required", "rules": "required", "alwaysTrigger": false } ]`	See the “Validation property set up” drop down below this table
`dataKey`	To which the value of datapath will be resolved.	“data” ”layoutComponent"	“data” - means the data path will be resolved from `work.data` ”layoutComponent” - means the data path will be resolved from the layout component config. Ex. `$.properties.label` will result to the label of component
`defaultValueDataKey`	Same with `DataKey`, but this time it’s for the default value of component	“data” ”layoutComponent"	Check `DataKey` above
`recalculateDefaultValueWhenDataPathChange`	recalculates component value using `defaultData` whenever a value changed in the list	`[ "={$.num1}+{$.num2}" ]`	The values can either be a data path or calculation, like the values that being set in default value
`sidePanelShowHide`	Sometimes a work is being rendered in a side panel, but this is mostly common for the assets. This serves as a flag if the component should be shown in case work or asset is rendered in side panel	`false`
`name`	A unique name that is used by the backend; Not displayed in component but it needs to have a value and must be unique	“my-component”
`description`	Description for the component

‣

Validation property set up

Properties unique to this component

All of these unique properties sit within a “properties” object e.g.

{
	"property one shared between components": "",
	"property two shared between components": "",
	"property etc shared between components": "",
	"properties": {
		"Tooltip": "",
		"Placeholder": "",
		"etc": "",
	}
}

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`showTitle`	Determines if grid title/label will be shown.	true
`idKey`	Specifies key for the unique id in the data record.	“id”	Any value, For example you have a column `name` `age` and a row data would look like: `{ name: “Bob", age: 20 }` For every row that is being added, table component needs a key to set the generated unique id of a row, for example if the `idKey` is `theId` the row data would be: `{ theId: "{GENERATED_ID}", name: “Bob", age: 20 }` Note: this is optional proeperty, the default value is “id”
`height`	Sets grid height in pixels (number). This height must include total rows, add row or any other footer components.	400
`autoHeight`	Determines if grid has scroll inside or it will be just full size. Pass true to always show full grid height. If passed, `height` property will be ignored.	true
`addRows`	Determines if rows can be added by the grid.	true
`addRowsButtonLabel`	Sets label for add rows button.	“Add Item”
`scrollToAddedRow`	Determines if grid must scroll to the added row to start editing. Applicable if you set height property.	true
`rowActions`	Array of string constants, that tells grid to render row actions per row. Will be automatically enabled if `editable` property passed.	[] [“delete”] [”duplicate”] [”duplicate”, “delete”]	Available Actions: - duplicate - delete
`pinnedColumns`	Sets pinned columns to the grid edges. Provide column name to corresponding arrays, you can omit `right` or `left` if you don't need.	`{ "left": ["col1", "col2"], "right": ["col3"] }`	An object with optional `left` and `right` keys, the values are the `name` from any of the columns
`visibleRows`	Sets grid visible rows and adds button at the bottom to show/hide all rows.	0	0 - show all data <n> - show <n> rows from data Example: To show `5` rows, set the value to `5`.
`sorting`	Sets initial sorting state. You can provide multiple fields to sort.	`{ "sortModel": [ { "field": "col1", "sort": "asc" } ] }`
`filter`	Sets initial filtering state.	`{ "filterModel": { "logicOperator": "and", "items": [ { "field": "col1", "value": 100, "operator": ">" } ] } }`
`defaultValue`	Default data for DataGrid that will be used if persisted data is undefined.	[ { “col1”: “value1”, “col2”: “value2” } ]
`reorderRows`	Determines if rows can be reordered in the grid.	true
`reorderRowsPreviewKey`	Sets title on a drag handle during user drag. This is helpful, when you want to show custom title during user dragging. By default, it will use `idKey` to pull title for drag handle.	“displayName”
`reorderColumns`	Determines is user can reorder columns.	true
`columnsOperations`	Determines if column operations will be shown.	true
`toolbarActions`	Sets toolbar actions. It’s the list of actions rendered in toolbar of the table that the user can execute.	`[ { "name": "createWork", "params": {} } ]`	Action Name List: - createWork - openWork - createWorkFromRelated - exportAsCSV Param Interface: `{ relationshipName: string; workId: string; label?: string; createLabel?: string; openLabel?: string; workData?: Record<string, any>; workDataValueDataKey?: string; stepName?: string; dataPath?: string; openInNewTab?: boolean; navigateToWork?: boolean; type?: string; alwaysEnabled?: boolean; }`
`rowGrouping`	Array of column keys that should be grouped	["col1”, “col2”]
`rowTitleKey`	Specifies key of title key in the data record.	“title”
`options`	Array of string options that will be picked up by Layout components that support it (i.e. simple select)	[”opt1”, ”opt2”]
`optionsDataPath`	Path to pull options from.	"$.data.options”	If the `optionsDataPath` is set, the component will use this to get list of options, otherwise it will use what’s in `options`
`selectOptions`	Array of options that will be picked up by Layout components that support it (i.e. Work select)	`[ { "value": "hello", "label": "Hello World" } ]`
`totals`	Sets total rows for the grid.	`[ { "name": "total", "displayName": "Total", "formula": "={price} * {volume}" } ]`
`dataKey`	Points to a data object to pull dataPath from.	“data”
`dataIsObject`	Determines if data is object or array.	false
`columnWidth`	Default column width	200
`columnHeaderLabelDataKey`	Points to a data object that will be used to compile column header label. The `displayName` of `properties.columns[]` can be a calculation or data path instead of a plain text. Data path needs a data to resolve value. With this option, you can set where to get data if it’s from `layoutComponent` or `data`	”data” ”layoutComponent” “layoutComponent.properties”
`totalFormulaLabelDataKey`	Points to a data object that will be used to compile total label. The `displayName` of `properties.total[]` can be a calculation or data path instead of a plain text. Data path needs a data to resolve value. With this option, you can set where to get data if it’s from `layoutComponent` or `data`	”data” ”layoutComponent” “layoutComponent.properties”
`totalFormulaDataKey`	Points to a data object that will be used to compile total formula. Apart from the usual nested keys, here you can use magic @row, that will point to the current row data. The `formula` of `properties.total[]` needs a data to execute expression. With this option, you can set where to get data if it’s from `layoutComponent` or `data`, or it could be `@row` which points to the data of row	“@row” ”data” ”layoutComponent”
`columnFormulaDataKey`	Points to a data object that will be used to compile column formula. Apart from the usual nested keys, here you can use magic @row, that will point to the current row data. The `value` of `properties.columns[]` accepts a calculation or formula. formula needs data to resolve variables. With this option, you can set where to get data if it’s from `layoutComponent` or `data`, or it could be `@row` which points to the data of row	“@row” ”data” ”layoutComponent”
`dynamicRowKeys`	Determines if data cells can be a reference or a formula to be compiled. You can provide true or array of column names to be compiled. There are some scenarios that a cell contains a formula value, could be coming from publish or directly set by additional rows or other possible sources… To instruct table that a row key needs to be calculated, use this property to declare the list of keys.	true false [”col1”, “col2”]
`dynamicRowKeysDataKey`	Points to a data object that will be used to compile cell values. Apart from the usual nested keys, here you can use magic @row, that will point to the current row data. This works with `dynamicRowKeys`, it needs data to resolve variables. With this option, you can set where to get data if it’s from `layoutComponent` or `data`, or it could be `@row` which points to the data of row	“@row” ”data” ”layoutComponent”
`additionalRows`	Adds additional rows to the grid. Additional row must have same structure as original data.	`[ { “col1”: “value1”, “col2”: “value2” } ]`
`additionalRowsPlacement`	Sets additional rows placement. Available options: 'top', 'bottom’	“bottom”
`additionalRowsDataKey`	Points to a data object that will be used to compile cell values. Apart from the usual nested keys, here you can use magic @row, that will point to the current row data. This similar to `dynamicRowKeysDataKey` it’s an option to set different source of data from the normal rows	“@row” ”data” ”layoutComponent”
`disableChildrenSorting`	Determines if grid will sort children in tree data.	false
`disableColumnMenu`	Determines if grid column menu will be shown.	false
`disableColumnPinning`	Determines if grid columns can be pinned.	false
`DisableColumnResize`	Determines if grid column can be resized.	false
`disableColumnSelector`	Determines if grid column can be shown/hidden by the user.	false
`disableColumnsOrderComparison`	Disable columns comparing with the previous state.	false
`disableExtendRowFullWidth`	Determines if grid will add final column to stretch it to a full width.	false
`disableMultipleColumnsFiltering`	Determines if grid can filter through multiple columns.	false
`disableMultipleColumnsSorting`	Determines if grid can sort through multiple columns.	false
`disableVirtualization`	Determines if grid will use virtualization for inner data.	false
`density`	Sets row density. Available options: 'compact', 'standard', 'comfortable' @default 'standard’	“compact” “standard” ”comfortable”
`watchDataPaths`	A list of data paths that on change will trigger Grid to rerender	[”$.something.test”]
`columnsDataPath`	Columns data path	“$.table.columns”
`sortable`	Default sortable value of columns	true
`groupable`	Default groupable value of columns	true
`columns`	Columns to be rendered. Holds the properties below	[ {}, {}, {}]
`columns -type`	Column type.	"inlineActions" "work" "thing" "percents" "percentage" "currency" "select" "selectTags" "date" "boolean" "booleanSwitch" "link" "user-link" "number" "string" "array" "text" "rating"
`columns - name`	Column data key.	“col1”	Any string but should be unique from other columns
`columns - displayName`	Column title.	“Column 1”
`columns - description`	A description for the column	“This is column 1”
`columns - validation`	Column validations.	`[ { "type": "error", "message": "This field is required", "rules": "required", "alwaysTrigger": false } ]`	please refer to this page for the validation values
`columns - returnAllEntitiesWhenEmptySearch`	Return all entities when empty search This is for asset search type column	“true” “false”
`columns - entityPropertiesToShowInSearchResults`	Entity properties to show in search results This is for asset search type column	`{ "label": "Name", "dataPath": "$.name" }`	When search an asset, each asset in result will display a title and subtitle, this property refers to what subtitle should show, the dataPath resolves to the value in an asset object
`columns - options`	Sets options to be passed to select cell.	[”opt1”, ”opt2”]
`columns - optionsDataPath`	Path to pull options from.	“$.test.options”
`columns - optionLabelKey`	Sets the key of each option's label or value; applies when options is an array of object	“displayName”	A key from the option object
`columns - groupOptionsBy`	Sets the key of each option's group; applies when options is an array of object	“category”	A key from the option object
`columns - value`	Sets dynamic value for the column. You can use formulas for your columns here.	“={$.value} * {$.qty}”
`columns - emptyValuePlaceholder`	Sets predefined value for cell in case value ==='0'.\n" + "e.g. '-' or 'No data’	“No Data”
`columns - decimals`	Sets number/percents Intl.NumberFormat minimumFractionDigits, maximumFractionDigits.	2
`columns - decimalsToInputAndSave`	The number of decimals to allow to input and save to the backend	4
`columns - format`	Sets date format for date cell.	“MMM/dd/yyyy”
`columns - noFormat`	Specifies that the column value should not be formatted	true
`columns - datePickerControls`	Sets date picker controls. By default uses ['calendar', showTime ? 'time']	[”calendar”, “time”]	Available Controls: - `date` - renders a date-only scroller or dropdown control - `time` - renders a time-only scroller or dropdown control - `timegrid` - renders a time grid for time selection - `datetime` - renders a date & time scroller or dropdown - `calendar` - renders a calendar view for date picking
`columns - required`	Determines if column is required when editing	true
`columns - showRange`	Sets range mode for date editor cell.	true
`columns - showTime`	Enables time selection for date editor cell	true
`columns - displayDateTimeOptions`	Override the zone with a fixed-offset zone specified in the string itself, if it specifies one.	`{ "zone": "Asia/Singapore" }`
`columns - thingType`	Sets thing type for search things editor cell.	“rsx-vessels”	Value of “enityType” from asset type flow object
`columns - addNewItem`	Enables/Disables adding new thing for search things editor cell	true
`columns - multiSelect`	Sets multi-select for search things editor cell.	“multi” ”single”
`columns - noTagsInMultiSelect`	Sets type of column tags	true
`columns - link`	Sets link template for link column type.	“/adpclear/work/:id" "https://google.com?q=:name"
`columns - linkDataKey`	Points to a data object that will be used to compile link template. Apart from the usual nested keys, here you can use magic @row, that will point to the current row data. The `link` of `properties.columns[]` can process a variable like `:id` in the sample value above… It needs to know where to resolve the value of variables if it’s from `layoutComponent` or `data`, or it could be `@row` which points to the data of row	“@row” ”data” ”layoutComponent”
`columns - linkLabel`	Value to render in cell in UI	“Open Link”
`columns - isExternalLink`	Determines if link is external and shows icon near the link.	false
`columns - flex`	Sets column width in flex.	1
`columns - columnWidth`	Sets column width in pixels (number).	200
`columns - minWidth`	Sets column min width in pixels (number).	0
`columns - maxWidth`	Sets column max width in pixels (number).	300
`columns - hide`	Hides column.	false
`columns - sortable`	Determines if column can be sorted.	true
`columns - resizable`	Determines if column can be resized.	true
`columns - editable`	Determines if column is editable.	true
`columns - pinnable`	Determines if column can be pinned.	true
`columns - groupable`	Defines if column is groupable	true
`columns - cellClassName`	Sets column's cells class name.	“class-name”
`columns - align`	Aligns column data. This property will be set automatically based on the column type, but it can be overridden.	“left” ”right” ”center”
`columns - headerClassName`	Sets header class name.	“class-name”
`columns - headerAlign`	Aligns column header. This property will be set automatically based on the column type, but it can be overridden.	“left” ”right” ”center”
`columns - hideSortIcons`	Determines if sort icons are visible.	false
`columns - disableColumnMenu`	Determines if column menu can be shown.	false
`columns - filterable`	Determines if column can be filtered.	true
`columns - disableReorder`	Determines if column can be reordered.	false
`columns - disableExport`	Determines if this data column will be exported.	false
`columns - inlineActions`	Provides inline actions for the row	`{ "name": "openWork" }`	Available Actions: - createWork - openWork
`columns - aggregation`	Defines possible aggregations for data grid. list of operation to be executed on all of the number values of the column, then values are saved on `dataPathAggregations` property data path	`{ "name": "something", "aggregation": "none" }`	Available Aggregations: - none - sum - min - max - mean - mode - count - groupedCountOfValues - sumOfFilteredValues - groupedSumOfFilteredValues - groupedAverageOfFilteredValues - groupedCountOfFilteredValues - getPercentageFromFixedRatio
`columns - columnFormulaDataKey`	Redefines global Grid columnFormulaDataKey for particular column	“formula”
`columns - operation`	Default operation. Need to set `columnsOperations` to true to enable it	"count" "sum" "average" "min" "max" "mean" "median" "mode" "clear" "none”
`columns - defaultValue`	Literal default value or a data path that points where to get the value of component	“initial value” ”$.test.something” ”={$.qty} * {$.price}”	This works like component `defaultValue`
`columns - recalculateDefaultValueWhenDataPathChange`	List of data paths to watch, if any data path value changed, it will recalculate value using defaultValue	[”$.test.something”]
`columns - replaceWhitespaceWith`	Replaces whitespace on input text with characters or strings	“-”
`columns - capitalization`	Set capitalization of input text	“none” “uppercase” ”lowercase”

Advanced Editor example of a set up table component

{
  "name": "taskOneTaskOneTable",
  "label": "Table",
  "description": "",
  "defaultValue": "",
  "dataPath": "$.taskOne.taskOne.table",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-12",
  "condition": "",
  "validation": [],
  "properties": {
    "showTitle": true,
    "autoHeight": true,
    "addRows": true,
    "addRowsButtonLabel": "Create new row in the table",
    "rowActions": [
      "delete",
      "duplicate"
    ],
    "reorderRows": true,
    "reorderColumns": true,
    "rowGrouping": [
      "Text column",
      "Number column"
    ],
    "rowTitleKey": "Row title key",
    "disableColumnMenu": false,
    "disableColumnPinning": false,
    "sortable": true,
    "groupable": true,
    "columns": [
      {
        "type": "text",
        "name": "textColumn",
        "displayName": "Text column",
        "required": false,
        "addNewItem": false,
        "columnWidth": 200,
        "sortable": true,
        "editable": true,
        "groupable": true,
        "headerAlign": "left"
      },
      {
        "type": "number",
        "name": "numberColumn",
        "displayName": "Number column",
        "required": false,
        "addNewItem": false,
        "columnWidth": 200,
        "sortable": true,
        "editable": true,
        "groupable": true,
        "headerAlign": "left"
      },
      {
        "type": "date",
        "name": "dateColumn",
        "displayName": "Date column",
        "required": false,
        "addNewItem": false,
        "columnWidth": 200,
        "sortable": true,
        "editable": true,
        "groupable": true,
        "headerAlign": "left"
      }
    ]
  }
}