---
title: "HTML Templates in ZingGrid | Docs"
url: https://www.zinggrid.com/docs/guides/html-templates
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/html-templates.md
mode: provenance
representation: markdown
origin_response_id: 1c399c9174c1cf3447e72504a81efc39
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.719Z
version_nonce: 841fa8352eee6dac0b97c2507b5d8807
generated_at_utc: 2026-11-07T21:52:23.284Z
response_nonce: dee7d97b01ffef78ae695066470f6a0d
```

# ZingGrid and HTML Templates

Some ZingGrid features generate complex markup structures based on a smaller set of configuration or control items set by the user. In these use cases, you are providing a template similar to a native HTML `<template>` tag. In fact, this is what happens in the background; ZingGrid takes the user-templating code and applies it to a `<template>`. ZingGrid then renders the target grid markup for you from this template.

Take `<zg-column>` for example. When you define a custom render template for it, you are providing ZingGrid with an HTML template to use:

```html
<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-colgroup>
    <zg-column index="firstName,lastName" header="Name">
      Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
    </zg-column>
  </zg-colgroup>
</zing-grid>
```

This is the same as adding it as an HTML template:

```html
<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-colgroup>
    <zg-column index="firstName,lastName" header="Name">
      <template>
        Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
      </template>
    </zg-column>
  </zg-colgroup>
</zing-grid>
```

ZingGrid interprets the `<zg-column>` template code and uses it to override the normal `<zg-cell>` automatically.

### External Templates

Defining numerous templates for a complex grid design or reusing the same template on multiple grids can become cumbersome. Instead, you can point to an external template to use:

```html
<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption>External Template<zg-caption>
  <zg-colgroup>
    <zg-column index="firstName,lastName" header="Name" renderer-template="colTemplate"></zg-column>
  </zg-colgroup>
</zing-grid>

<template id="colTemplate">
  Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
</template>
```

> **Warning:** For generative processes like ``<zg-column>`` or ``<zg-card>``, where the contents of the tag are used to generate markup elsewhere in the grid, we recommended using a ``<template>`` tag to match web standards. For all other tags, like ``<zg-caption>``, where the element is the final rendered result, a template isn't necessary; nested content will render as-is in place.