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.

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>

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.

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.

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.

Related Resources

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