features
Menu
Menu

Data

ZingGrid is very flexible when it comes to inputting data into the grid.

On This Page

Data Types

ZingGrid accepts arrays of arrays, arrays of objects, objects of objects, and nested objects.
CloseCopy Copied
[
  [
    "Aquarius",
    "January 20 - February 18",
    "Air"
  ] ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
[
  {
    "Aquarius",
    "January 20 - February 18",
    "Air"
   } ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
{
  "entry1": {
    "sign": "Aquarius",
    "date": "January 20 - February 18",
    "element": "Air"
  } ...
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
[

    "sign": "Aquarius",
    "info": {
      "date": "January 20 - February 18",
      "element": "Air"
      }
  } ...
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Data Attribute

Attach the data attribute to the <zing-grid> tag to insert data.
CloseCopy Copied
<zing-grid data='[...]'></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

<zg-data> Tag

Or add the data attribute to the <zg-data> tag as an alternative way to insert data.
CloseCopy Copied
<zing-grid>
  <zg-data data='[...]'></zg-data>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Remote data

To insert remote data, attach the src attribute to either the <zing-grid> or <zg-data> tag.
CloseCopy Copied
<zing-grid src="https://jsdocs-9d00d.firebaseio.com/browsers"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading