ConditionalTableCellStyle
The object for applying a style to table cells that meet certain conditions.
Declaration
object ConditionalTableCellStyleProperties
| Name | Type | Description |
|---|---|---|
backgroundColor | Color | The background color for the cell. If you omit this property, the background is transparent. The cell background color is highest priority, followed by the column, and finally the 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. |
border | TableBorder | The border for the cell. Because the border is inside the cell, it affects the size of the content within the cell. The bigger the border, the less available space for content. |
height | (SupportedUnits | number) | The height of the cell and its row, as a number in points, or using one of the available units of measure for components. By default, the height of each row is determined by the height of the content in that row. See Specifying Measurements for Components. |
horizontalAlignment | string | The horizontal alignment of content inside cells. |
minimumWidth | (SupportedUnits | number) | The minimum width of the cell and its column, as a number in points or using one of the available units of measure for components. |
padding | (SupportedUnits | Padding | number) | The space around the content in a table cell in points, supported units, or a Padding object that specifies padding for each side separately. |
selectors Required | [TableCellSelector] | An array of one or more selectors, each of which specifies one or more conditions. Apple News applies this conditional table cell style to cells that meet all of the conditions of at least one of the selectors. |
textStyle | (ComponentTextStyle | string) | The name string of one of your styles in the Article ArticleDocument.componentTextStyles object. |
verticalAlignment | string | Defines the vertical alignment of content inside cells. |
width | integer | The column width, as a percentage only. This property only indicates proportionate width; you can’t use it to control exact width. See |
Discussion
Cells in Data Table components and HTML Table components can have conditional styles — styles applied only to cells that meet certain conditions. You can use any table cell style as a conditional style.
For example, you might define a conditional table cell style that changes the background color for a cell at a specific location.
Example
{
"components": [
{
"role": "datatable",
"style": "bookTableStyle",
"showDescriptorLabels": true,
"sortBy": [
{
"descriptor": "id-publication-date",
"direction": "ascending"
}
],
"data": {
"descriptors": [
{
"identifier": "id-publication-date",
"key": "publicationDate",
"label": "Date",
"dataType": "string"
},
{
"identifier": "id-title",
"key": "title",
"label": "Title",
"dataType": "string"
},
{
"identifier": "id-publisher",
"key": "publisher",
"label": "Publisher",
"dataType": "string"
}
],
"records": [
{
"title": "Mardi",
"publicationDate": "1849",
"publisher": "Harper & Brothers"
},
{
"title": "Typee",
"publicationDate": "1846",
"publisher": "Wiley and Putnam"
},
{
"title": "White-Jacket",
"publicationDate": "1850",
"publisher": "Harper & Brothers"
},
{
"title": "Omoo",
"publicationDate": "1847",
"publisher": "Harper & Brothers"
},
{
"title": "Redburn",
"publicationDate": "1849",
"publisher": "Harper & Brothers"
},
{
"title": "Moby-Dick",
"publicationDate": "1851",
"publisher": "Harper & Brothers"
}
]
}
}
],
"componentStyles": {
"bookTableStyle": {
"tableStyle": {
"headerCells": {
"padding": 5,
"textStyle": {
"fontWeight": "bold",
"fontStyle": "normal"
}
},
"cells": {
"padding": 2,
"conditional": [
{
"selectors": [
{
"columnIndex": 1
}
],
"textStyle": {
"fontStyle": "italic"
}
}
]
}
}
}
}
}