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

Top

Boolean

The boolean type renders a boolean value and uses a checkbox as an editor.

Top

Button

Set the button type is render buttons in the column. Using the supporting attributes listed below to easily disable, add an icon and/or label, and handler to the button.

https://app.zingsoft.com/demos/embed/CXHREKNK
https://app.zingsoft.com/demos/embed/CXHREKNK

Related Attributes

AttributeDescription
typeButtonDisabledSets button to be in a disabled state.
typeButtonHandlerSet to name of function to be called when button is clicked.
typeButtonIconSets the icon in button.
typeButtonLabelSets the label in button.
typeButtonUrlSet to url to open in new window when button is clicked.
Top

Checkbox

Set the the checkbox type creates a cell that can be toggled. A checkbox will display when you try to edit the cell.

https://app.zingsoft.com/demos/embed/NP9MOB3X
https://app.zingsoft.com/demos/embed/NP9MOB3X

Related Attributes

AttributeDescription
typeCheckboxLabelSets the label next to the checkbox.
Top

Color

Set the color type to render the preview of the color and display a color picker when editing the cell. The type-color-mode attribute configures the mode of the color picker.

https://app.zingsoft.com/demos/embed/0L7OHJ44
https://app.zingsoft.com/demos/embed/0L7OHJ44

Related Attributes

AttributeDescription
typeColorModeSets the color mode to configure the color picker (HSL, RGBA, Hex).
typeColorPreviewSet to false to disable the default color swatch UI preview.
Top

Currency

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.

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

Related Attributes

AttributeDescription
localeLocalization with the column type.
typeCurrencySet which currency formatting to be used using the three letter code specified by ISO 4217 specification.
typeNumberDecimalsIndicates number of decimal places to display.
typeNumberMaxDecimalsIndicates the maximum decimal places to display.
typeNumberMinDecimalsIndicates the minimum decimal places to display.
Top

Date

Specifying the date type on a column assigns the date editor to the cells. This tells the grid how to validate the cell value when changed via the editor. The date type also can format dates or translate it to relative time.

https://app.zingsoft.com/demos/embed/BQ3RLEZL
https://app.zingsoft.com/demos/embed/BQ3RLEZL

Related Attributes

AttributeDescription
typeDateFormatUse tokenized formatting to format the date.
typeDateFromNowIndicates if date from be displayed in relative time.
Top

Duplicate

Adding the duplicate type adds the duplicate buttons to duplicate the row.

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

Editor

Adding the editor type adds row editor buttons to edit all cells within the row.

https://app.zingsoft.com/demos/embed/10160WKK
https://app.zingsoft.com/demos/embed/10160WKK
Top

Element

Setting the element type renders the specified element that wraps around the cell content. This feature also extends to custom-elements, allowing you to easily render your own custom elements into the grid!

https://app.zingsoft.com/demos/embed/4NJN81PT
https://app.zingsoft.com/demos/embed/4NJN81PT

Related Attributes

AttributeDescription
contentStyleSets a style attribute directly on the rendered element.
contentWidthSets the width of the content inside of the cell.
typeElementAttributeNameSets the attribute of the custom-element defined in typeElementTagName.
typeElementTagNameSets the tag to wrap the content.
Top

Email

Setting the email type on the column renders the mailto link and tells the grid how to validate the cell value when changed.

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

Icon

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.

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

Iframe

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.

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

Related Attributes

AttributeDescription
contentStyleSets a style attribute directly on the rendered element.
contentWidthSets the width of the content inside of the cell.
typeIframeRatioSets a square ratio instead of the default 16:9.
Top

Image

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.

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

Related Attributes

AttributeDescription
contentStyleSets a style attribute directly on the rendered element.
contentWidthSets the width of the content inside of the cell.
typeImageAltSets the alternative text.
typeImageMaskSets the shape to mask the image.
typeImageSrcSets the src of the image.
Top

Number

Specifying the number type on a column assigns the number editor to the cells. This tells the grid how to validate the cell value when changed via the editor. The number type by default formats the number as a thousand's separated string, but can also format the number as a decimal. This is the default type for any number cell value.

