Docs

Data

ZingGrid is very flexible in the ways you can input data into a grid. Add your data via Data Types, Data Attributes, the <zg-data> Tag, or Remote Data.

Data Types

ZingGrid accepts arrays of arrays, arrays of objects, objects of objects, and nested objects.

Top

Data Attribute

To insert data into your grid, simply add the data attribute to <zing-grid>, like so:

<zing-grid data='[...]'></zing-grid>

Data via Attribute Grid

Here is a complete grid with data, in the form of an array of arrays, added via attribute:

Top

Tag

Alternatively, you can insert data by adding the data attribute to the <zg-data> tag, like so:

<zing-grid>
  <zg-data data='[...]'></zg-data>
</zing-grid>

Data via Tag Grid

Here is a complete grid with data, in the form of an array of arrays, added via attribute on :

Top

Remote Data

To insert remote data, attach the src attribute to either the <zing-grid> or <zg-data> tag, like so:

<zing-grid src="https://jsdocs-9d00d.firebaseio.com/browsers"></zing-grid>
<zing-grid>
  <zg-data src="https://jsdocs-9d00d.firebaseio.com/browsers"></zg-data>
</zing-grid>

Learn more about connecting to remote data with our Getting Started with Remote Data guide.

Remote Data Grid

Here is a complete grid with data remotely retrieved from Firebase:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: data]