---
title: "Data Types | Docs"
description: "ZingGrid applies data in many formats: Array of Arrays, Array of Objects, Object of Objects, Array of Nested Objects, and Object of Nested Objects."
url: https://www.zinggrid.com/docs/guides/data-types
---
```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/data-types.md
mode: provenance
representation: markdown
origin_response_id: edf748d9c17ba3173049e60c8f118ad3
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.718Z
version_nonce: abc7f72c3dde4d71bf8175d9ff6dba0e
generated_at_utc: 2026-10-31T02:03:03.116Z
response_nonce: c6d64ac1a6f72ff203287b2d04233f67
```
# Data
ZingGrid applies data in many formats. As long as the data is in a JavaScript array or object, we can probably handle it.
We accept **five** types of data structures:
1. Array of Arrays `[[]]`
2. Array of Objects `[{}]`
3. Object of Objects `{key: {}}`
4. Array of Nested Objects `[{key: {}}]`
5. Object of Nested Objects{key: `{key: {}}}`
> **Note:** Nested objects will produce nested headers by default.
## Array of Arrays
```javascript
[
[ "Philip", 123 ],
[ "Bender", 456 ]
]
```
The column headers for the grid default to the index of the field in the data. Keep in mind that [arrays in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) have a zero-based index, so the first header will be **0**, the second will be **1**, and so on.
### Array of Arrays Grid
Here is our complete grid with an array of arrays data structure:
[Example code](https://app.zingsoft.com/demos/embed/TAQ11SPQ)
## Array of Objects
```javascript
[
{
"name": "Philip",
"number": 123
},
{
"name": "Bender",
"number": 456
}
]
```
The column headers for the grid default to the **attribute name** of the field in the data.
In this example, the headers will be the object properties **name** and **number** capitalized.
> **Note:** Camel case (`employeeName`) and underscore (`employee_name`) property names will output as **Employee Name**.
### Array of Objects Grid
Here is our complete grid with an array of objects data structure:
[Example code](https://app.zingsoft.com/demos/embed/XS3BVAYG)
## Object of Objects
```javascript
{
"Philip": {
"age": 34,
"location": "San Diego"
},
"Bender": {
"age": 54,
"location": "San Francisco"
}
}
```
The column headers for the grid default to the ** record value attribute name**. In this example, the headers will be the object properties **age** and **location** capitalized.
**Note:** If you need to render the record key `"Philip"` and `"Bender"`, you'll need to define your own grid columns, like so:
```html
```
> **Note:** You can see the complete list of options to customize grid columns on the [API Elements page](https://www.zinggrid.com/docs/api/tags/zg-column).
### Object of Objects Grid
Here is our complete grid with an object of objects data structure:
[Example code](https://app.zingsoft.com/demos/embed/RZMW9MJV)
### Object of Objects Grid with Defined Columns
Here is our complete grid with an object of objects data structure and defined grid columns:
[Example code](https://app.zingsoft.com/demos/embed/CX9BJBAB)
## Array of Nested Objects
```javascript
[
{
"name": "Philip",
"number": 123,
"colors": {
"primary": "red",
"secondary": "chartreuse"
}
},
{
"name": "Bender",
"number": 456,
"colors": {
"primary": "black",
"secondary": "yellow"
}
}
]
```
### Array of Nested Objects Grid
Here is our complete grid with an array of nested objects data structure:
[Example code](https://app.zingsoft.com/demos/embed/Y9TR42B0)
## Object of Nested Objects
```javascript
{
"Philip": {
"number": 123,
"colors": {
"primary": "red",
"secondary": "chartreuse"
}
},
"Bender": {
"number": 456,
"colors": {
"primary": "black",
"secondary": "yellow"
}
},
}
```
### Object of Nested Objects Grid
Here is our complete grid with an object of nested objects data structure:
[Example code](https://app.zingsoft.com/demos/embed/MGC6Y12I)
## Accessing Nested Objects
You can access nested index values by explicitly defining columns and using **dot** syntax in your `index` value, like so:
```html
```
### Nested Objects Grid with Defined Columns
Here is our complete grid with defined columns:
[Example code](https://app.zingsoft.com/demos/embed/R9G0I90E)
## `data` Attribute
ZingGrid provides the `data` attribute to assign data to the grid. This data **must** have a valid JSON structure. This is per HTML spec when passing objects to attributes.
> **Note:** For assigning remote data to the grid, you'll need to reference the `src` attribute. [Learn more about the src attribute here](https://www.zinggrid.com/docs/remote-data).
Assigning inline data in markup is the most basic form of assigning data.
```html
```
## Dynamic Data Assignment
We recommend using markup attributes and elements when building your grid. However, there can be times when you need to interact with the grid with JavaScript. To set the grid's data dynamically, there are two supported ways: attribute manipulation and via the ZingGrid API.
### Attribute Manipulation
Assigning data through JavaScript as an object is the most practical use of assigning data and you can achieve this through direct attribute manipulation (see below). This will assign a string to the HTML **attribute** so the data string will be in the markup. **Note:** this is **not** good for large datasets.
```javascript
const zgRef = document.querySelector('zing-grid');
const data = [{key: 'value'}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));
```
### ZingGrid API
The **most efficient** way of assigning dynamic data is by using the API method `setData()` (see below). This method is property assignment (instead of attribute manipulation), which means data is being assigned to the internal ZingGrid component data property directly.
> **Note:** View our API docs to [see all of the data methods](https://www.zinggrid.com/docs/api-methods#zg-data).
```javascript
const zgRef = document.querySelector('zing-grid');
const data = [{key: 'value'}];
// target grid and assign data directly
zgRef.setData(data);
```