features
Menu
Menu

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.

Check out a list of all zg-column types here.

CloseCopy Copied
<zg-column type="toggle" index="favorite" type-toggle-options='["<i class=\"fa fa-star-o\" aria-hidden=\"true\"></i>", "<i class=\"fa fa-star\" aria-hidden=\"true\"></i>"]'></zg-column>
<zg-column type="number" index="employeeId" header="ID" ></zg-column>
<zg-column type="custom" index="firstName,lastName" header="Employee Name" >
<template>
    [[index.lastName]], [[index.firstName]]
</template>
</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" headering="Password" ></zg-column>
<zg-column type="url" index="website" header="Website" ></zg-column>
<zg-column type="currency" index="salary" ></zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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.
CloseCopy Copied
<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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom

Easily register your own column type by creating a custom renderer and/or editor.
CloseCopy Copied
function upperRenderer(mRawData, cellRef, $cell) {
  return mRawData.toUpperCase();
}

ZingGrid.registerCellType('upper', {
  editor,
  renderer: upperRenderer,
});
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading