Stories by ZingGrid on Medium

Connecting ZingGrid to Supabase: Add a Backend in Minutes

ZingGrid — Fri, 13 Sep 2024 22:49:25 GMT

Cross post from our article on the Zing blog.

Supabase is an open source Firebase alternative. There are a variety of services they offer, but for the purposes of this article, we’ll be diving into how it can act as a simple backend for our grids.

Initial Setup

There are a few steps we need to run through on the Supabase side of things before we can start configuring our grids.

1. Account Creation

We first need to create the Supabase account that we will be connecting to. You can sign up for Supabase using this link. Once your account has been created and email confirmed, continue to the next step.

2. Create Your First Project

Go ahead and head over to the dashboard page and create a new project. Make sure to note down the project name and database password.

3. Note Down Project Info

It is at this point you should see your Project URL and your API Key. We will need to give both of these to ZingGrid in our code later so make sure to store them in a secure local file.

4. Create Your First Table

From the side bar click the Table Editor section. From here we can create our first table

First step is to give our table a name, here I’ll use demoTable

Then we can edit the columns, I’ll have two columns for this example. One for first names and one for last names.

5. Add Some Sample Data

6. Update Security Settings

We’ll temporarily disable Row Level Security so we can easily read and write from our table for the purpose of this demo. In production we’ll want to set up proper roles with authentication.

⚠️ NOTE: This settings change is just for the purpose of this demo, this is not meant for production

Supabase Adapter — REST API

ZingGrid supports both ways of interacting with Supabase — via the REST API and via the client script. We’ll first go over using the REST API.

Using the initial demo code below, make sure to replace the following:

***link*** - The Project URL that you noted down earlier
***tableName*** - The name of the Supabase table you just created
***apiKey*** - The Supabase API Key you noted down earlier



  
  
  
  
  Supabase


      page-size="5"
    sort
    pager
    title="Supabase"
    editor-controls
    editor-disabled-fields="id"
    src="https://***link***.supabase.co/rest/v1/***tableName***"
  >
    
              name="headers"
        value='
          {
            "Authorization": "Bearer ***apiKey***",
            "apikey": "***apiKey***"
          }'
        >

When viewing that page in the browser, you should start to see the initial data we populated come through!

SupabaseJS Adapter — Client Script

If your app happens to use the Supabase JavaScript Client Library (which you can read more about on their docs site), you are able to store your Supabase credentials outside of your markup making it much more flexible.

Amending the previous example, we first create a Superbase client object (more on that in their docs)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

and then register that client with ZingGrid

ZingGrid.registerClient(supabaseClient);

Finally we set the adapter attribute on zg-data to supabaseJS and we have the following



  
  
  
  Supabase
  
  
  
  


  
      page-size="5"
    sort
    pager
    title="SupabaseJS"
    editor-controls
    editor-disabled-fields="id"
  >

Working the same as before

How to Embed Audio in a Data Grid in Under 60 Seconds

ZingGrid — Mon, 28 Oct 2019 21:45:17 GMT

This is part four of our “Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to ZingGrid data grids and tables.

Watch the short video below to see how easy it is to embed audio in ZingGrid data grids, or scroll further to read a short summary covering the basics.

https://medium.com/media/c8ce7ac83149346a2fc89d08e34bdd34/href

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature:

Make sure the audio you want to embed is already hosted online, and that you have permission to link to it.
Update your JSON dataset to include the URLs to the audio you’d like to embed. Make sure to include the embed URL in your dataset, as opposed to the direct URL.
Make sure you’ve set up a basic grid by referencing the ZingGrid library in your development environment using either the CDN or self-hosted options

As a quick refresher, if you’re using ZingGrid in a basic HTML page, this is what your code should look like before starting this tutorial:

From here, it’s just a matter of adding your data to your grid, and adding columns so you can specify the column type for your embedded audio.

Embedding Audio in Under a Minute

Let’s say you have a basic dataset featuring a song from SoundCloud associated with each planet in our solar system. This dataset will yield two columns of data when rendered in ZingGrid, the last of which contains audio embeds.

As I mentioned at the beginning of this post, it’s important that you use the embed URLs for the audio, as opposed to the direct URLs. In the case of SoundCloud audio, this is what the difference between those two types of URLs looks like:

Embed URL: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/344477157&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true

Direct URL: https://soundcloud.com/user-831103706/sza-the-weekend

Your JSON dataset will probably look something like this once you’ve added your audio embed URLs to it:

