docs
Menu
Menu

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.

Data Types

We accept five types of data structures:

Array of Objects [{}]
Array of Nested Objects[{key: {}}]
Object of Objects {key: {}}
Object of Nested Objects{key: {key: {}}}
Array of Arrays [[]]

Nested objects will produce nested headers by default.

CloseCopy Copied
[
  ["Philip J. Fry","Earth"],
  ["Turanga Leela","Earth"] ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
[
  {
    "name": "Philip J. Fry",
    "origin": "Earth"
  } ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
{
  "1": {
    "name": "Philip J. Fry",
    "origin": "Earth"
  },
  "2": {
    "name": "Turanga Leela",
    "origin": "Earth"
  } ...
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
[
  {
    "employee": {
      "name": "Philip J. Fry",
      "origin": "Earth"
    }
  } ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

[data] Assignment

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

HTML inline data
ZingGrid API
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.

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

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.

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target grid and assign data directly
zgRef.setData(data);
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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.

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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 getting started with adding features. If you think you are ready to start styling your grid read our getting started with styling.

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading