DEV Community

Cover image for Connecting ZingGrid to Supabase: Add a Backend in Minutes
Camdyn Rasque
Camdyn Rasque

Posted on

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Cross post from my 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

An empty Supabase dashboard with a button in the center that says Create new table

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

A new table creation form in Supabase, this one has a name field filled in with demoTable

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

A new table creation field a little further down specifying columns. This table specifies first and last name columns as text.

5. Add Some Sample Data

A gif showing a user inserting a row into the table with the name Julia Smith being filled into the fields.

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

A gif of a user navigating to the authentication tab in Supabase and disabling the row level security policy

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
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/lib/zinggrid.js"></script>
  <title>Supabase</title>
</head>
<body>
  <zing-grid
    page-size="5"
    sort
    pager
    title="Supabase"
    editor-controls
    editor-disabled-fields="id"
    src="https://***link***.supabase.co/rest/v1/***tableName***"
  >
    <zg-data adapter="supabase">
      <zg-param
        name="headers"
        value='
          {
            "Authorization": "Bearer ***apiKey***",
            "apikey": "***apiKey***"
          }'
        ></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

A simple ZingGrid showing one row, the Julia Smith entry that was previously entered in the Supabase dashboard

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);
Enter fullscreen mode Exit fullscreen mode

and then register that client with ZingGrid

ZingGrid.registerClient(supabaseClient);
Enter fullscreen mode Exit fullscreen mode

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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Supabase</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Supabase Client Library -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
  <script>
    const supabaseUrl = 'https://***link***.supabase.co/';
    const supabaseKey = '***apiKey***';
    const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    ZingGrid.registerClient(supabaseClient);
  </script>
  <zing-grid
    page-size="5"
    sort
    pager
    title="SupabaseJS"
    editor-controls
    editor-disabled-fields="id"
  >
    <zg-data adapter="supabaseJS">
      <zg-param name="dataTable" value="***tableName***"></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Working the same as before

A simple ZingGrid showing one row, the Julia Smith entry that was previously entered in the Supabase dashboard

Top comments (0)