[ 
  {
    "planet": "Mercury",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Venus",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Earth",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Mars",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Jupiter",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Saturn",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Uranus",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Neptune",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Pluto",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  }
]

This is what your code would look like if you were to add your data inline to your grid:



  
    
    
    
  
  
          data='[ 
      {
        "planet": "Mercury",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Venus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Earth",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Mars",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Jupiter",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Saturn",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Uranus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Neptune",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Pluto",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      }
      ]'>

At this point, your grid should look something like this when rendered — but don’t worry because it’s not a mistake:

Data grid rendering URL strings instead of audio embeds.

To render the last column in your dataset as an audio embed instead of a string containing the embed URL, you’ll need to manually specify the columns in your grid so you can change the last column’s column type.

To do this, add two zg-column tags inside – one for each unique key in your JSON data. In our case, our sample dataset has two unique JSON keys, so we'll add two tags inside the tag.

Within each set of tags, we'll add index="" and fill in each JSON key name in the order we'd like the columns to appear. In the zg-column tag for audio, we'll add the type="" attribute with a value of iframe to specify that the column should render iframe content instead of strings of text.

If you’re using the sample data from this tutorial, your column tags should look like this:

Remember, you don’t need to specify the column type for the planet column because ZingGrid's default column type is text.

If you’re following along, your code should look like this (focus on the code below the inline data):



  
    
    
    
  
  
          data='[ 
      {
        "planet": "Mercury",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Venus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Earth",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Mars",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Jupiter",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Saturn",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Uranus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Neptune",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Pluto",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      }
      ]'>

That’s all you need to do to render audio embeds in your ZingGrid data grid! The above code will yield the following result:

Data grid rendering audio embeds. View the live demo

And those are the basics of adding audio embeds in your ZingGrid data tables & grids. View the live demo in our Studio playground to see how it works, and to play around with the final result.

Built using web components, ZingGrid is a fully-featured, native JavaScript data grid solution for the web. With out-of-the-box CRUD capability and ease of use via custom DOM elements, ZingGrid introduces a new way to visualize data using JS grids.

How the ZingGrid Team Uses Notion for Shared Knowledge Management

ZingGrid — Tue, 15 Oct 2019 19:01:22 GMT

by Sarah at Zing

Until around a year ago, internal knowledge management was a stubborn thorn in my team’s side. Dedicated wiki solutions like Gitbook weren’t cutting it for us, over-generalized solutions like the Google Suite of products stumbled with internally linked docs and multimedia embeds, and internal knowledge base add-on’s (I’m looking at you Gitlab and Clubhouse) weren’t powerful or flexible enough to meet our needs.

To be fair, it’s a tall order to holistically manage internal knowledge documentation for a small team across a variety of domains like software development, web development, marketing, sales, design, product development, and project management. It’s an even taller order to expect any team to adopt not only a new product, but new processes as well without running into a few roadblocks. This is where Notion really saved the day for us.

Before we settled on one dedicated way to document our fickle body of accumulated knowledge, the ZingSoft team knowledge base consisted of a brittle hodgepodge of various services and products including Gitlab, Github, Clubhouse, Airtable, Google Sheets, Google Docs, and Gmail. This network was barely held together by Toby bookmarks (Toby’s wonderful, but that’s a post for another day).

This is what our knowledge base looked like before Notion.

Compared to the previous solutions we tried, Notion has been the Swiss Army Knife of knowledge management solutions. So much so that it has actually changed the way the ZingSoft team approaches internal documentation. “That should probably go in Notion,” is a suggestion you’ll hear often if you listen in on our team’s conversations and meetings lately. The best part is, that thing usually does end up in Notion by the end of the workday, which is a testament to how well-integrated it’s become in our team’s workflows.

This is what our knowledge base looks like using Notion.

Of course, there are caveats to any documentation solution. Even the greatest knowledge management tool can fall victim to a team that habitually under- or over-documents things. Beyond that, a knowledge base is no substitution for well-defined information architecture given that it’s a reflection of the way that information is organized in teammates’ minds.

Internal documentation is as much about the organization of ideas as it is about the way they’re preserved. The importance of that insight is further emphasized in “Everyday Information Architecture,” by Lisa Marie Martin — a quick and helpful read for anyone who finds themselves organizing information in a variety of contexts throughout the workweek.

By paying attention to the architecture of your internal documentation, it becomes easier over time to distinguish between what does and doesn’t belong there. This prevents your knowledge base from becoming bloated with too many details. For us it’s been important to learn the importance of delineating the right information while balancing the need for flexibility. Notion makes it easy to restructure our information as needed as our organization strategy changes.

