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.
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:
<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 full list of attributes/features available in our API docs.
<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>
You can add most features 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:
<zing-grid src="https://cdn.zinggrid.com/datasets/remote-data.json"> <zg-caption>Employees</zg-caption> </zing-grid>
A full list of tags available for feature enhancement is available in our api intro doc.
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.
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 adjust the column type(s) with the
<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
[[record.actor]] in your markup:
<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 now understand the basics of adding features. If you think you are ready to start styling your grid, read our getting started with styling guide. If you think you need more server and database driven features, check out REST basics or CRUD basics.