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=", ">

Adding Columns

By default, the data given to the grid is displayed in cells as text. However, the content might be a path to an image you want to display or a URL link you want to be clickable. Fortunately, ZingGrid comes with a large collection of pre-built column types that handles this for you.
ZingGrid already comes with built-in column types. Give the first column type="image" to get those image sources rendered to images. Another useful column type is type="url", which we use to make the last column's text linkable. However, that long string of text doesn't look very good. We can replace that with custom columns!
One of ZingGrid's most powerful features allows you to easily create custom columns with slotted content. This is a great way to customize individual columns and consolidate columns as well. Slotted content just means putting markup inside a <zg-column> tag. Inside that column, you have access to the index data through our templating system [[index.key]]. You also have access to all data through [[record.key]].
Let's apply custom columns to the "Character" and "1st Episode" columns to style and render the information in a cleaner, more readable layout.

<zg-colgroup>
  <zg-column index="img" header=" " type="image" cell-class="profile-avatar" content-width="50px" sort="disabled"></zg-column>
  <zg-column index="name,actor" header="Character" cell-class="character-info">
    <span class="character-info--header"><strong>Name:</strong> [[index.name]]</span>
    <br>
    <span class="character-info--subheader"><strong>Voice By:</strong> [[index.actor]]</span>
  </zg-column>
  <zg-column index="description" width="300"></zg-column>
  <zg-column header="1st Episode" index="episode_link" type="url" type-url-icon="outsidearrow" >
  </zg-column>
</zg-colgroup>

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Type Url Text

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

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

Type Url Icon

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

<zg-column index="link"  type="url" type-url-icon="link"></zg-column>
<zg-column index="link"  type="url" type-url-icon="outsidearrow"></zg-column>

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.