The component for adding a JSON data table.
Technology
- Apple News Format 1.7+
Properties
data
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
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
*
conditional
*
An instance or array of component properties that can be applied conditionally, and the conditions that cause them to be applied.
data Orientation
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 Component
object that contains layout information, or a string reference to a Component
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.
show Descriptor Labels
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.
sort By
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 Component
object that defines the appearance of this component or a string reference to a Component
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 Data
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
}
}
]
}