Contents

TableRowStyle

The object for applying styles to rows in a table.

Declaration

object TableRowStyle

Properties

NameTypeDescription
backgroundColorColor

The background color for the table row.

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.

conditional[ConditionalTableRowStyle]

An array of styles you apply to rows that meet specified conditions. You can use this to create a table with alternating row background colors.

dividerTableStrokeStyle

The stroke style for the divider lines between rows.

height(SupportedUnits | number)

The height of the table row, as a number in points, or using the available units 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

Discussion

You can apply styles that affect the look of the table rows, including the row background color, the color of the divider lines between rows, and the height of a row. For example, you could add a blue background color and apply a medium-gray divider to each row in your table.

You can also set up conditional row styles — styles applied only to rows that meet certain criteria. For example, you could apply a background shading to all odd-numbered rows. See ConditionalTableRowStyle.

You can use this object in TableStyle.

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"
        }
      }
    }
  }
}

See Also

Table Styles