---
title: "Basics | Data | Docs"
description: "ZingGrid applies data in many formats. As long as the data is in a JavaScript array or object, we can probably handle it out of the box."
url: https://www.zinggrid.com/docs/data/basics
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/basics.md
mode: provenance
representation: markdown
origin_response_id: 256d2c1765b7dfe4d5cf741e6b093ef2
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.663Z
version_nonce: 773bcc1fa92ddd731dc5c56ecbf8032b
generated_at_utc: 2026-10-31T01:12:34.276Z
response_nonce: f3593099f2f2b431abb5e3b6c29b6249
```

# Data Basics

ZingGrid applies data in many formats. As long as the data is in a JavaScript array or object, we can probably handle it out of the box. In this guide, we'll walk you through the accepted data types and ways of assigning data.

[Youtube demo video](https://www.youtube.com/embed/XSuNwIrpiHg)

> **Tip:** In the video above, we mention setTimeout, which we used to simulate a delay in network response time,
>   but you don't need to use it for ZingGrid compatibility.

## Data Types

### 1. Array of Arrays `[[]]`

```javascript
  [
    ["Philip J. Fry","Earth"],
    ["Turanga Leela","Earth"] ...
  ]
```

### 2. Array of Objects `[{}]`

```javascript
  [
    {
      "name": "Philip J. Fry",
      "origin": "Earth"
    } ...
  ]
```
### 3. Object of Objects `{key: {}}`

```javascript
  {
    "1": {
      "name": "Philip J. Fry",
      "origin": "Earth"
    },
    "2": {
      "name": "Turanga Leela",
      "origin": "Earth"
    } ...
  }
```

### 4. Array of Nested Objects `[{key: {}}]`

```javascript
  [
    {
      "employee": {
        "name": "Philip J. Fry",
        "origin": "Earth"
      }
    } ...
  ]
```

### 5. Object of Nested Objects `{key: {key: {}}}`

```javascript
  {
    "1": {
      "employee": {
        "name": "Philip J. Fry",
        "origin": "Earth"
      }
    },
    "2": {
      "employee": {
        "name": "Turanga Leela",
        "origin": "Earth"
      }
    }
  }
```

> **Tip:** Nested objects will produce nested headers by default.

## Data Assignment

ZingGrid provides the `data` attribute as the most primitive method to assign data to the grid. This
data **must** have a valid JSON structure. This is per HTML spec when passing objects and arrays to HTML attributes.

To set the grid's `data` attribute, there are three supported ways:

1. HTML inline data
2. ZingGrid API
3. HTML attribute manipulation

### HTML Stringified Data

As we have seen from every example up until now, assigning inline data in markup is the most basic form of assigning data.

```js
<zing-grid data='[{"name": "Philip J. Fry"}]'></zing-grid>
```

### ZingGrid API

To assign JavaScript object data, use the ZingGrid API method `setData()`. This is the **most efficient** way to assign data because this assignment is not attribute manipulation, but property assignment. This means data is being assigned to the internal ZingGrid component data property directly.

> **Note:** View the [API docs](https://www.zinggrid.com/docs/api-methods#zg-data) to see the full list of methods.

```js
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target grid and assign data directly
zgRef.setData(data);
```
#### Result

Here is our complete grid which uses `setData()` to assign data:

[Example code](https://app.zingsoft.com/demos/embed/YICXNK2G)

### Attribute Manipulation

Assigning data through JavaScript as an object is the most practical use of assigning data.
You can achieve that through direct attribute manipulation. This will assign a string to
the HTML **attribute** so the data string will be in the markup. This is **not** good
for large datasets.

```js
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));
```
#### Result

Here is our complete grid which assigns data through attribute manipulation:

[Example code](https://app.zingsoft.com/demos/embed/HKUFZ32W)

## Data Sources

Other than applying JavaScript array or object as data, ZingGrid also supports different data sources such as:

1. CSV
2. XML
3. HTML table

### CSV

The best way to assign CSV data to the grid is through the ZingGrid API or manipulating the attribute via JavaScript.

> **Note:** View the [API docs](https://www.zinggrid.com/api/tags/zg-param/) for list of ZGParam attributes to configure how to parse CSV data.

[Example code](https://app.zingsoft.com/demos/embed/8699Q1I8)

### XML

Assigning XML data is also best through the ZingGrid API or manipulating the attribute via JavaScript.

> **Note:** View the [API docs](https://www.zinggrid.com/api/tags/zg-param/) for list of ZGParam attributes to configure how to parse XML data.

[Example code](https://app.zingsoft.com/demos/embed/FCMINVXB)

### HTML Table

There are various different ways to use an HTML table as a data source.

1. Set `data` to the `id` of the HTML table
2. Wrap the `<zing-grid>` tag around `<table>`
3. Add `[is="zing-grid"]` attribute to the `<table>`

The example below uses the `[is="zing-grid"]` approach to assign the HTML table data to the grid.

[Example code](https://app.zingsoft.com/demos/embed/Y7RVONY4)

> **Note:** View the [HTML Table Data docs](https://www.zinggrid.com/data/html-table) for more info about using an HTML table as a data source.

## Moving Forward

You now understand the basics of ZingGrid data assignment. The next step is getting your [remote data sources integrated.](https://www.zinggrid.com/docs/remote-data) If you want to move past this and learn more about features in ZingGrid, read our [Adding Features guide](https://www.zinggrid.com/docs/adding-features). If you think you are ready to start styling your grid, read our [Styling Basics guide](https://www.zinggrid.com/docs/styling-basics).