---
title: "Custom Columns | Features"
description: "Custom columns allow you to override or extend ZingGrid’s default cell behavior. You can use Slotted Tokens, Slotted Row/Card Content, Renderer, registerCellType, etc. to customize your columns."
url: https://www.zinggrid.com/docs/features/custom-columns
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/custom-columns.md
mode: provenance
representation: markdown
origin_response_id: 36d7e04fd909622ed7d7621abea95c1a
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.681Z
version_nonce: ce641e05e5653141914f7f5979bbf7a6
generated_at_utc: 2026-11-08T23:36:16.643Z
response_nonce: 71cc92c40fa3ddc56be6194c3c9c6c97
```

# Custom Columns

Custom columns allow you to override or extend ZingGrid’s default cell behavior. You can achieve this via Slotted Tokens, Slotted Row/Card Content, `renderer`, and `registerCellType`.

## Slotted Tokens

You can format column data by adding slotted data (e.g., a `<span>` tag) to `<zg-column>`. ZingGrid has two interchangeable tokens, `index` and `record`, that you can use to access any data key from your grid using `index.key` or `record.key`, like so:

```html
<zg-column index="status">
  <span class="build-status build-[[index.status]]"></span>
</zg-column>
<zg-column index="branch,commitId" header="Branch - Commit - RunTime">
  <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
</zg-column>
```

### Slotted Tokens Grid
Here is a complete grid which utilizes `index.key` and `record.key` to access slotted data:

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

## Slotted Row Content

Directly put markup in a cell with the `type` attribute, like so:

```html
<zg-column type="custom">
  <select>
    <option value="1">Restart Build</option>
    <option value="2">Reset Cache</option>
  </select>
</zg-column>
```

### Slotted Row Content Grid
Here is a complete grid with markup as slotted row content:

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

## Slotted Card Content

You can also directly put markup in the card mode of the grid with the `<zg-card>` tag, like so:

```html
<zing-grid>
  <zg-card>
    <h2>Pipeline Information</h2>
    <div>Status: [[record.status]]</div>
    <div>Branch: [[record.branch]]</div>
    <div>Run Time: [[record.runTime]]</div>
    <div>Commit: [[record.status]]</div>
    <div>
      <div>Username: [[record.status]]</div>
      <img src="[[record.avatar]]">
    </div>
    <div>
      <select>
        <option value="1">Restart Build</option>
        <option value="2">Reset Cache</option>
      </select>
    </div>
  </zg-card>
</zing-grid>
```

> **Note:** In this case, we don't define any `<zg-column>` tags because we are only displaying card mode.

### Slotted Card Grid
Here is a complete grid with slotted content in card mode:

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

## `renderer` Function

You can use a custom renderer function to add actions on each cell (see below). Default arguments to the renderer function are indices that reference the cell. For example, if you have `index="branch, username"`, the function definition will be `function(branch,username,$cell)`. In the callback, you have direct access to the `<zg-cell>` DOM contents through `$cell.dom()` and direct information related to the row through `$cell.record`.

```javascript
  function addChangeEvent(customIndex, $cell) {
  // $cell.record gives us us direct information related to this row
  const record = $cell.record;
  // $cell.dom() gives us direct access to zg-cell DOM contents
  const selectRef = $cell.dom().querySelector('select');
  selectRef.addEventListener('change', e => {
    const changeValue = e.target.value;
    if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    else alert('Resetting cache');
  });
}
```

> **Warning:** Only attempt to bind events to contents of `<zg-cell>` and not the tag itself! The code snippet above does not break any rules because it binds an event to the `<select>` element, a content of `<zg-cell>`. Do not bind events directly to `<zg-cell>` or `<zg-row>` as these components are reused to enhance performance. To bind events to `<zg-cell>` or `<zg-row>`, please use [ZingGrid's custom events](https://www.zinggrid.com/docs/api-events).

### `renderer` Function Grid

Here is a complete grid with custom renderer functions on the cells:

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

## `registerCellType` Function

Easily register your own column `type` by creating a custom `renderer` function and/or `editor` function, like so:

```javascript
ZingGrid.registerCellType('upper', {
  editor,
  renderer: upperRenderer,
});
```

> **Note:** Read more about `registerCellType()` in our [ZingGrid Object Methods docs](https://www.zinggrid.com/docs/api/methods/zinggrid-object).

### Custom Registered Column Type Grid
Here is a complete grid with custom registered column types:

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

## Column Tag Type

The `<zg-column>` tag can render any single DOM element inside itself with the `type-element-tag-name` attribute, like so:

```html
<zg-column index="name" type="element" type-element-tag-name="h1"></zg-column>
<zg-column index="number" type="element" type-element-tag-name="em"></zg-column>
<zg-column index="age" type="element" type-element-tag-name="b"></zg-column>
```

### Column Tag Type Grid

Here is a complete grid with DOM elements rendered in `<zg-column>`:

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

## Single Row/Cell

You can combine all the concepts above to create a single row template, like so:

```html
<zing-grid
  layout="row"
  caption="Current Pipelines">
  <zg-colgroup>
    <zg-column
      index="status, branch, username, commitId, runTime, avatarUrl"
      renderer="_customRenderFnc">...
    </zg-column>
  </zg-colgroup>
</zing-grid>
```

> **Note:** We force a row layout with `layout="row"` so that the card layout is not applied on smaller browsers (i.e., tablet and mobile devices).

### Single Row/Cell Grid

Here is a complete grid with a single row template:

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

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Adding Features Guide](https://www.zinggrid.com/docs/adding-features)
* [Data Types Documentation](https://www.zinggrid.com/docs/data-types)