<zg-column>
Interactive Storybook Playground
ZingGrid has a predefined set of column types which have default behavior on render and edit. This behavior can be extended and modified. If you are not familiar with the <zg-column>
tag, please refer to the column types guide.
Related Web Components
Usage
The ZGColumn attribute, type
, is an extension of the ZingGrid library and are used to increase and alter column display, functionality, and editing.
<zing-grid src="https://cdn.zinggrid.com/datasets/users.json">
<zg-colgroup>
<!-- default type is text -->
<zg-column index="name"></zg-column>
<!-- explicitly set text -->
<zg-column type="text" index="job"></zg-column>
<!-- set image column type -->
<zg-column type="image" index="img" type-image-mask="circle" content-style="width:50px;height:50px;"></zg-column>
<!-- set url column type -->
<zg-column type="url" index="episode_link" type-url-icon="outsidearrow"></zg-column>
</zg-colgroup>
</zing-grid>
Attributes
The <zg-column>
tag is used to associate the columns of the grid to the values in a dataset. Attributes on the tag are used to configure both the data type, style, and function of the grid column. It is possible to build grids without explicit <zg-column>
tags; ZingGrid will add a column for each index in the dataset. However, developers are encouraged to explore the features available with <zg-column>
to utilize the powerful features ZingGrid has to offer.
Example Usage
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
<zg-column index="firstName" header="First"></zg-column>
</zing-grid>
Type Attribute Values
Below is a list of the accepted values for the type
attribute:
CSS Variables
No CSS variables are available for the <zg-column>
tag.
CSS Selector
No CSS selectors are available for the <zg-column>
tag.
Slots
<zg-column>
contains placeholders to allow adding markup inside the component.
<zg-column>Slotted Content</zg-column>
Below is a list of all the associated ZGColumn slots. Check out the full list of slots.