experiment_id: web-retrieval-v1
fixture_id: /docs/features/column-types
mode: provenance
representation: html
origin_response_id: 91fbb1a345780e29e874d41ae50847f0
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.602Z
version_nonce: f728c65f474209e22ca47849fd36410c
generated_at_utc: 2026-10-31T08:33:54.035Z
response_nonce: 4623692ba832cd52da27dc735dc45d65
Docs Version 1

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:

<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>

Variety of Column Types Grid

Here is a complete grid with 5 different column types ("number", "custom", "image", "boolean", and "url"):

Top

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:

<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:

Top

Custom

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

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:

Top

Related Resources

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

[features: column types]