---
title: "ZingGrid Generated 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/api/generated-content-model
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/generated-content-model.md
mode: provenance
representation: markdown
origin_response_id: 6ef20292a3395d37ce9786ac8a3b0e4b
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.598Z
version_nonce: 8bb7205fecb3eb810b96e038af221adb
generated_at_utc: 2026-11-08T23:36:15.170Z
response_nonce: a869aac2bb2eedee9a50d882114a45aa
```

# Generated Content Model

The User Content Model below illustrates how easy it is to get a grid up-and-running by adding only a few elements and attributes. The Generated Content Model shows what is actually rendered into the DOM from those configuration settings.

> **Note:** The generated source is important to understand if you want to customize the styling of the grid beyond choosing a pre-built theme. [See the guide on styling the grid](https://www.zinggrid.com/docs/features/styling) for further information on customizing your grid's display.

```html
<zing-grid>

  <!-- Grid Header (generated) -->
  <zg-header>

    <!-- Caption (user-added or generated) -->
    <zg-caption>

      <!-- Remove Selected Rows (generated) -->
      <zg-button action="removerecord"></zg-button>

      <!--
        Context Menu Button (generated)
        (mimics the right-click context-menu, but from a fixed location)
        (toggles the <zg-menu> Context-Menu shown below)
      -->
      <zg-button action="fixedmenu"></zg-button>

      <!--
        Column Menu (generated)
        (toggle per-column visibility)
      -->
      <!-- Toggle Button -->
      <zg-button action="menu"></zg-button>
      <!-- Dropdown -->
      <zg-menu>
        <zg-menuitem>
          <zg-button action="checkbox"></zg-button>
        </zg-menuitem>
      </zg-menu>

      <!-- Grid Search (generated) -->
      <zg-search></zg-search>

    </zg-caption>

    <!-- Source (user-added or generated) -->
    <zg-source></zg-source>

    <!-- Controls Bar (generated) -->
    <zg-control-bar>
      <!-- Select All Rows -->
      <zg-checkbox></zg-checkbox>
      <!-- Insert New Record -->
      <zg-button action="createrecord"></zg-button>
      <!-- Enable Batch Edit Mode -->
      <zg-button action="batchedit"></zg-button>
      <!-- Save Batch Edit Changes -->
      <zg-button action="batcheditsave"></zg-button>
      <!-- Cancel Batch Edit Changes and Exit Mode -->
      <zg-button action="batcheditcancel"></zg-button>
      <!-- Change Layout Mode -->
      <zg-layout-control>
        <zg-button action="layoutcard"></zg-button>
        <zg-button action="layoutrow"></zg-button>
      </zg-layout-control>
    </zg-control-bar>

  </zg-header>

  <!-- Use Inline or External Data Source (user-added) -->
  <zg-data>
    <!-- Configure Data With Parameters -->
    <zg-param></zg-param>
  </zg-data>

  <!-- Columns Group (user-added or generated) -->
  <!-- (analogous to HTML table '<colgroup>') -->
  <!-- [id="(left|right)colgroup"] are generated -->
  <zg-colgroup>
    <!-- Format Column(s) (1 to N) -->
    <!-- (analogous to HTML table '<col>') -->
    <!-- Note: Not required, but if you need to customize one column, you need to specify them all -->
    <zg-column></zg-column>
  </zg-colgroup>

  <!-- Custom 'Card' Layout Template (user-added or generated) -->
  <!-- Note: Replaces the normal <zing-grid layout="card"> display -->
  <zg-card><!-- User Defined Code --></zg-card>

  <zg-table>
    <!-- Grid Data Table 'Head' (generated) -->
    <!-- (analogous to HTML table '<thead>') -->
    <zg-head>
      <zg-row>
        <!-- 'Head' Cells (1 to N) -->
        <!-- (analogous to HTML table '<th>') -->
        <zg-head-cell>
          <!-- Column Sorter (generated) -->
          <zg-icon name="down" init>
          <!-- Column header tooltip (generated) -->
          <zg-icon name="info" init>
          <!-- Column Resize Handles (generated) -->
          <zg-column-resize></zg-column-resize>
          <!-- Column Filter Menu (generated) -->
          <zg-button action="filter"></zg-button>
        </zg-head-cell>
      </zg-row>
      <!-- Filter Column(s) Controls -->
      <zg-row>
        <zg-filter></zg-filter>
      </zg-row>
      <!-- Optional Aggrigation Cell (sum, average, etc.) -->
      <zg-row>
        <zg-cell></zg-cell>
      </zg-row>
    </zg-head>

    <!-- Grid Data Table 'Body' (generated) -->
    <!-- (analogous to HTML table '<tbody>') -->
    <zg-body>
      <zg-row>
        <!-- 'Body' Cells (1 to N) -->
        <!-- (analogous to HTML table '<td>') -->
        <zg-cell></zg-cell>
        <!-- <zg-card> Instance (conditional) -->
        <!-- (if user-defined <zg-card> template added, its result rendered here -->
        <zg-card></zg-card>
      </zg-row>
    </zg-body>

    <!-- Grid Data Table 'Foot' (generated) -->
    <!-- (analogous to HTML table '<tfoot>') -->
    <zg-foot>
      <!-- Optional Aggrigation Cell (sum, average, etc.) -->
      <zg-row>
        <zg-cell></zg-cell>
      </zg-row>
    </zg-foot>

    <!-- Drag-Select Multiple Cells For Action (generated) -->
    <zg-selector-mask></zg-selector-mask>
    <!-- The Currently-Selected Cell (generated) -->
    <zg-focus></zg-focus>
  </zg-table>

  <!-- The Pagination Element (user-added or generated) -->
  <!-- (Contains 'per page' dropdown, next/previous buttons, and total records data) -->
  <!-- (Location of elements controlled by slot naming) -->
  <zg-pager>
    <zg-select action="pagesize">
      <!-- Page Size List (generated) -->
      <zg-option-list></zg-option-list>
    </zg-select>
    <zg-button action="reload"></zg-button>
    <zg-button action="firstpage"></zg-button>
    <zg-button action="prevpage"></zg-button>
    <zg-text>Page</zg-text>
    <zg-input action="currpage"></zg-input>
    <zg-text>of</zg-text>
    <zg-text value="pagecount"></zg-text>
    <zg-button action="nextpage"></zg-button>
    <zg-button action="lastpage"></zg-button>
    <zg-text>Rows</zg-text>
    <zg-text value="startrow"></zg-text>
    <zg-text>-</zg-text>
    <zg-text value="endrow"></zg-text>
    <zg-text>of</zg-text>
    <zg-text value="rowcount"></zg-text>
  </zg-pager>

  <!-- Grid Footer (generated) -->
  <zg-footer>
    <!-- Caption Alternate Position (generated-only) -->
    <zg-caption></zg-caption>
    <!-- Source Alternate Position (generated-only) -->
    <zg-source></zg-source>
  </zg-footer>

  <!-- Internal Dialogs (modal overlays - generated) -->
  <!-- User-Defined Dialogs (user-added - <zg-dialog type="custom">) -->
  <zg-dialog></zg-dialog>

  <!-- Inline-Edit Grid Row (generated) -->
  <zg-editor-row></zg-editor-row>

  <!-- Grid Action(s) Context Menu (generated) -->
  <zg-menu>
    <!-- Contains any combination of <zg-menugroup>, <zg-menuitem>, and <zg-separator> -->
    <zg-menu-group group="insert-record-group">
      <zg-menuitem></zg-menuitem>
      <zg-menuitem></zg-menuitem>
    </zg-menu-group>
    <zg-menuitem>
      <zg-button action="cancelrecord"></zg-button>
    </zg-menuitem>
    <zg-separator action="action"></zg-separator>
  </zg-menu>

  <!-- Filter Menu (generated) -->
  <zg-filter-menu></zg-filter-menu>

  <!-- Status Messages (generated) -->
  <zg-status></zg-status>

  <!-- Tooltip (generated) -->
  <zg-tooltip></zg-tooltip>

  <!-- Frozen Columns Group (generated) -->
  <zg-frozen-colgroup></zg-frozen-colgroup>

  <!-- Define Batch Edit Area (generated) -->
  <zg-batch-edit></zg-batch-edit>

  <!-- No Data Message (user-added or generated) -->
  <zg-no-data></zg-no-data>

  <!-- Grid Loading Mask (user-added or generated) -->
  <zg-load-mask></zg-load-mask>
</zing-grid>
```