Docs

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]