TableStyle

The object for defining a style for rows, columns, cells, and headers in a table.

Declaration

object TableStyle

Properties

Name	Type	Description
`cells`	`TableCellStyle`	Defines the styling for individual cells in a table.
`columns`	`TableColumnStyle`	Defines the styling for table columns.
`headerCells`	`TableCellStyle`	Defines the styling for individual cells in table headers.
`headerColumns`	`TableColumnStyle`	Defines the styling for the table header columns, which are present if `dataOrientation` is `vertical`, which is the default.
`headerRows`	`TableRowStyle`	Defines the styling for table header rows, which are present if `dataOrientation` is `horizontal`, which is not the default.
`rows`	`TableRowStyle`	Defines the styling for table rows.

Mentioned in

Discussion

You can style rows, columns, and cells including headers, and also apply conditions to customize your table. For example, you can display a different color for an even row by applying rows.conditional.

You can use this object in ComponentStyle.

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