---
title: "Retrieving Firebase Data | Docs"
description: "To populate the grid using data stored in Firebase, set the src attribute to the Firebase URL that includes the path to the data."
url: https://www.zinggrid.com/docs/data/firebase
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/firebase.md
mode: provenance
representation: markdown
origin_response_id: 17e7e539119776058e53343350278e8c
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.665Z
version_nonce: 0c8325ed5c716fc51b44a740671dd0a6
generated_at_utc: 2026-10-21T23:40:55.121Z
response_nonce: e24356a49ba777dacab2c204071e4b59
```

# Retrieving Data from Firebase

In this guide, we'll walk you through how to retrieve data from Firebase and incorporate it in your grid.

> **Note:** In the next few examples, we will be using our movies data, which has the Firebase path: "https://zinggrid-examples.firebaseio.com/movies/"

## Connecting to the Database

If you want to populate your grid using data stored in Firebase, then you just need to set the `src` attribute to the Firebase URL that includes the path to the data. You can either set the `src` attribute for `<zing-grid>` **or** `<zg-data>`, like so:

```html
<zing-grid src="https://<databaseName>.firebaseio.com/<path>/"></zing-grid>
```

**or**

```html
<zing-grid>
  <zg-data src="https://<databaseName>.firebaseio.com/<path>/"></zg-data>
</zing-grid>
```

### Firebase Grid

Here is our complete grid with data retrieved from Firebase:

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

### CRUD Grid

By default, setting the source to a Firebase URL provides us with a simple CRUD grid. You can create new rows, read from the given source, update cells or rows, and delete rows from the grid. Any changes we make will automatically be reflected in the database.

In order to update cells/rows, you need to set the `editor` attribute for the grid. You can create/update/delete rows through the context menu which appears after setting the `context-menu` attribute for the grid  (see HTML and demo below). You can also do this by setting specific column types.

```html
<zing-grid
  src="https://zinggrid-examples.firebaseio.com/movies/"
  editor context-menu infinite>
</zing-grid>
```

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

## Authentication
If you need to authenticate users to access your grid, you can do so in one of two ways: with `queryString` on `<zg-param>` or through the Firebase SDK adapter.

### `queryString` Attribute

To authenticate users, you can set `queryString` on `<zg-param>` to be the `auth=<ID_TOKEN>` name/value pair according to [Firebase specifications](https://firebase.google.com/docs/database/rest/auth#firebase_id_tokens). **Note:** This assumes that you have authenticated the user and retrieved their token.

### Firebase SDK Adapter
The easier way to handle authentication is to use the Firebase SDK adapter if you are using a Firestore database.  This requires you to include the Firebase SDK JavaScript files (app, auth, and Firestore) and these Firebase SDK files must be included before the ZingGrid library.

Check out the example grid below which uses the Firebase SDK adapter to ensure that users can only access the grid's data if they are logged in:

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

## Using Firebase Queries

To make it easier to use Firebase queries, set the data's `adapter` attribute to **"firebase"**. This will then convert all of the appropriate parameters according to what Firebase expects.

```html
<zing-grid>
  <zg-data
    src="https://zinggrid-examples.firebaseio.com/movies/"
    adapter="firebase"></zg-data>
</zing-grid>
```

For example, `adapter="firebase"` will convert:

* `sortByKey`: The query parameter that specifies the sort field. For Firebase, it is converted to "orderBy". ([See the Firebase docs for orderBy here](https://firebase.google.com/docs/database/rest/retrieve-data#orderby).)
* `limitToKey`: The query parameter that specifies how many records to limit to. It is used in infinite scroll and `loadByPage`. For Firebase, it is converted to "limitTo". ([See the Firebase docs for limitTo here](https://firebase.google.com/docs/database/rest/retrieve-data#limit-queries).)

### Sorting

If you want to enable data sorting, then set the `sortBy` key to the property that you want to sort on. You also use `queryString`, which allows you to include additional query strings in the request, such as `startAt=value` (where "value" refers to the values of the data that you want to start sorting at).

In the example below, we sort based on the "title" key of our data, starting at the values that begin with "D".

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

### recordPath

If you have multiple top-level objects stored in your database, you can select which object you want to use to populate the grid by setting `recordPath` equal to the path from the JSON object to the object with the grid data. This allows you to just change `recordPath` to easily switch between data.

In our courses object example below (given by the path: "https://zinggrid-examples.firebaseio.com/courses/"), we have two objects. If we wanted to display the first course's array of students as a grid, we would set `recordPath` equal to "0.students". If we wanted to do this for the second course, we would set it to "1.students".

```javascript
[
  {
    "courseId": "A21",
    "courseName": "Astronomy",
    "students": [
      {
        "grade": "A",
        "id": "241",
        "name": "Brian"
      },
      {
        "grade": "A-",
        "id": "386",
        "name": "Jenny"
      },
      ...
    ]
  },
  {
    "courseId": "M15",
    "courseName": "Greek Mythology",
    "students": [...]
  }
]
```

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

### Infinite Scroll

If you want to enable infinite scroll in your grid, follow the steps below:

1. Add `height` and `page-size` attributes to your `<zing-grid>` tag

    ```html
    <zing-grid height="400" page-size=10>
    ```

2. Add `adapter` and `src` attributes to `<zg-data>`

    ```html
    <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
    ```

3. Add `[name="loadByScroll"]` and `[value="true"]` attributes to `<zg-param>`

    ```html
    <zg-param name="loadByScroll" value="true"></zg-param>
    ```

  ```html
  <zing-grid height="400" page-size=10>
    <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
      <zg-param name="loadByScroll" value="true"></zg-param>
    </zg-data>
  </zing-grid>
  ```

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

## Another Version: `<zg-param>`

In the examples above, most of our configurations are set in the `options` object. Another way that you can write this is with the `<zg-param>` tag. `<zg-param>` is a child of `<zg-data>`, and it has two attributes: `name` and `value`. Using `<zg-param>` provides greater readability and allows us to focus on a more component-based approach.

For example,

```html
<zg-data options='{"queryString": "limitToFirst=7&startAt=\"F\""}'></zg-data>
```
can be rewritten as:

```html
<zg-data>
  <zg-param name="queryString" value='limitToFirst=7&startAt="F"}'></zg-param>
</zg-data>
```

### Attributes on `<zg-param>` Grid

In this example, we use `<zg-param>` to set the adapter, sort the data, and then display the last 8 entries:

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