---
title: DataTable
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/datatable
---

# DataTable

The component for adding a JSON data table.

## Declaration

```data
object DataTable
```

## 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: 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: 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: A Boolean value that determines whether the component is hidden. identifier: 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: 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: 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.

## Mentioned in

Adding a JSON Table Preparing Image, Video, Audio, Music, and ARKit Assets

## Discussion

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

- [Component](applenewsformat/component.md)

## See Also

### Tables with JSON Data

- [Adding a JSON Table](applenews/adding-a-json-table.md)
- [RecordStore](applenewsformat/recordstore.md)
- [DataDescriptor](applenewsformat/datadescriptor.md)
- [DataTableSorting](applenewsformat/datatablesorting.md)
- [DataFormat](applenewsformat/dataformat.md)
- [FloatDataFormat](applenewsformat/floatdataformat.md)
- [ImageDataFormat](applenewsformat/imagedataformat.md)