Adding Features

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. 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.

Adding Attribute(s)

The easiest way to add a feature to the grid instance is by adding attribute(s) 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="Employees"
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
</zing-grid>

Adding more features is as simple as adding more attributes. You can find the fullscreen list of attributes/features available in our api docs.

CloseCopy Copied
<zing-grid
  caption="Employees"
  columns-control
  draggable
  layout-controls
  pager
  page-size="4"
  page-size-options="2,4,8"
  search
  sort
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
</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.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Adding Tags

Most of the features you can add as an attribute, alternatively you can add features by tags. In general, tags allow slotted content. For example, our caption example from the previous section can also be added as:

A full list of tags available for feature enhancment is available in our api intro doc.

CloseCopy Copied
<zing-grid
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
  <zg-caption>Employees</zg-caption>
</zing-grid>

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 Columns

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.

You can column type(s) with the type attribute:

CloseCopy Copied
<zg-column
  index="img" header=" "
  menu-text="Img"
  type="image"
  cell-class="profile-avatar"
  content-width="50px"
  sort="disabled"></zg-column>

You can also add slotted content to zg-column and display record info through [[index.actor]] or [[record.actor]] in your markup:

CloseCopy Copied
<zg-column index="name,actor" header="Character" cell-class="character-info">
  <span class="character-info--header"><strong>Name:</strong> [[index.name]]</span>
  <br>
  <span class="character-info--subheader"><strong>Voice By:</strong> [[index.actor]]</span>
</zg-column>

You can view all our column types and a list of all the attributes available for <zg-column> in our api docs.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Moving Forward

You now understand the basics of adding features.If you think you are ready to start styling your grid read our getting started with styling. If you think you need more server and database driven features, check out REST basics or CRUD basics.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading