---
title: "Intro | Docs"
description: "ZingGrid has a set of concepts and guidelines that will make developing grids faster and easier."
url: https://www.zinggrid.com/docs/v1/api/intro
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/intro.md
mode: provenance
representation: markdown
origin_response_id: c96fb2f545cfb87cf0bd4961c10b4232
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.738Z
version_nonce: ed79edb2e6feb3f33dfc1e60bc3f8072
generated_at_utc: 2026-10-22T21:06:02.093Z
response_nonce: b9ff211c5e3724a333191689f5abf61b
```

# The ZingGrid API

ZingGrid defines a set of [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) (tags) that you can use to construct a data table or interactive grid. As a set of custom elements, ZingGrid tags natively use standard CSS properties and attributes, react to JavaScript events, and act as you would expect normal HTML tags to behave.

## Overview
ZingGrid supports a rich and nearly unobtrusive API that leverages what web developers already know - the native DOM API! Treat ZingGrid elements just as you would any standard HTML element, including:

* Select elements using standard selectors like `document.querySelector()` or jQuery's `$`
* Apply CSS for styling, showing/hiding content, or even adding transitions
* Add event listeners using native `addEventListener()` calls

Since we are a native web component, you can even bind ZingGrid with popular frameworks quite easily. Click each framework below for integration directions:

- [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)

When binding data, use your framework or make calls to endpoints directly with ZingGrid.

We support **Standard REST** and **Firebase** directly with almost zero configuration. If you do things in a non-standard way, don't worry. ZingGrid is customizable and lets you do all the overwrites you need. Check out the examples below, and then explore our docs!

### Automatic REST API Binding

ZingGrid automatically does REST bindings for you so that actions on your grid (insert, edit, and delete) are connected to your dataset.

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

### Methods and Events API

ZingGrid comes with its own events and methods to provide flexibility in handling interactions with your grid. In our demo, we use the `cell:click` event and the `setCaption()` method to update the counter shown on the caption.

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

### Built-in Endpoint Adapter

ZingGrid makes it easy to connect Firebase to your grid. It sets up properties for you, from pagination to direct cell-data editing. There are many more adapters coming soon!

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

### Custom Endpoints

ZingGrid also makes it easy to connect your grid to custom endpoints, like GitHub.

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

### Tag Usage

ZingGrid tags are an extension of native HTML and are used like any other tag:

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

Since they are HTML tags, they support common attributes like `id`, `class`, `title`, etc. For built-in grid functionality, you simply add attributes to enable functionality.

> **Note:** Check out the [full list of ZingGrid tags](https://www.zinggrid.com/docs/api/tags/zing-grid) and the [full list of HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).

### Attribute Usage

As extensions of native HTML elements, ZingGrid tags accept data attributes. Custom, predefined attributes are used to control the behavior of the grid, from quickly adding a styled caption-label to enabling search, sorting, and pagination:

```html
<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  caption="Hello ZingGrid"
  pager
  search
  sorter
></zing-grid>
```

When the grid is rendered, the feature attributes are evaluated and the matching DOM markup is constructed and added automatically.

> **Note:** Note: Some elements are auto-generated during the render process. They are listed on the [`<zing-grid>` page](https://www.zinggrid.com/docs/api/tags/zing-grid) but are not intended for manual use. If the element has no public attributes listed, this is a good indicator that it is added automatically for you.