A quick snippet showing you what some of our internal information architecture looks like in Notion.

So what are the specific selling points that have made the ZingSoft team a loyal Notion customer? Here are some of the things we’ve enjoyed about using it as a knowledge base:

It’s fully-featured for editing and viewing across desktop and mobile devices
Real-time collaboration is easy. You can see which users are currently viewing a page, as well as their page position and edits
Built-in version history for your pages lets you revert changes if needed
Powerful embeds! I’m able to embed read-only Figma & Airtable files with ease, along with many other embed types.
Content blocks give you just enough control over the presentation of your information
Somewhat customizable design — you can upload your own icons and header imagery for your pages

Is there more we could do to improve our internal knowledge management? Absolutely! As the GIF above shows, our team’s way of organizing information may make sense to us, but it’s still a bit of a puzzle for newcomers, as it doesn’t seem to have much of a rhyme or reason. Despite that, the information architecture we’ve chosen has allowed our productivity to increase dramatically, and has helped resurface internal knowledge that would have otherwise remained hidden.

For any team stuck in analysis paralysis when it comes to their internal documentation, the best advice I can suggest is to approach knowledge management iteratively, and to find a tool that complements your team’s way of working. Many times teams don’t clearly understand what they need out of a knowledge management tool, nor have they put enough thought into what the structure of that knowledge should look like. Notion has been forgiving for us in these situations, and I encourage you to give it a try if your team has similar needs!

ZingSoft is dedicated to building cutting-edge data visualization JavaScript products for developers across a variety of industries. Based in San Diego, our team is a creative and diverse group of web professionals who live and work across the globe.

We are proponents of strong software engineering processes and native web APIs, and we’d love to show you how our products can help your team thrive. Sign up for the ZingSoft Studio or contact us to learn more about what our products can do.

How Its Made: Sea Level Change Demo

ZingGrid — Sat, 24 Aug 2019 00:51:56 GMT

By Josh at ZingSoft

This post is the first installment in our ‘How Its Made’ blog series. Each of these posts and videos will offer a short walkthrough of how a particular grid is created.

The video below will walk you through the basics of creating this demo. Skip the video to read the walkthrough instead.

https://medium.com/media/2cf14b74b2733e7725f8de6932688169/href

Steps to create this grid:

Rendering the grid to the page
Overview of ZingGrid features
Adding renderer functions to customize data
Styling your grid

Before I begin

Before we dive into how to create this custom grid, I strongly encourage you to sign up for ZingGrid’s ‘Studio’ free web-app.

This free sandbox-like environment allows you to create grids and charts quickly to see how your grids might fit into your site or application. It also offers free pre-made templates to get you off the ground quickly.

Check out the Studio and start creating grids!

1. Rendering the Grid

If you are following along, you will have created the above grid and all its functionality by the end of this tutorial.

I have provided a basic HTML outline below if you decide to start from scratch.



   
      
      Global Average Absolute Sea Level Change

To initialize ZingGrid to the page, you should reference our library directly from our CDN by including the script tag (shown above) within the head section of your HTML.

You can also directly download the latest version of our library from our site, or install it locally with a package manager like NPM.

The next step is including the the the tag to the body of your page. This is where your grid will actually be rendered.

The tag is the most important tag within the library and is where you will add your data, create and customize columns, and include built in features to your grid.

     src=""
          >

In my case, I compiled our data in Firebase and referenced it using the src attribute as shown above. Notice the src attribute lives within the opening tag and not between the two tags. To read how to hook up alternative data sources to your grid, visit our docs.

If you hit run, you will see that a grid renders with the data from my external source, but contains very limited styling.

To begin basic customizations of the grid, you will want to start adding captions (headers) and columns to your grid.

This can be accomplished by using the , and tags in-between the opening and closing tags.

    src=""
          >
    
        Global Average Absolute Sea Level Change (1880 - 2014)

        From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.
          

          View Source

Again, To add content to the caption/header of your grid, you will use the tag. Within the tag, you can format your text in normal HTML syntax. Reference above for how we added content to the header of our grid. If you render this grid, you should see the grid below.

To style the rows or only display certain pieces of data within your dataset, you need to utilize the and tags.

      src=""
          >

      
        Global Average Absolute Sea Level Change (1880 - 2014)

        From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.
          

          View Source

		
        
          [[index.Year]]

