experiment_id: web-retrieval-v1
fixture_id: /docs/api/user-content-model
mode: provenance
representation: html
origin_response_id: 3de5e48870361c45643b4d7e24e7acf6
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.576Z
version_nonce: d17bfa51f4bd34a8dcb6703393bcba0a
generated_at_utc: 2026-11-08T23:26:19.212Z
response_nonce: dfe6e42a4f19b5af90a3e97f86ebd52a
Docs Version 1

User Content Model

Similar to native HTML elements, ZingGrid follows a strict content model. It defines which tags are allowed to be placed inside of each other. The following example shows the basic structure of the content model:

<zing-grid>

  <zg-data>
    <!-- may have a variety of defined parameters -->
    <zg-param></zg-param>
  </zg-data>

  <zg-header>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-header>

  <zg-colgroup>
    <!-- Define and format N number of columns of data -->
    <zg-column></zg-column>
  </zg-colgroup>

  <zg-card></zg-card>

  <zg-dialog></zg-dialog>

  <zg-pager></zg-pager>

  <zg-footer>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-footer>

</zing-grid>

Not all of these elements are required; you are free to construct your grids using the features you need. If required elements are omitted, ZingGrid will attempt to add them automatically to the grid on render. If elements are added incorrectly, it will attempt to correct it or add missing parent elements, where possible.

Although flexible, some elements are recommended to be added manually despite the fact they will be rendered if omitted. The best example is <zg-colgroup> with <zg-column>. You do not need to define <zg-column> elements, but if you do, you should wrap them inside <zg-colgroup> directly. This will speed up render time depending on the number of data rows the grid displays. You can see if each element is optional or not on the API Elements Usage page.

Top

[api: user content model]

On This Page