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