Docs

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.

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

We accept five types of data structures:

  1. Array of Objects [{}]
  2. Array of Nested Objects [{key: {}}]
  3. Object of Objects {key: {}}
  4. Object of Nested Objects {key: {key: {}}}
  5. Array of Arrays [[]]

Nested objects will produce nested headers by default.

Array of Arrays

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

Array of Objects

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

Array of Nested Objects

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

Object of Nested Objects

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

Object of Objects

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

[data] Assignment

ZingGrid provides the data as the most primitive method to assign data to the grid. This datamust 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.

&lt;zing-grid data='[{"name": "Philip J. Fry"}]'&gt;&lt;/zing-grid&gt;

ZingGrid API

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

View the API docs to see all of the data methods.

const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target grid and assign data directly
zgRef.setData(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));
https://app.zingsoft.com/demos/embed/HKUFZ32W
https://app.zingsoft.com/demos/embed/HKUFZ32W
Top

Moving Forward

You now understand the basics of ZingGrid data assignment.

Top