Object

TableStyle

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

Properties

Defines the styling for individual cells in a table.

Defines the styling for table columns.

headerCells

Defines the styling for individual cells in table headers.

headerColumns

Defines the styling for the table header columns, which are present if dataOrientation is set to vertical, which is the default.

headerRows

Defines the styling for table header rows, which are present if dataOrientation is set to horizontal, which is not the default

Defines the styling for table rows.

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.

This object can be used 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" } } } }}

See Also

Table Styles

Defining and Using Table Styles

Apply table styles, such as borders and backgrounds, to the rows, columns, and cells in your HTML and JSON tables.

object TableRowStyle

The object for applying styles to rows in a table.

object ConditionalTableRowStyle

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

object TableRowSelector

The object for defining conditions that will cause a conditional style to be applied to a row.

object TableColumnStyle

The object for applying styles to columns in a table.

object ConditionalTableColumnStyle

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

object TableColumnSelector

The object for defining conditions that will cause a conditional style to be applied to a column.

object TableCellStyle

The object for applying styles to cells in a table.

object ConditionalTableCellStyle

The object for applying a style to table cells that meet certain conditions.

object TableCellSelector

The object for defining conditions that will cause a conditional style to be applied to a cell.

object TableBorder

The object for setting borders for tables.

object TableStrokeStyle

The object for defining the color, width, and style of a stroke in a table.

object Padding

The object for defining space around the content in a table cell.

object FormattedText

The object for specifying formatted text content and styling for captions in table cells.