features
Menu
Menu

Custom Columns

Custom columns allow you to override and/or extend ZingGrid’s default cell behavior.

On This Page

Slotted Row Content

You can directly put markup in a cell with the index="custom" or index=" " attribute.
CloseCopy Copied
<zg-column index="custom">
  <select>
  <option value="1">Restart Build</option>
  <option value="2">Reset Cache</option>
  </select>
</zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted Card Content

You can directly put markup in card mode of the grid with the <zg-card> tag.

In this case we don't define any zg-columns because we are only displaying card mode.

CloseCopy Copied
<zing-grid>
  <zg-card>
    <h2>Pipeline Information</h2>
    <div>Status: [[record.status]]</div>
    <div>Branch: [[record.branch]]</div>
    <div>Run Time: [[record.runTime]]</div>
    <div>Commit: [[record.status]]</div>
    <div>
      <div>Username: [[record.status]]</div>
      <img src="[[record.avatar]]">
    </div>
  <div>
    <select>
      <option value="1">Restart Build</option>
      <option value="2">Reset Cache</option>
      </select>
    </div>
  </zg-card>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted Tokens

The <zg-column> 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

Renderer

You can use a custom renderer function on each cell.

Default arguments to the renderer function are indices that reference the cell. If you have index="branch, username", the function definition will be function(branch,username,$cell). In the callback you have direct access to the zg-cell DOM contents through $cell.dom(), and direct information related to the row through $cell.record.

CloseCopy Copied
function addChangeEvent(customIndex, $cell) {
  // $cell.record gives us us direct information related to this row
  const record = $cell.record;
  // $cell.dom() gives us direct access to zg-cell DOM contents
  const selectRef = $cell.dom().querySelector('select');
  selectRef.addEventListener('change', e => {
    const changeValue = e.target.value;
    if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    else alert('Resetting cache');
  });
}

Only attempt to bind events to contents of zg-cell! The code snippet above does not break any rules, because it binds an event to the select element, a content of zg-cell. Do not bind events direcly 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

registerCellType

Easily register your own column type by creating a custom renderer and/or editor.
CloseCopy Copied
ZingGrid.registerCellType('upper', {
  editor,
  renderer: upperRenderer,
});
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Single Row/Cell

You can combine all the concepts above to create a single row template.

We force a row layout with layout="row" so that the card layout is not applied on smaller browsers (i.e., tablet and mobile devices).

CloseCopy Copied
<zing-grid
  layout="row"
  caption="Current Pipelines">
  <zg-colgroup>
    <zg-column
      index="status, branch, username, commitId, runTime, avatarUrl"
      renderer="_customRenderFnc">...
    </zg-column>
  </zg-colgroup>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading