---
title: "Supabase | Docs"
description: "Explore how to retrieve data from Supabase."
url: https://www.zinggrid.com/docs/data/supabase
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/supabase.md
mode: provenance
representation: markdown
origin_response_id: 34099dec2143876223e7aa61c67fb5ef
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.670Z
version_nonce: 74877160d695497f2a05e5d43515c325
generated_at_utc: 2026-11-10T16:08:03.169Z
response_nonce: 6ab49892b85fc790e0d5243a53d3df3c
```

# Retrieving Data from Supabase
In this guide, we'll walk you through how to retrieve data from Supbase and incorporate it in your grid.

## Connecting to Supabase

If you want to populate your grid using data stored in Supabase, first add the `src` to your data using the Supabase REST API endpoint, like so:

```html
<zing-grid>
  <zg-data>
    <zg-param name="src" value="https://lhwlegxfcypdjfbwcjod.supabase.co/rest/v1/got_deaths"></zg-param>
  </zg-data>
</zing-grid>
```

Then, add the following `<zg-param>` to complete configuring the grid to connect to your data:
| Attribute | Description |
|-----------|-------------|
| adapter | Shortcut to set options for third party dataset. In this case, set to "supabase".|
| queryString | Sets the query string to include api key (ex. apikey=YOUR_API_KEY). |
| idKey | Indicate the id column of your data. |

```html
<zing-grid>
  <zg-data>
    <zg-param name="adapter" value="supabase"></zg-param>
    <zg-param name="queryString" value="apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imxod2xlZ3hmY3lwZGpmYndjam9kIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ2NTAwMDEsImV4cCI6MjA1MDIyNjAwMX0.nrFUmXsWlylWRswjBB844W31LgHV-_KCf5_c9PpMdEk"></zg-param>
    <zg-param name="idKey" value="order"></zg-param>
    <zg-param name="src" value="https://lhwlegxfcypdjfbwcjod.supabase.co/rest/v1/got_deaths"></zg-param>
  </zg-data>
</zing-grid>
```

## Attributes
Refer to the following demo for an in depth look at using Supabase with ZingGrid.

```html
<zing-grid caption="Supabase" pager sort>
  <zg-data>
    <zg-param name="adapter" value="supabase"></zg-param>
    <zg-param name="queryString" value="apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imxod2xlZ3hmY3lwZGpmYndjam9kIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ2NTAwMDEsImV4cCI6MjA1MDIyNjAwMX0.nrFUmXsWlylWRswjBB844W31LgHV-_KCf5_c9PpMdEk"></zg-param>
    <zg-param name="idKey" value="order"></zg-param>
    <zg-param name="src" value="https://lhwlegxfcypdjfbwcjod.supabase.co/rest/v1/got_deaths"></zg-param>
  </zg-data>
</zing-grid>
```

[Example code](https://app.zingsoft.com/demos/embed/FF4HIA7Q)

## Connecting with SupabaseJS
For details on connecting ZingGrid to your Supabase using SupabaseJS, see [this article](https://blog.zingsoft.com/connecting-zinggrid-to-supabase-add-a-backend-in-minutes/).