Table
Class graphomate.ui.tables.Table
extends sap.ui.core.Control
Quick Start
Creates a table that can be used in layouts and other container components. The graphomate table is highly customizable due to its large amount of properties and aggregations.
Constructor Details
new graphomate.ui.tables.Table(id?:string, settings?:object)
Accepts an id and a settings object or one or none of them. The settings object defines initial property values as well as aggregated and associated objects. Every setting can also be set using the related setter method. The supported settings are:
Properties:
Display
width : sap.ui.core.CSSSize (default: "800px")
height : sap.ui.core.CSSSize (default: "300px")
rowOrder : graphomate.ui.tables.enums.RowOrder (default: PreOrder)
showDatatypesInCells : boolean (default: false)
showDatatypesInHeader : boolean (default: true)
fixedHeader : boolean (default: false)
showFilterHelper : boolean (default: false)
Scaling
comparisonGroup : string (default: null)
manualScaleMax : graphomate.ui.types.PositiveFloat (default: 150)
manualScaleMin : graphomate.ui.types.NegativeFloat (default: -150)
manualScalePercentMax : graphomate.ui.types.PositiveFloat (default: 20)
manualScalePercentMin : graphomate.ui.types.NegativeFloat (default: -20)
scaleMode : graphomate.ui.enums.ScaleMode (default: Auto)
Deviations
semanticAxis : boolean (default: false)
axisWidth : graphomate.ui.types.UnsignedInteger (default: 2)
deviationGoodColor : graphomate.ui.types.HexColor (default: "#8cb400")
deviationBadColor : graphomate.ui.types.HexColor (default: "#ff0000")
negativeDeviationIsGood : boolean (default: false)
showDeviationLabels : boolean (default: true)
textualDeviation : boolean (default: false)
outlierMode : graphomate.ui.enums.OutlierMode (default: Short)
pinColor : graphomate.ui.types.HexColor (default: "#000000")
applyPinColor : boolean (default: false)
pinHeadColor : graphomate.ui.types.HexColor (default: "#000000")
applyPinHeadColor : boolean (default: false)
deviationLabelSizeFactor : graphomate.ui.types.PositiveFloat (default: 0.7)
noClip : boolean (default: false)
Dividers
showDividers : boolean (default: true)
dividerColor : graphomate.ui.types.HexColor (default: "#cccccc")
dividerThickness : graphomate.ui.types.PositiveFloat (default: 0.1)
showSumBorders : boolean (default: false)
sumBorderColor : graphomate.ui.types.HexColor (default: "#000000")
sumBorderThickness : graphomate.ui.types.PositiveFloat (default: 0.1)
sumPadding : graphomate.ui.types.PositiveFloat (default: 0)
Labels
fontSize : graphomate.ui.types.UnsignedInteger (default: 14)
fontFamily : string (default: "Arial")
fontColor : graphomate.ui.types.HexColor (default: "#000000")
rowTitleAlignmentRight : boolean (default: false)
dataCellAlignmentRight : boolean (default: true)
basicNumberFormat : string (default: "0.0a")
basicNumberFormatPercent : string (default: "0.0%")
locale : graphomate.ui.enums.Locale (default: EN)
labelFormatMode : graphomate.ui.enums.LabelFormatMode (default: Basic)
showColumnTitles : boolean (default: true)
showRowTitles : boolean (default: true)
noWrap : boolean (default: false)
zeroValueReplacement : string (default: "")
infinityValueReplacement : string (default: "")
Hierarchy
hierarchyIndent : graphomate.ui.types.PositiveFloat (default: 1.2)
showHierarchy : boolean (default: true)
collapsibleHierarchy : boolean (default: true)
nodeStyleBold : boolean (default: true)
nodeStyleItalic : boolean (default: false)
nodeStyleColor : graphomate.ui.types.HexColor (default: "#000000")
hierarchyExpansionLevel : graphomate.ui.types.UnsignedInteger (default: 3)
expandOnRowTitleClick : boolean (default: false)
Exceptions
exceptionPosition : graphomate.ui.tables.enums.ExceptionPosition (default: Leading)
Aggregations:
rows : graphomate.ui.tables.Row[] (default: [])
columns : graphomate.ui.tables.DataColumn[] || graphomate.ui.tables.DeviationColumn[] (default: [])
extendedNumberFormat : graphomate.ui.ExtendedNumberFormat (default: null)
extendedNumberFormatPercent : graphomate.ui.ExtendedNumberFormat (default: null)
rowFormatConfigurations : graphomate.ui.tables.RowFormatConfiguration[] (default: null)
Events:
elementClick : fnListenerFunction(oEvent)
Property Details
Each property "sampleProperty" can be set using the related setter "setSampleProperty". Each setter expects a valid value for the related property as input parameter and throws an exception for invalid values. It returns the "this context" for method chaining. Each property "sampleProperty" can also be gotten using the related getter method "getSampleProperty". It expects no input parameters and returns the current value of the related property. Each property that represents or partially contains indices excepts a 0 based index.
setSampleProperty(value) - Sets the property to the passed value if valid and returns this for method chaining.
getSampleProperty() - Returns the current value of the property.
The Following Properties are available:
Property Name | Type | Description |
|---|---|---|
width | sap.ui.core.CSSSize | Sets the width of the table. Allowed values are CSS sizes like "250px", "10em", "50%" or "auto". |
height | sap.ui.core.CSSSize | Sets the height of the table. Allowed values are CSS sizes like "250px", "10em", "50%" or "auto". Note that when a percentage value is given, the height of any of the surrounding containers must be defined. This is due to the characteristic of the html elements' height attribute which differs from the behavior of the width attribute for percentage values. |
rowOrder | Controls the position of totals in a table with hierarchical data. The value PreOrder sets totals as preceeding rows and PostOrder sets them as following ones. | |
showDatatypesInCells | boolean | Sets the color of the data column's datatype for all cells of the column and overrules all other color settings. |
showDatatypesInHeader | boolean | If set to true, the table header of a column is styled according to its assigned datatype. |
fixedHeader | boolean | If the table header (column titles) should be displayed permanently (even when scrolling), this can be done by activating this property. |
showFilterHelper | boolean | If this property is activated, a text field appears in the upper left corner of the table. The value of this text field will be used to set a live filter on the row titles. |
comparisonGroup | string | Setting the comparison group string makes other tables with the same comparison group string to scale identically. Comparison Groups are used globally within the DOM. Also charts with the same comparison group are scaled identically. |
manualScaleMax | Sets the maximum data value for scaling the absolute deviation columns. | |
manualScaleMin | Sets the minimum data value for scaling the absolute deviation columns. | |
manualScalePercentMax | Sets the maximum data value for scaling the percent deviation columns. | |
manualScalePercentMin | Sets the minimum data value for scaling the percent deviation columns. | |
scaleMode | The value Auto scales the table according to the min and max values of all data. The deviation columns of several tables can be scaled identically by using the same comparison group. That way the min and max of the data basis in this group is used. With the scale mode Manual the table will use the assigned manual min and max values for scaling. | |
semanticAxis | boolean | If set to true, the axis of deviation columns is styled according to the datatype assigned to the data column that serves as base for the deviation calculation. |
axisWidth | Sets the width of deviation axes in px. | |
deviationGoodColor | Sets the color of positive deviations. | |
deviationBadColor | Sets the color of negative deviations. | |
negativeDeviationIsGood | boolean | If activated, the colors of negative and positive deviations are swapped. |
showDeviationLabels | boolean | Sets the visibility of deviation labels. |
textualDeviation | boolean | If activated, the deviations are represented only by their labels and no deviation bars or pins are displayed. |
outlierMode | Sets the style of outliers. Outliers are values which exceed the range defined by the (manual or automatic) minimum and maximum value of a table's scale. | |
pinColor | Sets the color of the pins. Pins are the lines of a percentage deviation column which connect the axis with the pin head and represent the displayed values with their length. To apply, the property applyPinColor must be activated. | |
applyPinColor | boolean | If activated, the property pinColor will be applied. |
pinHeadColor | Sets the color of the pin heads. A pin head marks the end of a deviation column's pin. To apply, the property applyPinHeadColor must be activated. | |
applyPinHeadColor | boolean | If activated, the property pinHeadColor will be applied. |
deviationLabelSizeFactor | According to IBCS the text size of the labels in the deviation columns corresponds to the text size of the data columns of the table. The default factor for this is 0.7, that means the table’s text size times 0.7 results in the text size of the deviations. This factor can be changed with this property. Please be aware that a factor lower than 0.3 or higher than 1.2 may result in wrong representations. | |
noClip | boolean | This option disables clipping for SVGs, a feature used to prevent pin heads to show up behind both sides of a deviation axis. This behaviour is not recommended, but necessary if you plan to deploy your table on iOS: Newer Safari versions contain a bug and therefore do not support clipping, which leads to rendering errors. |
showDividers | boolean | Sets the visibility of the lines which divide the rows from each other. |
dividerColor | Sets the color of the lines which divide the rows from each other. | |
dividerThickness | Sets the thickness of the lines which divide the rows from each other. The value is interpreted as em. | |
showSumBorders | boolean | Sets the visibility of sum borders. The sum borders will be displayed above the sum rows. |
sumBorderColor | Sets the color of sum borders. | |
sumBorderThickness | Sets the thickness of sum borders in em. | |
sumPadding | Adds a padding after sum rows. The padding is interpreted as em. This is useful when rowOrder is set to "PreOrder" to separate rows of the same hierarchy level from each other. | |
fontSize | Sets the table's font size in px. | |
fontFamily | string | Sets name of the table's font family. |
fontColor | Sets the color of the table's font. | |
rowTitleAlignmentRight | boolean | If activated, the row title texts are aligned at the right side of their cell. |
dataCellAlignmentRight | boolean | If activated, the values of data columns are aligned at the right side of their cell. |
basicNumberFormat | string | Sets the format of the absolute values according to the guidelines of numeral.js. e.g. "0.00a" for abbreviated values with two decimal places like 2.69k |
basicNumberFormatPercent | string | Sets the format of the percentage values according to the guidelines of numeral.js. e.g. "0.0%" for percentage values with one decimal place like 10.4% |
locale | Sets the region specific locale. The locale affects decimal and thousand separators of the basic number format as well as abreviations and enumerations. | |
labelFormatMode | In basic mode the table uses the number formats defined by the properties "basicNumberFormat" and "basicNumberFormatPercent". In extended mode it applies the definition of aggregation elements "extendedNumberFormat" and "extendedNumberFormatPercent" to all texts. | |
showColumnTitles | boolean | Sets the visibility of the column header titles. |
showRowTitles | boolean | Sets the visibility of the row titles. |
noWrap | boolean | If activated, column titles and row titles are not wrapped when they are wider than their column's width. |
zeroValueReplacement | string | If this property contains a value, all zeros (0) will be replaced with that value. |
infinityValueReplacement | string | In JavaScript, when you divide any number by 0, the result is Infinity. If this property contains a value, all '∞' values are replaced with that value. Infinity values may be displayed at percentage deviation columns when the base of the deviation contains 0. |
hierarchyIndent | Sets the indent size of the hierarchy levels in em. | |
collapsibleHierarchy | boolean | If activated, the hierarchy nodes are collapsible and expandable and their hierarchy state markers (+,-) are displayed to click on them. |
nodeStyleBold | boolean | Sets whether the hierarchy node rows' texts should be bold. |
nodeStyleItalic | boolean | Sets whether the hierarchy node rows' texts should be italic. |
nodeStyleColor | Sets the color of the hierarchy node rows' texts. | |
hierarchyExpansionLevel | Determines to which hierarchy level the table is initially expanded when rendering. The hierarchy level index starts with 0 (highest level). When the table contains exactly one row of hierarchy level 0 and an arbitrary amount of rows of other levels, the hierarchy structure is called a tree. A hierarchy with multiple top level nodes is called forest. When having a tree structure, a value of 0 for this property will initially render the top level node as collapsed. A forest will need a value of 1 for this property to display the top level nodes as collapsed due to internal hierarchy logic. In this case, a value of 0 would result in an empty table. | |
expandOnRowTitleClick | boolean | If activated, the hierarchy nodes can be collapsed and expanded by clicking on them instead of clicking on their hierarchy state marker (+,-) and the + and - won't be displayed. |
exceptionPosition | Determines whether the exceptions of a RowFormatConfiguration are displayed at the left side of the cell, at the left side of the value or at the right side of the value they get applied to. |
Aggregation Details
We decided to use aggregation over association for all managed items of the graphomate table because they can be bound to a model and associations can't. The disadvantage of using an aggregation is that a managed item can only be part of one aggregation. So the instance of an extendedNumberFormat for example can be part of an aggregation of table 1 but can't be part of an aggregation of table 2 while it is still part of table 1.
Items of an aggregation named "sampleThings" that has a cardinality of 0...n (and a multiplicity of 1:n) can be accessed by using one of the following methods:
indexOfSampeThing(object) - Searches for the provided object in the aggregation and returns its 0-based index if found, or -1 otherwise.
getSampleThings() - Returns an array with the objects contained in the aggregation or an empty array.
addSampleThing(object) - Adds the provided object as last element in the aggregation. Returns this for method chaining.
insertSampleThing(object, index) - Inserts the provided object into the aggregation at position i. Returns this for method chaining.
removeSampleThing(object) - Removes the provided object from the aggregation. Returns the removed object.
removeAllSampleThings() - Removes all objects from the aggregation. Returns an array of all removed objects.
destroySampleThings() - Destroys all currently aggregated objects and clears the aggregation. Returns this for method chaining.
The Item of an aggregation named "sampleThing" that has a cardinality of 0...1 (and a multiplicity of 1:1) can be accessed by using one of the following methods:
getSampleThing() - Returns the current aggregated object or null.
setSampleThing(object) - Sets the provided object as the new aggregated object. Returns this for method chaining.
destroySampleThing() - Destroys the current aggregated object and clears the aggregation. Returns this for method chaining.
The following aggregations are available:
Aggregation Name | Aggregated Object Type | Cardinality |
|---|