ConditionalTableRowStyle
The object for applying styles to table rows that meet certain conditions.
Declaration
object ConditionalTableRowStyleProperties
| Name | Type | Description |
|---|---|---|
backgroundColor | Color | The background color for the row. If you omit this property, the background is transparent. The cell’s background color is highest priority, followed by column, and finally row. Apple News applies all three colors, meaning that non-opaque values can cause combined colors. For example, using a red row together with a blue column, both with 50% opacity, creates a purple cell. |
divider | TableStrokeStyle | The stroke style for the divider line below the row. |
height | (SupportedUnits | number) | The height of the row, as a number in points, or using one of the available units of measure for components. See Specifying Measurements for Components. By default, the height of each row is determined by the height of the content in that row. |
selectors Required | [TableRowSelector] | An array of one or more selectors, each of which specifies one or more conditions. Apple News applies this conditional table row style to rows that meet all of the conditions of at least one of these selectors. |
Discussion
Table rows can have conditional styles — styles applied only to rows that meet certain conditions. You can use any table row style as a conditional style.
For example, you might define a conditional table row style that changes the background color for all even-numbered rows.
You can use this object in TableRowStyle.
Example
{
"components": [
{
"role": "datatable",
"style": "exampleTableStyle",
"showDescriptorLabels": true,
"sortBy": [
{
"descriptor": "id-name",
"direction": "descending"
}
],
"data": {
"descriptors": [
{
"identifier": "id-name",
"key": "name",
"label": {
"type": "formatted_text",
"text": "Name",
"textStyle": {
"textColor": "black"
}
},
"dataType": "string"
},
{
"identifier": "id-occupation",
"key": "occupation",
"label": "Occupation",
"dataType": "string"
}
],
"records": [
{
"name": "Amelia Earhart",
"occupation": "Pilot"
},
{
"name": "Grace Hopper",
"occupation": "Computer Scientist"
}
]
}
}
],
"componentStyles": {
"exampleTableStyle": {
"tableStyle": {
"rows": {
"backgroundColor": "#fff",
"divider": {
"width": 1,
"color": "#ddd"
},
"conditional": [
{
"selectors": [
{
"even": true
}
],
"backgroundColor": "#eeeeee"
}
]
},
"headerRows": {
"backgroundColor": "#ccc",
"divider": {
"width": 2,
"color": "#999"
}
},
"cells": {
"padding": 6,
"verticalAlignment": "top"
}
}
}
}
}