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

Image of the DOM relationship for the zg-column web component tag

ZGColumn Relationships
Component	Relationship	Type	Ancestor
ZGColgroup	Parent	Generated, Manual	n/a
ZGButton	Child	Manual	n/a
ZGCheckbox	Child	Manual	n/a
ZGIcon	Child	Manual	n/a
ZGInput	Child	Manual	n/a
ZGSelect	Child	Manual	n/a
ZGText	Child	Manual	n/a

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>

Top

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>

align

String

Description

Aligns the contents of the cell

Default Value

"left"

Accepted Values

"center"
"left"
"right"

Name	Description	Demo
aggregate	Will render a column containing the aggregate value of each row. Specify aggregate calculation with `[typeAggregateValue]` to return the aggregate of columns and rows. When `[footCell]` or `[headCell]` is set without `[typeAggregateValue]` to return the aggregate of all numeric value grid cells.
boolean	Will render a true\|false string value and the editor will use an input field with `type="checkbox"`
button	Will render a button and the editor is disabled
checkbox	Will render a checkbox that can be toggled
color	Will render a preview of the color and display a color picker when editing the cell
currency	Will render the currency symbol in front of the number and the editor will use an input field with `type="number"`
custom	Will 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"`
date	Will render the date as a string value and the editor will use an input field with `type="date"` expecting (dd/mm/yyyy) dates
duplicate	A render only field to display an icon to duplicate the record on click.
editor	A render only field to display an icon to edit the record on click
element	Will wrap cell content with value specified in `[type-element-tag-name]` with the attribute specified in `[type-element-attribute-name]`
email	Will render a string value and the editor will use an input field with `type="email"`
icon	A 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 use an input field with `type="text"`.
image	Will render an `<img>` and the editor will use an input field with `type="text"`.
iframe	A render only field to display an `<iframe>`. Editing will use an input field with `type="text"`.
number	Will render a number as a thousand's separated string value and the editor will use an input field with `type="number"`.
password	Will render a hidden string value and the editor will use an input field with `type="password"`.
percentage	Will render a number as a percentage string value and the editor will use an input field with `type="number"`.
radio	Will render selected option in cell and the editor will use an radio options specified in `typeRadioOptions`.
range	Will 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.
remover	A render only field to display an icon to remove the record on click.
row-group	A render only field to display the row grouping.
row-number	A render only field to display the current row index of this row.
select	Will render a string value and the editor will use an input field with `type="select"`.
selector	A render only field to display an checkbox to selector and remove the record on click.
tel	Will render a string value and the editor will use an input field with `type="tel"`.
text	(Default Type) Sets the column type to text.
toggle	N/A
url	Will render the field to to display an `<a>` tag. The editor will use an input field with `type="text"`.