Creating a data grid with a remote endpoint using ZingGrid

In my last post, I covered data basics in the ZingGrid JavaScript library for data grids and data tables. Today, I'll show you how to connect remote data sources to ZingGrid. Check out the video tutorial to see how it’s done, or follow along with me in this written tutorial.

The three main things you'll learn about in this post are:

1. The [src] attribute
2. Remote JSON data
3. Dynamic endpoints

You can use your own remote dataset to follow along, but we've also provided the following remote endpoint for you to use, too: https://cdn.zinggrid.com/datasets/remote-data.json

The [src] Attribute

ZingGrid provides the src attribute to get data from a remote source and display it. You can use either a relative path or a remote URL. When you use the src attribute, an AJAX request is made internally to fetch your data.

The src attribute can be implemented in two different ways:

1. Using the top-level <zing-grid> tag
2. Using the <zg-data> tag

Using the top-level <zing-grid> tag

The simplest way to use the src attribute is to add it to the top-level <zing-grid> tag like this:

<zing-grid
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
</zing-grid>

Using the <zg-data> tag

The more robust way to use the src attribute involves adding it to the <zg-data> tag. This method allows you to nest <zg-param> tags within <zg-data> so you can adjust the actions of your src endpoint. This is what the syntax for <zg-data> looks like:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data.json"></zg-data>
</zing-grid>

Here's a live example of a data grid using <zg-data>:

Learn more about the markup elements <zg-data> and <zg-param> in our docs.

Remote JSON

The src attribute works for most simple and straightforward data structures. However, datasets aren't always that simple, and you might not always be connecting to an endpoint you control. Consider the following data structure:

{
  "company": {
    "name": "Planet Express",
    "employees": [
      {
        "name": "Philip J. Fry",
        "actor": "Billy West",
        "job": "Delivery Boy",
        "origin": "Earth",
        "gender": "male",
        "species": "Human"
      } ...
    ]
  }
}

The default src fetch will only try to access the top-level company property. What if instead you wanted to list data starting from the company.employees level? In that case you would want to add the recordPath attribute to <zg-param> like this:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data-recordpath.json">
    <zg-param name="recordPath" value="company.employees"></zg-param>
  </zg-data>
</zing-grid>

Here's a live example of recordPath in action:

To learn more about using <zg-data> and <zg-param>, check out the list of available attributes in ZingGrid.

Dynamic Endpoint

So far I've shown you how to connect static endpoints to ZingGrid, but what if you want to connect to a dynamic endpoint with data that changes? All you need to do is poll that endpoint with an interval and update your grid via the setData() API method.

const zgRef = document.querySelector('zing-grid');
fetch('https://cdn.zinggrid.com/datasets/remote-data-recordpath.json')
  .then(res => res.json())
  .then(data => zgRef.setData(data))
  .catch(err => console.error('--- Error In Fetch Occurred ---', err));

This is what a demo with a dynamic endpoint looks like:

And there you have it – that's the gist of connecting to remote data sources in ZingGrid. I hope you found this helpful – any feedback is appreciated! Look out for the next tutorial in this series if you're interested in learning how to customize columns in ZingGrid 🖖