DataTable

The component for adding a JSON data table.

Declaration

object DataTable

Properties

Name	Type	Description
`data` Required	`RecordStore`	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` Required	string	Always `datatable` for this component.
`anchor`	`Anchor`	An object that defines vertical alignment with another component.
`animation`	(`ComponentAnimation` \| string("none"))	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`	(`Behavior` \| string("none"))	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`	(`ConditionalComponent` \| [`ConditionalComponent`])	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`	(`ComponentLayout` \| string)	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.
`sortBy`	[`DataTableSorting`]	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`	(`ComponentStyle` \| string \| string("none"))	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.

Mentioned in

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

DataTable

Declaration

Properties

Mentioned in

Discussion

Example

Relationships

Inherits From

See Also

Tables with JSON Data