experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/usage
mode: provenance
representation: html
origin_response_id: 7121afe7b6076114fcae2058310b9b0d
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.524Z
version_nonce: 04d28c4810319addadf9323a09ca3161
generated_at_utc: 2026-10-22T20:37:36.624Z
response_nonce: a76015da3a03e84ae9ed882af1f3df56
Docs Version 1

API Element Usage

ZingGrid defines a set of 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:

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

Top

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:

<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: Some elements are auto-generated during the render process. They are listed on the <zing-grid> page 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.

Top

[api: Usage Guide]