Adding Features

ZingGrid comes with many native features, from content filtering and sorting to editing cell/row data and custom-data display. All features are optional and can be added on a per-grid basis to allow you to accommodate the individual data set. Turning on features is as easy as adding one attribute to the <zing-grid> tag or adding some components to the grid as child elements.

Adding as Attribute

The easiest way to add a feature to the grid instance is by adding the feature's attribute to <zing-grid>. Some features require just the attribute while others allow you to pass a value to the attribute.

For example, to add a caption to the grid, just add a caption attribute with your caption text as the value:

CloseCopy Copied
<zing-grid
  caption="My Grid"
  data='[["Philip", 123], ["Bender", 456 ]]'
></zing-grid>

Most feature attributes are 'reflected' attributes, which means the grid will change if you change the value. In the above example, if you change the caption attribute's value after render with Javascript or Dev Tools, the rendered display text will also update without reloading the grid.

Adding as Element

Most of the features you can add as an attribute alternatively allow you to add it as a custom element, as a convenience. For example, our caption example from the previous section can also be added as:

CloseCopy Copied
<zing-grid>
  <zg-caption>My Grid</zg-caption>
  <zg-data data='[["Philip", 123], ["Bender", 456 ]]'></zg-data>
</zing-grid>
My Grid

To keep the attribute and DOM components matching and in-sync, the attribute will be added to <zing-grid> automatically on render. In effect, adding the attribute or adding the DOM element is just convenience...they are both always added!

To keep the attribute and DOM elements in-sync, the attribute takes precedence and drives the synchronization. Changing the attribute will update the DOM element, but not vice-versa. If you need to change data after render, update the attribute instead of the DOM element for this reason.

Adding Complex Features

Some complex features are only added as an element, although they may use attributes on <zing-grid> to support it. For example, when creating a custom dialog modal that hooks into internal grid events like close, cancel, and confirm:

CloseCopy Copied
<zing-grid dialog>
  <zg-data data='[["Philip", 123], ["Bender", 456 ]]'></zg-data>
  <zg-dialog
    type="custom"
    label="My Custom Dialog"
    cancel="myCancel"
    confirm="myConfirm"
  ></zg-dialog>
</zing-grid>

The modal code itself is only applied via the DOM elements. However, you can add the optional [dialog] attribute to the grid to constrain the modal mask to the grid dimensions instead of the device dimension (fullscreen by default).

Column Types

By default, the data given to the grid is displayed in cells as text. However, the content might be a path to an image you want to display or a URL link you want to be clickable. Fortunately, ZingGrid comes with a large collection of pre-built column types that handles this for you.

ZingGrid already comes with built-in column types. Give the first column type="image" to get those image sources rendered to images. Another useful column type is type="url", which we use to make the last column's text linkable. However, that long string of text doesn't look very good. We can replace that with custom columns!

One of ZingGrid's most powerful features allows you to easily create custom columns with slotted content. This is a great way to customize individual columns and consolidate columns as well. Slotted content just means putting markup inside a <zg-column> tag. Inside that column, you have access to the index data through our templating system [[index.key]]. You also have access to all data through [[record.key]].

Let's apply custom columns to the "Character" and "1st Episode" columns to style and render the information in a cleaner, more readable layout.

CloseCopy Copied
<zg-colgroup>
  <zg-column
    index="thumbnail_img"
    header=" "
    type="image"
    cell-class="profile-avatar"
    width="50px">
  </zg-column>
  <zg-column
    index="name,actor"
    header="Character"
    cell-class="character-info">
    <span class="character-info--header">[[index.name]]</span>
    <br>
    <span class="character-info--subheader">Voice by: [[index.actor]]</span>
  </zg-column>
  <zg-column
    index="description"
    width="stretch">
  </zg-column>
  <zg-column
    index="episode_link, episode_name"
    header="1st Episode"
    type="url"
    type-url-icon="outsidearrow"
    content-style="border-bottom:none;"
    width="200px">
    <a href="[[index.episode_link]]">[[index.episode_name]]</a>
  </zg-column>
</zg-colgroup>

You can find all column types here. You can also find a comprehensive list of all the attributes for <zg-column>here.

[[index.name]]
Voice by: [[index.actor]]
[[index.episode_name]]

Mobile Features

ZingGrid has a multitude of mobile features, which includes card layouts, card styling, card editing, and touch features. To set your grid to card layout, simply add layout="card" to your ZingGrid.

Card Templating

Card templating allows you to customize how content is laid out when in card layout. In our example, we will stack the content in the "Character" column so that each piece of information has its own line.

CloseCopy Copied
<template functional id="characterCard">
  <div class="character-info--header">[[index.name]]</div>
  <br>
  <div class="character-info--subheader">Voice by: [[index.actor]]</div>
</template>

Card Edit Templating

Card edit templating allows you to arrange and style the editor modal. In our example, we will give each data item in the "Character" column its own input field accompanied by an icon. Double-click any "Character" cell to see for yourself!

CloseCopy Copied
<template functional id="characterEditor">
  <svg height="1rem" width="1rem" data-prefix="fas" data-icon="user" ...></svg>
  Character:<br>
  <input type="input" value="[[index.name]]"><br>
  <svg height="1rem" width="1rem" data-prefix="fas" data-icon="microphone" ...></svg>
  Voiced by:<br>
  <input type="input" value="[[record.actor]]"><br>
</template>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading