features
Menu
Menu

Column Types

ZingGrid has default column types that will help you scaffold the feel and functionality of your grid.

On This Page

All Types

Easily add a new column type with the type attribute on zg-column. Check out a list of zg-column types here!
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted

zg-cell slotted content has tokens under [[index.key]] and [[record.key]].
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
ZingGrid.registerCellType('upper', {
  editor,
  renderer: upperRenderer,
});

When implementing your own custom renderer function and binding an event, only attempt to bind events to contents of zg-cell! Do not bind events to zg-cell or zg-row — these components are reused to enhance performance. To bind events to zg-cell or zg-row, please use ZingGrid's custom events.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading