Docs

zg-column

ZingGrid has a predefined set of column types which have default behavior on render and edit. This behavior can extended and modified. If you are not familiar with the <zg-column> tag, please refer to the column types guide.

Usage

zg-column types are an extension of the ZingGrid library and are used to increase and alter column display, functionality and editing.

Example Usage

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

Type Values

The accepted values for the type (zg-column type="") attribute.

zg-column type Values
NameDescriptionDemo
booleanWill render a true|false string value and the editor will use an input field with type="checkbox".
currencyWill render the currency symbol in front of the number and the editor will use an input field with type="number".
customWill slot in column content and allow referencing data via [[index.key]] or [[record.key]], and the editor will use an input field with type="text".
dateWill render the date as a string value and the editor will use an input field with type="date" expecting (dd/mm/yyyy) dates.
editorA render only field to display an icon to edit the record on click.
elementWill wrap cell content with value specified in [type-element-tag-name] with the attribute specified in [type-element-attribute-name].
emailWill render a string value and the editor will use an input field with type="email".
iconA render only field to set icon to convert the cell data into a built-in grid <zg-icon name=""> element. By default, the value must match the name of a native grid icon or the name of a custom icon. Editing will do nothing for this field.
imageWill render an <img> and the editor will use an input field with type="text".
iframeA render only field to display an <iframe>. Editing will do nothing for this field.
numberWill render a number as a thousand's separated string value and the editor will use an input field with type="number".
passwordWill render a hidden string value and the editor will use an input field with type="password".
rangeWill render a number as a thousand's separated string value and the editor will use an input field with type="number" with optional min, max and step fields defined on the input.
removerA render only field to display an icon to remove the record on click.
row-numberA render only field to display the current row index of this row.
selectWill render a string value and the editor will use an input field with type="select".
selectorA render only field to display an checkbox to selector and remove the record on click.
telWill render a string value and the editor will use an input field with type="tel".
text(Default Type) Sets the column type to text.
toggleN/A
urlWill render the field to to display an <a> tag. The editor will use an input field with type="text".
On This Page