<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

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