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.

Prefer video tutorials? Check out our quick video guide below:

Data Types

We accept five types of data structures:

1. Array of Arrays [[]]

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

2. Array of Objects [{}]

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

3. Object of Objects {key: {}}

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

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

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

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

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

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.

<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.

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:

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.

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:

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.

XML

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

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.

Moving Forward

You now understand the basics of ZingGrid data assignment. The next step is getting your remote data sources integrated. If you want to move past this and learn more about features in ZingGrid, read our Adding Features guide. If you think you are ready to start styling your grid, read our Styling Basics guide.