You will want to add a for each piece of data you want to display. Referencing the above code snippet, you will notice we have included the index attribute as well as a header attribute. Each index attribute for each column needs to include the name of the property you are trying to display. Each header attribute should be set to the desired header name of your choosing.

If you render this grid, you will notice not much has changed. However, this has opened the door to customize the rows through CSS and Javascript.

2. Adding ZingGrid features

The ability to quickly add and remove features from your grid is what sets ZingGrid apart from other grid libraries.

Looking at the grid we have created thusfar, there isn’t much user interactivity available. However, we can quickly change that with the addition of a few attributes.

      layout="row"
      layout-controls="false"
      src=""
      sort
      pager
      page-size-options="25,50,100,200"
          >

...

Looking at the code above, you will notice we added a few extra attributes to the tag. Below is a list of these attributes and how they affect the grid.

layout = Tells ZingGrid whether to display the data in 'rows' or 'cards'
layout-controls = Tells ZingGrid whether the user has the option to view the data in row or card mode
src = Tells ZingGrid where to pull the data
sort = Gives the grid sorting functionality. Click the column header to change the sort order
pager = Turns on the pagination functionality for your grid
page-size-options = Allows you to choose different number of row or card values displayed on a single page

Try adding these attributes to your tag and see how they affect your grid.

There are many other attributes you can include based on use case. For a full list of these features, reference the ZingGrid docs.

3. Adding a renderer function

In the case of this dataset, we want to show a clear distinction between values that are greater than 0 and less than 0. To do so, we will create a simple Javascript function and add it to each of our columns.

The above function will look at all the values in our dataset and display them based on if they are greater than, less than or equal to 0.

      src=""
      >

      
        Global Average Absolute Sea Level Change (1880 - 2014)

        From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.
          

          View Source

		
        
          [[index.Year]]

Now that we have created this function, we need to make sure it is applied to each column that requires these parameters. In the above code, I have added the renderer attribute to each column that will utilize the function. I have passed in the name of the function as a value of the renderer attribute. Try adding the function and renderer attribute to your code.

Now if you render this, you should see a color change for values less than or greater than 0.

4. Styling your grid

The last important thing we will discuss in this post is how to further target and style your grid using CSS. If you have even minimal experience with CSS, styling your grid should be a fairly easy affair. While we won’t cover each class we created using CSS, you will notice that you can target any ZingGrid tag and give it standard CSS properties.

body {
  padding-top: 50px;
  font-family: 'Rubik', sans-serif;
  background: url('');
}

zing-grid {
  max-width: 750px; 
  margin: 0 auto;
  font-family: 'Rubik', sans-serif;
  border: 0px solid #03375e;
  background: #004a6b;
  color: #03375e;
  --theme-color-primary: #ffffff;
    border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  --zg-cell-background_sorted: #e3e6e8;
  --zg-head-cell-background_sorted: #045282;
  --zg-head-cell-color_sorted: #ffffff;
  box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7);
  -webkit-box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7);
  -moz-box-shadow: 0 20px 50px rgba(36, 107, 138	, 0.7);
}

zg-icon {
  max-width: 15px;
}

zg-caption {
  background: #004a6b;
  border-bottom: 1px solid #004a6b;
  padding: 30px 20px;
  border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  text-align: center;
}

zg-caption h1 {
  color: #76d9f4;
  font-size: 25px;
  margin: 0;
  font-weight: 300;
}

zg-caption p {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: #F8FAFC;
  line-height: 1.9;
  margin-bottom: -5px;
}

zg-caption a {
  color: #028ecc;
  text-decoration: none;
  padding: 2px;
  font-size: 12px;
  margin-top: -15px;
}

zg-caption a:hover {
  color: #ffffff;
  text-decoration: underline;
}

zg-head-cell {
  font-size: 11px;
  background: #028ecc;
  color: #F8FAFC;
  margin-bottom: -2px;
}

zg-body {
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
	background: #F8FAFC;
  color: #04769e;
  border: 0px;
}

zg-row, zg-cell {
  padding: 0 15px; 
  height: 38px;
}

zg-row {
  border-bottom: 1px solid #dcdfe0;
}

.null {
  color: #a1b2b5;
  font-style: italic;
}

zg-footer {
  font-size: 12px;
  padding: 0 15px 0 15px;
  display: flex;
  justify-content: space-between; 
  color: #ffffff;
  background: #004a6b;
}

zg-pager {
  color: #ffffff;
}

zg-watermark {
  border-top: 1px solid #004a6b;
  background: #004a6b;
    border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
}

Take a look at the above CSS and try copying it into your either a separate