Object

DataTable

The component for adding a JSON data table.

Properties

(Required)

An object that provides data for the table. This property also provides information about the data, such as data types and header labels, in the form of the data descriptor.

role
string
(Required)

Always datatable for this component.

anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

behavior
*

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

conditional
*

An instance or array of component properties that can be applied conditionally, and the conditions that cause them to be applied.

dataOrientation
string

A string value that determines the table orientation.

Valid values:

  • vertical. The headers are a row at the top of the table, and each data record is a column.

  • horizontal. The headers are a column at the left of the table, and each data record is a row.

hidden
boolean

A Boolean value that determines whether the component is hidden.

identifier
string

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout
*

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position will be based on various factors, such as the device type, the length of the content, and the role of this component.

showDescriptorLabels
boolean

A Boolean value that determines whether the headers are shown. If true, the headers are visible, with the labels defined in the RecordStore. If false, the headers are not visible.

An array that determines how table data is sorted. Rules are applied in the order in which they are provided in the array.

If this property is not defined, data records are displayed in the order in which they are provided in the data RecordStore.

style
*

An inline ComponentStyle object that defines the appearance of this component or a string reference to a ComponentStyle object that is defined at the top level of the document.

If this property is omitted, the table is styled according to a component style called default-datatable. If default-datatable doesn’t exist or doesn’t define table styling, the table is styled according to a component style called default. If no table styling is defined in any of these places, Apple News uses its built-in default table styling.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

Add a DataTable component that uses table data provided in a JSON format. Information about the table, including the data itself, is provided by the data property, whose value is a RecordStore object that contains both the table data and information about the data, such as data types and header labels.

You can apply styles to table rows, columns, and cells using a ComponentStyle object that has a TableStyle defined.

Example

{ "components": [ { "role": "datatable", "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" } ] }, "style": { "tableStyle": { "rows": { "backgroundColor": "#fff", "divider": { "width": 1, "color": "#ddd" } }, "headerRows": { "backgroundColor": "#ccc", "divider": { "width": 2, "color": "#999" } }, "cells": { "padding": 6, "verticalAlignment": "top" } } }, "layout": { "columnStart": 0, "columnSpan": 7, "margin": 20 } } ]}

Relationships

Inherits From

See Also

Tables with JSON Data

Adding a JSON Table

Add a table to your article that displays JSON data in rows and columns.

object RecordStore

The object that contains JSON data for a data table.

object DataDescriptor

The object for providing the data type, data formatting, and label for a field in a table.

object DataTableSorting

A data category by which to sort the table in descending or ascending order.

object DataFormat

Properties shared by all data format obejct types.

object FloatDataFormat

The object that allows you to specify the number of digits after the decimal point for numeric values in data table cells.

object ImageDataFormat

The object that allows you to specify the minimum and maximum dimensions for images in data table cells.