Docs

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="false"></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>

You can view all our column types and a list of all the attributes for <zg-column> here.

Top

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 (***).

https://app.zingsoft.com/demos/embed/ATMNU223
https://app.zingsoft.com/demos/embed/ATMNU223
Top

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.

Top

https://app.zingsoft.com/demos/embed/8XFN6IAW
https://app.zingsoft.com/demos/embed/8XFN6IAW
Top

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.

https://app.zingsoft.com/demos/embed/OFVWLMJJ
https://app.zingsoft.com/demos/embed/OFVWLMJJ
Top

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.

https://app.zingsoft.com/demos/embed/D9KXZ8Y8
https://app.zingsoft.com/demos/embed/D9KXZ8Y8
Top

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.

https://app.zingsoft.com/demos/embed/E1DSLU0F
https://app.zingsoft.com/demos/embed/E1DSLU0F
Top

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.

https://app.zingsoft.com/demos/embed/SFOACED3
https://app.zingsoft.com/demos/embed/SFOACED3
Top

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.

https://app.zingsoft.com/demos/embed/IS9V41CE
https://app.zingsoft.com/demos/embed/IS9V41CE
Top

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

https://app.zingsoft.com/demos/embed/KEN3XMSY
https://app.zingsoft.com/demos/embed/KEN3XMSY
Top

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.

https://app.zingsoft.com/demos/embed/YTIJU21M
https://app.zingsoft.com/demos/embed/YTIJU21M
Top

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.

https://app.zingsoft.com/demos/embed/WCKUIDRK
https://app.zingsoft.com/demos/embed/WCKUIDRK
Top

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.

https://app.zingsoft.com/demos/embed/SPBQNU2F
https://app.zingsoft.com/demos/embed/SPBQNU2F
Top

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>

https://app.zingsoft.com/demos/embed/PKZF9ZNG
https://app.zingsoft.com/demos/embed/PKZF9ZNG
Top

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>

https://app.zingsoft.com/demos/embed/SPBQNU2F
https://app.zingsoft.com/demos/embed/SPBQNU2F
Top

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.

https://app.zingsoft.com/demos/embed/1KY63OVI
https://app.zingsoft.com/demos/embed/1KY63OVI
Top