---
title: "Column Types | Features"
description: "ZingGrid provides default column types, as well as custom column types, to enhance the feel and functionality of your grid."
url: https://www.zinggrid.com/docs/features/column-types
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/column-types.md
mode: provenance
representation: markdown
origin_response_id: 13f2fe48b101f7130aa70831c8d76908
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.678Z
version_nonce: c2ca3471db85518c048ba850b7e31569
generated_at_utc: 2026-10-31T09:22:52.975Z
response_nonce: 697ff76e8d701aee7717ea705964fa4d
```

# Column Types

ZingGrid provides default column types to enhance the feel and functionality of your grid. Whether you want to format a phone number, add a checkbox, or include images, our built-in column types will help you customize your grid in a wide variety of ways.

## All Types

Easily add a new column type with the `type` attribute on `<zg-column>`, like so:

```html
<zg-column type="number" index="employeeId" header="ID" ></zg-column>
<zg-column type="custom" index="firstName,lastName" header="Employee Name" ></zg-column>
<zg-column type="image" index="photo" header="Photo" height="200" width="100"></zg-column>
<zg-column type="boolean" index="citizen" header="US Citizen" ></zg-column>
<zg-column type="password" index="password" header="Password" ></zg-column>
<zg-column type="url" index="website" header="Website" ></zg-column>
<zg-column type="currency" index="salary" ></zg-column>
```

> **Note:** [Check out a list of all `<zg-column>` types here](https://www.zinggrid.com/docs/api/tags/zg-column#type)

### Variety of Column Types Grid
Here is a complete grid with 5 different column types ("number", "custom", "image", "boolean", and "url"):

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

## Slotted

You can also format column types by adding slotted content (such as a `<span>` tag) to your `<zg-column>` element and referencing `[[index.key]]` and `[[record.key]]` within it, 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 Content Columns Grid

Here is a complete grid with slotted content in its columns:

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

## Custom

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

```javascript
function upperRenderer(mRawData, cellRef, $cell) {
  return mRawData.toUpperCase();
}

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

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

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

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

* [Custom Columns Documentation](https://www.zinggrid.com/docs/features/custom-columns)