---
title: "API Elements Usage | Docs"
description: "ZingGrid has a predefined set of tags (or elements). This is a definitive list of element attributes (props) and CSS variables associated with each element."
url: https://www.zinggrid.com/docs/v1/api/tags/usage
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/usage.md
mode: provenance
representation: markdown
origin_response_id: 5036de454098b6a104e6975785ca2dec
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.747Z
version_nonce: a732f19a0fc6fa3cdf4043e9a7fc734d
generated_at_utc: 2026-11-09T16:15:16.648Z
response_nonce: 4c6cb06de38db7982e1d0ab802490797
```

# API Element Usage

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.

## 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.

> **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.