https://app.zingsoft.com/demos/embed/P20OPQLR
https://app.zingsoft.com/demos/embed/P20OPQLR

Related Attributes

AttributeDescription
typeNumberDecimalsIndicates number of decimal places to display.
typeNumberFormattingSet to "disabled" to turn off default number formatting.
typeNumberMaxDecimalsIndicates the maximum decimal places to display.
typeNumberMinDecimalsIndicates the minimum decimal places to display.
Top

Password

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

https://app.zingsoft.com/demos/embed/7JAJYANQ
https://app.zingsoft.com/demos/embed/7JAJYANQ

Top

Percentage

Enabling the percentage type renders the number as a percentage string value.

https://app.zingsoft.com/demos/embed/UGOV12S9
https://app.zingsoft.com/demos/embed/UGOV12S9

Related Attributes

AttributeDescription
typeNumberDecimalsIndicates the number of decimal places to display in a percentage.
typeNumberMaxDecimalsIndicates the maximum decimal places to display in a percentage.
typeNumberMinDecimalsIndicates the minimum decimal places to display in a percentage.
Top

Radio

Setting the radio type on a column assigns the radio editor to the cells. Specified radio options will displayed when you edit the cell.

https://app.zingsoft.com/demos/embed/41C9I817
https://app.zingsoft.com/demos/embed/41C9I817

Related Attributes

AttributeDescription
typeRadioOptionsAdds rendered radio options to the cell.
Top

Range

Specifying the range type on a column assigns the number editor to the cells. This tells the grid how to validate the cell value when changed via the editor. The number is formatted as a thousand's separated string value. Optionally, use the attributes below to set the minimum, maximum, and step when changing the values using the up/down keys.

https://app.zingsoft.com/demos/embed/NZ8M6C7F
https://app.zingsoft.com/demos/embed/NZ8M6C7F

Related Attributes

AttributeDescription
typeRangeMaxMaximum value for the input box.
typeRangeMinMinimum value for the input box.
typeRangeStepSpecifies the step value between each legal value for the input box.
Top

Record Duplicate

The record-duplicate type adds record-duplicate buttons to duplicate the row.

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

Record Key

The record-key type appends a row

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

Remover

Adding the remover type adds remover buttons to remove the row.

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

Row Number

The row-number type renders a field to display the index of the row.

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

Select

When setting the select type, this creates the <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.

https://app.zingsoft.com/demos/embed/AKU9D36H
https://app.zingsoft.com/demos/embed/AKU9D36H

Related Attributes

AttributeDescription
typeSelectDefaultValueSets the defaults value of a new record.
typeSelectMultipleIn edit mode, allows multiple selections.
typeSelectOptionsSets the options of the select box.
Top

Selector

Adding the selector type adds a column of checkboxes to enable selecting rows. With editing enabled, the selection of rows can be removed with one click.

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

Tel

Setting the tel type assigns the [type="tel"] attribute of the editor's <input>.

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

Text

The text type is the default type for string values. This assigns a text editor to the cell.

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

Toggle

Enable toggling on a column by setting the toggle type. Add 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

Related Attributes

AttributeDescription
typeToggleOptionsSets the list of options for the display.
typeToggleRenderValueSet to make the render and value the same to prevent the default true/false values.
Top

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>

https://app.zingsoft.com/demos/embed/5BG67C17
https://app.zingsoft.com/demos/embed/5BG67C17
Top

URL

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

https://app.zingsoft.com/demos/embed/1SHDQ5JV
https://app.zingsoft.com/demos/embed/1SHDQ5JV

Related Attributes

AttributeDescription
contentStyleSets a style attribute directly on the rendered element.
contentWidthSets the width of the content inside of the cell.
typeUrlIconReference a ZGIcon within library to replace the link text with specified icon.
typeUrlSrcSets the src for the link.
typeUrlTextSets the text displayed for the link.
Top

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:

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

[guides: column]