The component for adding a JSON data table.
Technology
- Apple News Format 1.7+
Properties
dataAn 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.
rolestring
Always datatable for this component.
anchorAn 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.
datastring
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.
hiddenboolean
A Boolean value that determines whether the component is hidden.
identifierstring
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.
showboolean
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.
sortAn 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}}]}