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:
<zing-grid caption="My Grid" data='[["Philip", 123], ["Bender", 456 ]]' ></zing-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:
<zing-grid> <zg-caption>My Grid</zg-caption> <zg-data data='[["Philip", 123], ["Bender", 456 ]]'></zg-data> </zing-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
<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).
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
data through our templating system
[[index.key]]. You also have access to all data through
Let's apply custom columns to the "Character" and "1st Episode" columns to style and render the information in a cleaner, more readable layout.
<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>
Voice by: [[index.actor]]
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 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.
<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!
<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>