Contents

ConditionalTableColumnStyle

The object for applying styles to table columns that meet certain conditions.

Declaration

object ConditionalTableColumnStyle

Properties

NameTypeDescription
backgroundColorColor

The background color for the column.

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.

dividerTableStrokeStyle

The stroke style for the divider line to the right of the column.

minimumWidth(SupportedUnits | number)

The minimum width of the column as a number in points, or in one of the available units of measure for components. See Specifying Measurements for Components.

selectors Required[TableColumnSelector]

An array of one or more selectors, each of which specifies one or more conditions.

Apple News applies this conditional table column style to columns that meet all of the conditions of at least one of the selectors.

widthinteger

The relative column width. This value influences the distribution of column width but doesn’t dictate any exact values. To set an exact minimum width, use minimumWidth instead.

It might be useful to think of the value of width as a percentage of the component’s width. For example, if you want one column’s width to be about half that of the whole component, and another to be about a quarter of the component width, use values of 50 and 25.

Discussion

Table columns can have conditional styles — styles applied to columns that meet certain conditions. You can use any table column style as a conditional style.

For example, you might define a conditional table column style that changes the background color for all odd-numbered columns.

You can use this object in TableColumnStyle.

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": {
        "columns": {
          "backgroundColor": "#eeeeee",
          "conditional": [
            {
              "selectors": [
                {
                  "columnIndex": 0
                }
              ],
              "backgroundColor": "#dddddd"
            }
          ]
        },
        "headerCells": {
          "padding": 5,
          "textStyle": {
            "fontWeight": "bold"
          }
        },
        "cells": {
          "padding": 2
        }
      }
    }
  }
}

See Also

Table Styles