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.

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.

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.

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: