Docs

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.

Top

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

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.

Top

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.

Top

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

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

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.

<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 to the data retrieved, use <zg-param name="readCustomFunction"> to the name of a function. This function should look something like this:

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);
  });
};
Top

Related Resources

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

[features: adapters]