Docs

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]