Get Started with Data Basics in ZingGrid

In my last post, I walked you through building your first data grid with ZingGrid, a JavaScript library for data grids and data tables. Now, I'm going to summarize the essentials when it comes to adding data to your grid after page-load. Check out the video tutorial to see how it’s done, or follow along with me in this written tutorial.

The two topics you'll learn about in this post are:

1. Data types that ZingGrid accepts
2. Data assignment in ZingGrid

Data types that ZingGrid accepts

ZingGrid accepts 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 [[]]

Note that when you nest objects in your data, ZingGrid will automatically create nested column headers for you by default. Here's an example of what I mean:

Array of Objects

View a live example using this data structure.

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

Array of Nested Objects

View a live example using this data structure.

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

Object of Objects

View a live example using this data structure.

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

Object of Nested Objects

View a live example using this data structure.

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

Array of Arrays

View a live example using this data structure.

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

Data Assignment in ZingGrid

ZingGrid provides the data attribute as the most primitive method of assigning 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. There are three supported ways to set ZingGrid's data attribute:

1. HTML inline data
2. ZingGrid API
3. HTML attribute manipulation

HTML Inline Data (Stringified)

Assigning inline data in markup is the most basic way of assigning data in ZingGrid. This is the method we've used in all of our examples so far in this series.

<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 in ZingGrid. This is because this assignment involves property assignment as opposed to attribute manipulation. This means data is being directly assigned to the internal ZingGrid component data property. Check out the API docs to see all of the data methods, or view the live example below.

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, and it can be achieved via direct attribute manipulation. This will assign a string to the HTML attribute so the data string will appear in the markup, but this isn't a good idea for large datasets. View the live example belown.

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

Ok, those are the basics about data in ZingGrid. Please let me know if you have any questions, and keep an eye out for the next tutorial in this series if you'd like to learn about connecting remote JSON files and endpoints to ZingGrid. 🔌👀