docs
Menu
Menu

Column Types

Adding [type] to a column renders the data in a pre-formatted pattern. Use these to quickly render your content in common formats.

You may add multiple data indexes to a single column, which will render the cell data separated by spaces. To change the separator, add [separator] to the column with the pattern you want to set. For example, to comma-separate the output, set the value to: <zg-column index="one, two" separator=", ">

Email, Tel, & Password

Specifying email, tel, and password specifies the type of the editor <input>. It also tells the grid how to validate the cell value if it is changed via the editor.

password hides the text behind asterisks (***).

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Text, Date, & Number

Specifying text, date, and number specifies the type of the editor <input>. It also tells the grid how to validate the cell value if it is changed via the editor.

For example, try editing a Quantity cell below and typing a letter.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Select & Boolean

Setting select creates a <select> element when editing the cell. Use [type-select-options] to set the dropdown options. Making a selection sets the cell data to that new value. Set [multiple="true"] to display a multi-select <select> instead of a dropdown.

Setting boolean creates a toggleable cell. Editing the cell displays a checkbox.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Currency

Set currency to format a number into a currency display. By default, the value is converted to US Dollars. For a different currency, set the [locale] and [type-currency] attributes.

For country codes, try this list.
For locale codes, try this list.

This formats the raw number value for display. It does not convert between currency values.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Icon

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. You can read about adding custom icons in the styling section.

You may also set your grid to display icons per an approved icon library, such as Font Awesome. To do so, include the icon library source and then set [icon-set="fontawesome"] on your ZingGrid instance. Once the grid knows how to render the new icon (in FA's case, it renders an <i> instead of the native grid SVG icon), you may set the cell value to any valid icon name and it should render.

The following shows a list of the built-in grid icons and how they are mapped internally. The last entry, fa-smile-wink, is not a built-in type and showcases how you can display any valid Font Awesome icon.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Iframe

Set iframe to display the data in an <iframe>. Set [alt] to assign an alternative text in case the iframe doesn't display. You may also add custom styles by setting [content-style] which emulates the native [style] inline styling.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Image

Set image to apply the cell data as the <img src=""> 'src' value.
Set [type-image-alt] to assign alternative text if images are disabled by the device.
Set [content-style] to add inline styles, which emulates the native [style] inline styling.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Range

Set range to change the range of input fields when using the grid editor. Then, optionally set the minimum value (type-range-min), maximum value (type-range-max), and step (type-range-step), when changing the values using the up/down key.

In the example below, when using the grid editor, input fields for the 'ID' column will have a value range from 110-130 when using the up/down arrows, and these values will step by a factor of 2. This is done by setting the attributes with the following values: type-range-min="110", type-range-max="130", and type-range-step="2".

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Record: Selector, Editor, & Remover

Set the type to 'selector' to enable selection of rows. Set the type to 'editor' to edit all cells in a row. Set the type to 'remover' to remove individual rows from the grid.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Toggle

Enable toggling on a column by setting the type to 'toggle'. Set the type-toggle-options attribute to set the options for true/false.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

URL

Add a link by setting the type to 'url'. Then you can assign the text to click on by setting the attribute type-url-text.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Type Url Text

You can replace a link with any custom text using the type-url-text attribute on zg-column.

CloseCopy Copied
<zg-column index="link"  type="url" type-url-text="custom text goes here"></zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Type Url Icon

You can replace a link with a defined set of icons using the type-url-icon attribute on zg-column.

CloseCopy Copied
<zg-column index="link"  type="url" type-url-icon="link"></zg-column>
<zg-column index="link"  type="url" type-url-icon="outsidearrow"></zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom

If none of these column types meet your needs, you can set the type to 'custom' and create a column that works for you.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading