experiment_id: web-retrieval-v1
fixture_id: /docs/data/supabase
mode: provenance
representation: html
origin_response_id: 19638e99893cec70bcde88eaf116add1
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.669Z
version_nonce: 0c3e6eb3782f9910cd3fdee6d8c03ab8
generated_at_utc: 2026-11-10T15:58:04.114Z
response_nonce: 73b22c34d1c61a133f293e9bff1e664b
Docs Version 1

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:

<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. 
<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>
Top

Attributes

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

<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>
Top

Connecting with SupabaseJS

For details on connecting ZingGrid to your Supabase using SupabaseJS, see this article.

Top

[data: supabase]