Contents

TableRowSelector

The object for defining conditions that apply a conditional style to a row.

Declaration

object TableRowSelector

Properties

NameTypeDescription
descriptorstring

A string that specifies the identifier of a specific data descriptor. All rows for this data descriptor are selected. See DataDescriptor.

When dataOrientation is horizontal, which is not the default each row displays data for one data descriptor. See DataTable.

evenboolean

A Boolean value when true; selects the even rows.

oddboolean

A Boolean value when true; selects the odd rows.

rowIndexinteger

A number that specifies a row index. The topmost row of data has an index of 0. The specified column is selected.

Discussion

Use the TableRowSelector object to set the criteria for applying conditional styles to rows. For example, you could set criteria to select all odd rows, all even rows, or a single row.

You can use this object in ConditionalTableRowStyle.

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