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:
- The
[src]
attribute - Remote JSON data
- 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:
- Using the top-level
<zing-grid>
tag - 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 π
Top comments (2)
Is this a web component?
Hey Aivan, yep, ZingGrid is technically both a web component and a system of web components, if that makes sense. The
<zing-grid>
tag is a web component, and the ZingGrid library is a system of web components.