---
title: "ZingGrid User Content Model | 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/user-content-model
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/user-content-model.md
mode: provenance
representation: markdown
origin_response_id: 519b035b012ef492ad7076d2df481de5
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.785Z
version_nonce: c5bd2e3a79041e327f0728635c891eed
generated_at_utc: 2026-10-22T21:09:09.980Z
response_nonce: 93fbd46706c43cbc36d1a2c0dba363be
```

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

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

> **Warning:** 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](https://www.zinggrid.com/docs/api/tags/usage).