---
title: "Adapters | Feature"
description: "Use a built-in adapter to automatically populate your zg-params, useful for connecting to Firebase or GraphQL."
url: https://www.zinggrid.com/docs/features/adapters
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/adapters.md
mode: provenance
representation: markdown
origin_response_id: e5a0310b6c1890102f9d7a0289e8cd4f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.671Z
version_nonce: 09a43c9e0dfe160ea1884f9f9059ed97
generated_at_utc: 2026-11-08T23:36:16.000Z
response_nonce: 253188e29092bb451a8b545ac7b7f2cb
```

# Adapters

ZingGrid adapters are shorthand `<zg-param>` configurations for different data sources. Currently, ZingGrid has four built in adapters: `firebaseSDK`, `firebase`, `graphql`, and `django`. Each adapter has the `<zg-param>` configuration necessary for your grid to connect to your data source.

## Django

The Django adapter is as follows:

```
  django: {
    urlSuffix: '/',
  },
```

This setup includes / at end of the url because it is required for Django.

To use the adapter, add `<zg-param name="adapter" value="django"></zg-param>` to your `<zing-grid>` element.

## Firebase
The firebase adapter is as follows:

```
firebase: {
    limitToKey: 'limitToFirst',
    startAtKey: 'startAt',
    sortByKey: 'orderBy',
    searchKey: 'equalTo',
    startAtValue: true,
    addValueQuotes: true,
    newIndexPath: 'name',
  },
```

To use the adapter, add `<zg-param name="adapter" value="firebase"></zg-param>` to your `<zing-grid>` element.

The *Key ZGParams are set to the [Firebase params](https://firebase.google.com/docs/reference/rest/database#section-param-orderby). The *Value or * ZGParams are set to the values that you would want to set for the Firebase Params.
Example: to get someFirebaseURL?orderBy=title, you would do

```
<zing-grid>
  <zg-data>
    <zg-param name="sortByKey" value="orderBy"></zg-param>
    <zg-param name="sortBy" value="title"></zg-param>
  </zg-data>
</zing-grid>
```

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

## FirebaseSDK

The FirebaseSDK adapter is as follows:

```
  firebaseSDK: {
    createCustomFunction: 'firebaseCreate',
    readCustomFunction: 'firebaseRead',
    updateRowCustomFunction: 'firebaseUpdateRow',
    updateCellCustomFunction: 'firebaseUpdateCell',
    deleteCustomFunction: 'firebaseDelete',
  },
```

To use the adapter, add `<zg-data adapter="firebaseSDK">` to your `<zing-grid>` element.

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

## GraphQL

The GraphQL adapter is as follows:

```
  graphql: {
    restmode: 'manual',
    method: 'post',
  },
```

This setup uses only POST methods. Manual restmode makes it so ZingGrid doesn’t automatically construct REST URL.

To use the adapter, add `<zg-param name="adapter" value="graphql"></zg-param>` to your `<zing-grid>` element.

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

## Supabase

The Supabase adapter is as follows:

```
  supabase: {
    restmode: 'method',
    readOptions: {
      queryString: 'order=[[dataFormat.sIdKey]].asc',
    },
    deleteOptions: {
      queryString: '[[dataFormat.sIdKey]]=eq.[[record.id]]',
    },
    updateCellOptions: {
      queryString: '[[dataFormat.sIdKey]]=eq.[[record.id]]',
    },
    updateRowOptions: {
      queryString: '[[dataFormat.sIdKey]]=eq.[[record.id]]',
    },
    createOptions: {
      headers: {
        Prefer: 'return=representation',
      },
    },
  },
```

To use the adapter, add `<zg-param name="adapter" value="supabase"></zg-param>` to your `<zing-grid>` element.
Then set `[src]` to `PROJECT_URL/rest/v1/TABLE_NAME`.
The `<zg-param name="headers" value="{"Authorization": "Bearer eyJhb...", "apikey": "Bearer eyJhb...">` will be useful to set the Authorization header.
Both your "Authorization" and "apikey" values is your project API keys.

Note that the data retrieved will be ordered in ascending order by the primary key column.
In the case that your primary key column is not "id", use `<zg-param name="idKey">` to set that up.
The primary key column should have type "uuid" and have RSL policy setup for accessing table.

To enable editing, include `[editor]` or `[editor-controls]`.
Some fields should not be ediable. Use `[editor-disabled-fields]` to set to a comma separated list of columns
to disable editing on them.

To apply [PostgREST API](https://postgrest.org/en/v12/index.html) to the data retrieved, use `<zg-param name="queryString">`. For example, the data is set to be in descending order and only return 10 records:

```html
<zg-param name="queryString" value="order=order.desc&limit=10"></zg-param>
```

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

## SupabaseJS

The SupabaseJS adapter is as follows:

```
  supbaseJS: {
    createCustomFunction: 'supabaseCreate',
    readCustomFunction: 'supabaseRead',
    updateRowCustomFunction: 'supabaseUpdateRow',
    updateCellCustomFunction: 'supabaseUpdateCell',
    deleteCustomFunction: 'supabaseDelete',
  },
```

To use the adapter, add `<zg-param name="adapter" value="supabaseJS"></zg-param>` to your `<zing-grid>` element.
Then use `<zg-param name="dataTable" value="TABLE_NAME">` to specify which table data to retrieve.

Create your Supabase client, then register the client to ZingGrid.
```html
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
  ZingGrid.registerClient(supabaseClient);
</script>
```

Note that the data retrieved will be ordered in ascending order by the primary key column.
In the case that your primary key column is not "id", use `<zg-param name="idKey">` to set that up.
The primary key column should have type "uuid" and have RSL policy setup for accessing table.

To enable editing, include `[editor]` or `[editor-controls]`.
Some fields should not be ediable. Use `[editor-disabled-fields]` to set to a comma separated list of columns
to disable editing on them.
The "supabaseUrl" value is your project url and "supabaseKey" is your project API keys.

To apply [modifiers](https://supabase.com/docs/reference/javascript/v1/using-modifiers) to the data retrieved, use `<zg-param name="readCustomFunction">` to the name of a function. This function should look something like this:
```javascript
function modifiesData(opt) {
  return new Promise(async (resolve, reject) => {
    const { data, error } = await supabaseClient
      .from(TABLE_NAME)
      .select()
      // Chain your modifiers here

    // Return modified data
    opt.callback(data);
  });
};
```

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

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [`<zg-data>`](https://www.zinggrid.com/docs/api/tags/zg-data#adapter)
* [`<zg-param>`](https://www.zinggrid.com/docs/api/tags/zg-param#adapter)
* [Firebase Integration](https://www.zinggrid.com/docs/data/firebase)
* [registerAdapter](https://www.zinggrid.com/docs/api/methods/zinggrid-object#registeradapter)
* [registerClient](https://www.zinggrid.com/docs/api/methods/zinggrid-object#registerclient)