---
title: "Using JavaScript with ZingGrid | Docs"
description: "ZingGrid has a set of concepts and guidelines that will make developing grids faster and easier."
url: https://www.zinggrid.com/docs/guides/using-javascript
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/using-javascript.md
mode: provenance
representation: markdown
origin_response_id: e8b335f9930a010a11ec027ffe31c870
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.723Z
version_nonce: 695e0ec2b0ee6c9ce89ae6c0a4a57b46
generated_at_utc: 2026-11-08T23:36:14.788Z
response_nonce: 97f70139fa1a657d78441ecd08b5bb60
```

# Using JavaScript with ZingGrid

As custom elements, ZingGrid tags have access to the standard JavaScript DOM API.

## Element Manipulation
After the grid renders, you are able to query select any Light DOM elements and manipulate them. For example, you can update the caption either by changing the attribute value or the `<zg-caption>` text directly (see below).

```html
<zing-grid id="myZingGrid" caption="Original Caption"></zing-grid>

<script>
  let zgRef = document.querySelector('#myZingGrid');
  let zgCaption = zgRef.querySelector('zg-caption');
  zgCaption.textContent = 'New Caption';
</script>
```

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

If you inspect the demo after changing the `caption`, you'll notice that the caption attribute on ZingGrid was not updated! As we saw in the [Attribute Versus Element guide](https://www.zinggrid.com/docs/guides/attribute-vs-element), ZingGrid has unidirectional sync controlled by the attribute, not the corresponding element. So when updating grid elements, it is recommended to update the attribute (see below), which will sync the matching elements.

```html
<zing-grid id="myZingGrid" caption="Original Caption"></zing-grid>

<script>
  let zgRef = document.querySelector('#myZingGrid');
  zgRef.setAttribute('caption', 'New Caption');
</script>
```

## Native Events
ZingGrid exposes many lifecycle events for you to hook into to customize the grid's behavior. Simply add an event listener to control when to execute your custom code.

For example, the `grid:ready` event is emitted from the `<zing-grid>` element when it has finished rendering. Add a listener for it and then execute your code.

### `record:click` Grid

The `record:click` event is emitted when you click on a body `<zg-row>`. Test it out in the accompanying demo:

```html
  <zing-grid
    id="myGrid"
    data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
    caption="Click a row to animate the grid"
  >
  </zing-grid>

  <style>
    @keyframes BOUNCE {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }
    .animate { animation:BOUNCE .5s; }
  </style>

  <script>
    let zgRef = document.querySelector('#myGrid');
    zgRef.addEventListener('record:click', e => {
      zgRef.classList.add('animate');
    });
  </script>
```

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

## Custom Events

Bind normal event actions, like so:

```html
<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption onclick="handleClick">Click me</zg-caption>
</zing-grid>

<script>
  function handleClick() {
    alert('Caption clicked!');
  }
</script>
```

Or bind a modern event listener to separate concerns, like so:

```html
<zing-grid id="myZingGrid" data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption id="myCaption">Click me</zg-caption>
</zing-grid>

<script>
  document.querySelector('#myCaption').addEventListener('click', handleClick);

  function handleClick() {
    alert('Caption clicked!');
  }
</script>
```

## Using ZingGrid With Frameworks
ZingGrid can be used with modern frameworks like React, Vue, and Angular, just like native HTML or other Custom Elements. When using these, take note that they are abstracting and virtualizing the DOM, which can introduce considerations not normally encountered with static HTML implementations.

Please view the integration examples for your specific framework for further details and examples:

- [Vanilla Js](https://www.zinggrid.com/docs/integrations/vanilla-js)
- [React](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/react)
- [Vue](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/vue)
- [Angular](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/angular)
- [NestJS](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/nestjs)
- [jQuery](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/jquery)
- [Svelte](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/svelte)

> **Note:** If you do not see your framework listed above, please [let us know](https://www.zinggrid.com/contact).