---
title: "jQuery Integration | Docs"
description: "ZingGrid works out-of-the-box with jQuery in three simple steps. Check out how to use jQuery with ZingGrid and an example."
url: https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/jquery
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/jquery.md
mode: provenance
representation: markdown
origin_response_id: 02a01440cc463a75a5d50af31a271c69
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.729Z
version_nonce: 99817a56edb0b82766503f4d978b454f
generated_at_utc: 2026-11-07T21:34:19.233Z
response_nonce: 02ab018ba49d83ac07a88f8371e1bc0b
```

# jQuery Integration

ZingGrid works with your development stack, including jQuery! In this guide, we'll walk you through how to add ZingGrid to your jQuery project.

## Usage

1. Include the following dependencies in the header of your HTML file:

    ```html
    <script src="path/to/zinggrid.min.js" defer></script>
    ```

2. Create a `<zing-grid>` component, like so:

    ```html
    <zing-grid id="myGrid" caption="Hello Doggos"></zing-grid>
    ```

3. Use jQuery to set or change your data, like so:

    ```javascript
    $(document).ready(function() {
      const $gridRef = $('#myGrid');
      let datastore = [
        { "breed": "Dachshund", "name": "Sousage"},
        { "breed": "Corgi", "name": "Plop"},
        { "breed": "Pomeranian", "name": "Floof"}
      ];
      $gridRef.attr('data', JSON.stringify(datastore));
    });
    ```

### jQuery Integrated Grid

Here is our complete grid that is successfully integrated with jQuery:

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