---
title: "Attribute vs Element | Docs"
description: "ZingGrid has a set of concepts and guidelines that will make developing grids faster and easier."
url: https://www.zinggrid.com/docs/guides/attribute-vs-element
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/attribute-vs-element.md
mode: provenance
representation: markdown
origin_response_id: 903e1a01133f38db1f38271480377611
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.714Z
version_nonce: 9b92ad3ae47e58c25c83518265bd83ca
generated_at_utc: 2026-10-31T14:58:18.563Z
response_nonce: c9123aa44b86d3db0afc32d8c880b7c6
```

# Attribute Versus Element

It can often appear that ZingGrid has some attributes and elements that share the same purpose. This is by design to offer convenience to the developer.

## Features Via Attribute

For most use cases, setting the attribute will be easier and faster than providing the equivalent markup elements. You should only need to add markup if you wish to customize the default behavior. Features added via attributes have their corresponding elements created and added to the grid automatically on render.

For example, take this grid:

```html
<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  caption="Hello ZingGrid"
></zing-grid>
```

On render, the `<zg-caption>` tag is generated to the grid in the correct location, like so:

```html
<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  caption="Hello ZingGrid">
  <zg-header>
    <zg-caption>Hello ZingGrid</zg-caption>
  </zg-header>
</zing-grid>
```

## Features Via Element

Conversely, you can add the caption via markup and the attribute will be added to the grid (see below). Do this if you need to customize the caption beyond plain text.

```html
<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption><em>Hello ZingGrid<em></zg-caption>
</zing-grid>
```

## Position Options for Attributes

When you add a `caption` attribute to the `<zing-grid>` element, it only attaches to the `<zg-header>` tag. If you want a `caption` attached to the grid's footer instead, you should apply it to `<zg-footer>` directly, like so:

```html
<zing-grid>
  <zg-footer>
    <zg-caption>Hello World</zg-caption>
  </zg-footer>
</zing-grid>
```

However, it is easier to specify the caption's position via its own predefined attributes such as:

`position="bottom"`
```html
<zing-grid>
  <zg-caption position="bottom">Hello World</zg-caption>
</zing-grid>
```
or

`position="both"`
```html
<zing-grid>
  <zg-caption position="both">Hello World</zg-caption>
</zing-grid>
```

## Attributes Take Precedence!

If both the attribute and the element(s) are added by the user, the attribute value will take precedence. Take the following for example:

```html
<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  caption="Hello ZingGrid">
  <zg-caption>Alternate Caption</zg-caption>
</zing-grid>
```

[Example code](https://app.zingsoft.com/demos/embed/D4VSSMJ0)

In the rendered example, you can see the attribute took precedence over the matching element.

By having the attribute take precedence, the grid can read changes to the attribute after render and update the element accordingly. For example, if the caption attribute value is updated, the element value will update and you'll see the new value in the grid. If the attribute is removed, the caption element will hide and won't be visible on screen.

Try changing the caption in the accompanying demo:

[Example code](https://app.zingsoft.com/demos/embed/HNGNSLB5)

If you inspect the grid, you'll see the caption attribute is updated, which in turn updates the `<zg-caption>`'s text content.

> **Warning:** Syncing between attribute and element is unidirectional. Changes to the element directly after render will not cause the grid to update. If you cannot update via the attribute after render, you'll need to manually refresh the grid via the `grid:refresh` event. You can see all of the grid events on the [API Events page](https://www.zinggrid.com/docs/api/events/all/).