Column Types
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.
Adding Columns
Adding a type
attribute to a column renders the data in a pre-formatted pattern. You can use these to quickly render your content in common formats.
You can 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=",">
Slotted Content
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]]
.
In the example below, we've applied 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>
Text, Date, and Number type
Specifying the text
, date
, or number
type on a column assigns the type
attribute of the editor's <input>
. It also tells the grid how to validate the cell value if it is changed via the editor. For example, if you try editing a "Quantity" cell in the sample grid below and type in a letter, you'll receive an "error message" and the grid will fail to render.
Text, Date, and Number Input Grid
Here is a complete grid with text
, date
, and number
column types:

Email, Tel, and Password type
Specifying the email
, tel
, or password
type on a column assigns the type
attribute of the editor's <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 (***).
Email, Tel, and Password Input Grid
Here is a complete grid with email
, tel
, and password
column types:

Select and Boolean type
Setting the select
type creates a <select>
element when editing the cell. You can then use the type-select-options
attribute to set the dropdown options. Making a selection will set the cell data to that new value. Add the type-select-multiple
attribute to display a multi-select <select>
dropdown. Per the MDN specification, users must hold ctrl, cmd, or shift to select multiple options.
Setting the boolean
type creates a cell that can be toggled. A checkbox will display when you try to edit the cell.
Select and Boolean Toggle Enabled Grid
Here is a complete grid with a multi-select dropdown menu and a boolean toggle:

Currency type
Set the currency
type to format a number into a currency display. By default, the value is displayed in US Dollars. To display a different currency, set the locale
and type-currency
attributes. Learn more about ZingGrid's internationalization features here.
locale
and type-currency
only formats the raw number value for display. It does not convert between currency values.
Multiple Currency Types Grid
Here is a complete grid with one column displaying currency in USD and one column displaying currency in Euros:

Icon type
Set the icon
type 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 more about adding custom icons in the styling section.
You can 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 the icon-set="fontawesome"
attribute 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 can set the cell value to any valid icon name and it should render.
Built-In Grid Icons
The following list shows 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 type
Set the iframe
type to display data (e.g., videos, maps, etc.) in an inline frame. You can set the alt
attribute to assign an alternative text in case the iframe doesn't display. You can also add custom styles by setting the content-style
attribute, which emulates the native style
inline styling.
Iframe Column Type Grid
Here is a complete grid with videos displayed in an iframe
column type:

Image type
Set the image
type to apply the cell data as the <img src="">
'src' value. You can set the type-image-alt
attribute to assign alternative text if images are disabled by the device. You can also add the content-style
attribute to add inline styles, which emulates the native style
inline styling.
Image Data Grid
Here is a complete grid with images displayed in an image
column type:

Range type
Set the range
type 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.
Range Enabled Grid
When using the grid editor in the sample below, 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, and Remover type
Set the selector
type to enable selection of rows, the editor
type to edit all cells in a row, and the remover
type to remove individual rows from the grid.
Select, Edit, and Remove Enabled Grid
Here is a complete grid where you can select, edit, or delete rows as necessary:

Toggle type
Enable toggling on a column by setting the toggle
type. Add the type-toggle-options
attribute to set the options for true/false.
Toggle Enabled Grid

URL type
Add a link by setting the url
type. 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 by using the type-url-text
attribute on <zg-column>
, like so:
<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
>, like so:
<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 type
If none of these column types meet your needs, you can set the custom
type and create a column that works for you.
Custom Columns Grid
Here is a complete grid with custom column types:
