<zg-column>

Interactive Storybook Playground

ZingGrid has a predefined set of column types which have default behavior on render and edit. This behavior can be extended and modified. If you are not familiar with the <zg-column> tag, please refer to the column types guide.

Image of the DOM relationship for the zg-column web component tag

ZGColumn Relationships
Component Relationship Type Ancestor
ZGColgroup Parent Generated, Manual n/a
ZGButton Child Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGSelect Child Manual n/a
ZGText Child Manual n/a

Related Web Components

Usage

The ZGColumn attribute, type, is an extension of the ZingGrid library and are used to increase and alter column display, functionality, and editing.

<zing-grid src="https://cdn.zinggrid.com/datasets/users.json">
  <zg-colgroup>
    <!-- default type is text -->
    <zg-column index="name"></zg-column>
    <!-- explicitly set text -->
    <zg-column type="text" index="job"></zg-column>
    <!-- set image column type -->
    <zg-column type="image" index="img" type-image-mask="circle" content-style="width:50px;height:50px;"></zg-column>
    <!-- set url column type -->
    <zg-column type="url" index="episode_link" type-url-icon="outsidearrow"></zg-column>
  </zg-colgroup>
</zing-grid>
Top

Attributes

The <zg-column> tag is used to associate the columns of the grid to the values in a dataset. Attributes on the tag are used to configure both the data type, style, and function of the grid column. It is possible to build grids without explicit <zg-column> tags; ZingGrid will add a column for each index in the dataset. However, developers are encouraged to explore the features available with <zg-column> to utilize the powerful features ZingGrid has to offer.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-column index="firstName" header="First"></zg-column>
</zing-grid>

align

String

Description

Aligns the contents of the cell

Default Value

"left"

Accepted Values

  • "center"
  • "left"
  • "right"
Demo

Description

If the index is an array of objects, use array-index to indicate which index of the array object to include

Default Value

N/A

Accepted Values

  • "title"
Demo

array-slice

String | Number

Description

If the index is an array, you can use array-slice to indicate which array indexes to include.

Default Value

N/A

Accepted Values

  • "0,1", "-1", "0,4"
Demo

button-border

Boolean | String

Description

Presence of attribute forces a border on the button. Setting to disabled removes the default border.

Default Value

""

Accepted Values

  • N/A
Demo

Description

The type of word-break style for body cells. When not set, cell-break style is normal by default. If the width of a column is set, cell-break is word by default.

Default Value

"normal"

Accepted Values

  • "all"
  • "ellipsis"
  • "normal"
  • "word"
Demo

Description

The class to be set directly on <zg-cell> within the column. cell-class applied to <zg-column> will overwrite the cell-class applied to <zing-grid>.

Default Value

""

Accepted Values

  • "userCustomClass"
Demo

Description

Sets the execution method of custom 'icon' type tooltips to either activate on hover or click of the icon

Default Value

"hover"

Accepted Values

  • "click"
  • "hover"
Demo

Description

Sets the hover delay in milliseconds before displaying the tooltip

Default Value

1000

Accepted Values

  • 2000
Demo

Description

Specifies the icon to use for the cell tooltip trigger icon when using the info column type

Default Value

info

Accepted Values

  • "batchedit"
  • "batcheditcancel"
  • "batcheditsave"
  • "cancel"
  • "cancelrecord"
  • "checked"
  • "checkmark"
  • "close"
  • "createrecord"
  • "down"
  • "duplicaterecord"
  • "edit"
  • "editrecord"
  • "error"
  • "error-tmp"
  • "firstpage"
  • "fixedmenu"
  • "info"
  • "lastpage"
  • "layoutcard"
  • "layoutrow"
  • "link"
  • "menu"
  • "nextpage"
  • "outsidearrow"
  • "prevpage"
  • "reload"
  • "remove"
  • "removerecord"
  • "undoremoverecord"
  • "search"
  • "submitrecord"
  • "success"
  • "unchecked"
  • "up"
  • "warning"
Demo

Description

Sets the tooltip-position for the cell

Default Value

"top"

Accepted Values

  • "top"
  • "left"
  • "right"
  • "bottom"
Demo

Description

Gets the name of the user's custom render function, on window, to use the function's return value as the tooltip content

Default Value

""

Accepted Values

  • "functionName"
Demo

Description

Points to an external template element to be used as the template for the tooltip display

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

Description

Sets the tooltip text for the cell of the column. Can pass this value to renderer or template if using

Default Value

""

Accepted Values

  • "Tooltip Value"
Demo

Description

Sets the style to use for the tooltips. Uses the default style by default. Can set to system to match the tooltips used on icons throughout <zing-grid>.

Default Value

default

Accepted Values

  • "default"
  • "system"
Demo

Description

When an additional HTML element is added to the renderer, as in the case of image and url, content-style will be put into a style attribute directly on the element.

Default Value

""

Accepted Values

  • "max-width: 50px;"
Demo

content-width

String | Number

Description

Sets the width of the content inside of the cell. Used on cells of column type element, iframe, image, or url.

Default Value

""

Accepted Values

  • "500"
  • "500px"
  • 500
Demo

Description

The data to display in each cell where the data value is null or undefined

Default Value

""

Accepted Values

  • "N/A"
Demo

Description

Renderer for the details page of a column. To use a custom renderer, the attribute should be set to the name of the function. The renderer function takes in the following arguments, value of index (for each index), domCell, and cellObject. The returned value of the renderer function is set as the innerHTML of the details dialog.

Default Value

""

Accepted Values

  • "functionName"
Demo

Description

Points to an external template element to be used as the template for the column's details

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

drag

Boolean

Description

Disables the drag state of a specific column when column-drag enabled on <zing-grid>

Default Value

""

Accepted Values

  • "disabled"
Demo

editor

String | function

Description

Overrides the default editor for the column. Can be set to a different built-in editor (based on type of column), custom editor, or false to turn off editor. If set to a custom editor, the attribute value should be set to the name of the object. See "Features" page on "Editing: Custom Editor Grid" for more details on custom editor.

Default Value

""

Accepted Values

  • "columnType"
  • "objectName"
  • false
Demo

Description

Points to an external template element to be used as the template for the column's editor

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

filter

String | Boolean

Description

Overrides the grid level filter attribute. Presence of attribute enables the menu on filter column. Can be set to inline, menu, both, or disabled

Default Value

"menu"

Accepted Values

  • "menu"
  • "inline"
  • "both"
  • "disabled"
Demo

filter-buttons

String | Array

Description

Comma separated list of buttons to display on the filter menu

Default Value

"reset, apply"

Accepted Values

  • "reset"
  • "close"
  • "apply"
Demo

Description

The list of conditions to present as options in the filter menu condition select. Use "break" to display the horizontal separator. Use "default" to use the built in default.

Default Value

default

Accepted Values

  • "none"
  • "empty"
  • "notEmpty"
  • "equals"
  • "notEquals"
  • "beginsWith"
  • "endsWith"
  • "contains"
  • "notContains"
  • "between"
  • "notBetween"
  • "greaterThan"
  • "greaterEqualThan"
  • "lessThan"
  • "lessEqualThan"
  • "before"
  • "after"
  • "betweenDate"
  • "today"
  • "yesterday"
  • "tomorrow"
  • custom filter name
  • "break"
  • "default"
  • "trueVal"
  • "falseVal"
Demo

Description

Number of conditions to display in the filter menu on menu open

Default Value

1

Accepted Values

  • 2
Demo

Description

Max number of conditions to display in the filter menu

Default Value

1

Accepted Values

  • 5
Demo

Description

The condition to initially display on filter menu open

Default Value

"contains"

Accepted Values

  • "none"
  • "empty"
  • "notEmpty"
  • "equals"
  • "notEquals"
  • "beginsWith"
  • "endsWith"
  • "contains"
  • "notContains"
  • "between"
  • "notBetween"
  • "greaterThan"
  • "greaterEqualThan"
  • "lessThan"
  • "lessEqualThan"
  • "before"
  • "after"
  • "betweenDate"
  • "today"
  • "yesterday"
  • "tomorrow"
  • custom filter name
Demo

Description

Sets the data field index to filter on if index itself has multiple fields. The value set in index is the default.

Default Value

""

Accepted Values

  • "city"
Demo

Description

Sets the key for server side filtering. By default the filterKey is set to the filterIndex value.

Default Value

the value of the column's filterIndex

Accepted Values

  • "full-name"
Demo

Description

The areas to display in the filter menu. Can be conditions, selectbox, or both

Default Value

"both"

Accepted Values

  • "conditions"
  • "selectbox"
  • "both"
Demo

Description

Determines if the filter comparison should be against the raw values or the rendered This only applies to conditionals in the filter menu. For iframe column type, it is restricted to raw values. For aggregate column type, it is restricted to rendered values.

Default Value

"raw"

Accepted Values

  • "raw"
  • "rendered"
Demo

Description

Determines if the selectbox in the filter menu should display the values as raw or rendered values.

Default Value

"raw"

Accepted Values

  • "raw"
  • "rendered"
Demo

Description

Action that fires the filter event from the filter menu.

Default Value

"button"

Accepted Values

  • "button"
  • "change"
Demo

filterer

function

Description

Overrides the default filterer for the column. Can be set to a different built-in filterer or to a custom filterer
If set to a custom filterer, the attribute value should either be set to the object that contains: init, afterInit, value, setValue, and triggerEvent OR it can be set to a function that will be used for the value method which will fire on filter change. Note that the custom filterer only applies to the inline filter and not the conditions or select box options (filter menu).

Default Value

No Default Value

Accepted Values

  • "myFilterer"
Demo

Description

The aggregate function, tokenized string, or function to evaluate for the foot cell of the column. If using a function, the function takes the parameters columnData and columnFieldIndex.

Default Value

""

Accepted Values

  • "sum"
  • "avg"
  • "max"
  • "min"
  • "count"
  • "tokenized string"
  • "functionName"
Demo

frozen

String

Description

Moves the column to the frozen panel specified

Default Value

"left"

Accepted Values

  • "left"
  • "right"
Demo

group

Boolean

Description

Includes the column to the row-group column. To enable features on grouped row columns, set attributes on ZGColumn[type="row-group"]. All other attributes on the [group] column(s) are ignored.

Default Value

""

Accepted Values

  • N/A
Demo

Description

Sets a head cell on the column in the grouped row.

Default Value

""

Accepted Values

  • "sum"
  • "avg"
  • "max"
  • "min"
  • "count"
  • "tokenized string"
  • "functionName"
Demo

Description

The aggregate function to evaluate for the head cell of the column. If using a function, the function takes the parameters columnData and columnFieldIndex.

Default Value

""

Accepted Values

  • "sum"
  • "avg"
  • "max"
  • "min"
  • "count"
  • "tokenized string"
  • "functionName"
Demo

header

String

Description

The header name for the column. If it is not set, the default is to format the index value.

Default Value

"index"

Accepted Values

  • "My Header"
Demo

Description

Setting to disabled will turn off formatting on the header of the column. By default, headers will convert camel, dash, or kebab case to a properly spaced and capitalized string. Or set to a function name to customize formatting of header text. The custom function takes in two parameters, index and headerText, and returns the formatted header text.

Default Value

""

Accepted Values

  • "disabled"
  • "functionName"
Demo

Description

Sets the execution method of custom 'icon' type tooltips to either activate on hover or click of the icon

Default Value

"hover"

Accepted Values

  • "click"
  • "hover"
Demo

Description

Sets the hover delay in milliseconds before displaying the header tooltip

Default Value

0

Accepted Values

  • 2000
Demo

Description

Specifies the icon to use for the header tooltip trigger icon

Default Value

info

Accepted Values

  • 'checkmark'
Demo

Description

Sets the tooltip icon position for the tooltip icon in the header cells

Default Value

"right"

Accepted Values

  • "left"
  • "right"
  • "after-text"
Demo

Description

Sets the tooltip-position for the header cell

Default Value

"top"

Accepted Values

  • "top"
  • "left"
  • "right"
  • "bottom"
Demo

Description

Gets the name of the user's custom render function, on window, to use the function's return value as the tooltip content

Default Value

""

Accepted Values

  • "functionName"
Demo

Description

Points to an external template element to be used as the template for the tooltip display

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

Description

Sets the tooltip text for the header cell of the column. Can pass this value to renderer or template if using

Default Value

""

Accepted Values

  • "Tooltip Value"
Demo

Description

Sets what part of the header triggers the tooltip. If set to 'icon', an info icon is added to the header.

Default Value

text

Accepted Values

  • "text"
  • "icon"
Demo

Description

Sets the style to use for the tooltips. Uses the default style by default. Can set to system to match the tooltips used on icons throughout <zing-grid>.

Default Value

default

Accepted Values

  • "default"
  • "system"
Demo

hidden

Boolean

Description

Presence of attribute hides the column

Default Value

""

Accepted Values

  • N/A
Demo

index

String

Description

A single index or multiple indices (separated by comma), to associate information in the data source to a column in the grid. Nested data keys are referenced by the member character . (Ex. data.key).

Default Value

""

Accepted Values

  • "recordkey"
  • "key1"
  • "object.key1"
  • "key1, key2, keyN"
Demo

locale

String

Description

Localization code used with column type currency and number

Default Value

"en-us"

Accepted Values

  • "de-De"
Demo

Description

The text to display in the control menu for the column. If it is not set, it is set to the header text.

Default Value

"index"

Accepted Values

  • "My Header"
Demo

Description

Sets the minimum width of the column in pixels

Default Value

n/a

Accepted Values

  • 150
Demo

renderer

String

Description

Overrides the default renderer for the column. Can be set to a different built-in or custom renderer. To use a custom renderer, the attribute should be set to the name of the function. The renderer function takes in the following arguments, value of index (for each index), domCell, and cellObject. The returned value of the renderer function is set as the innerHTML of the cell.

Default Value

""

Accepted Values

  • "functionName"
Demo

Description

Points to an external template element to be used as the template for the column's renderer

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

required

Boolean

Description

Indicates that the column is required to have a value on edit

Default Value

{"type":"","bReflectToAttribute":true,"mapping":"bRequired"}

Accepted Values

  • N/A
Demo

Description

Turns on column resizing for single column. Set to disabled to turn off resizing on a single column.

Default Value

""

Accepted Values

  • "disabled"
Demo

Description

Sets the maximum width the column can be set to when resizing

Default Value

n/a

Accepted Values

  • 150
Demo

Description

Sets the minimum width the column can be set to when resizing

Default Value

n/a

Accepted Values

  • 150
Demo

Description

Modifies the default column resizable persistence. Set to disabled to turn off persistence on a single column.

Default Value

No Default Value

Accepted Values

No Example Values Demo

search

String

Description

Turns off the search on a column if search is present on <zing-grid>

Default Value

""

Accepted Values

  • "disabled"
Demo

Description

If multiple indices are set, this is the string that separates them in the display. By default, it is a comma.

Default Value

","

Accepted Values

  • "-"
Demo

sort

String

Description

Turns off the sort on a column if sort is present on <zing-grid>

Default Value

""

Accepted Values

  • "disabled"
Demo

sort-asc

Boolean

Description

Presence of attribute sorts the column data in ascending order

Default Value

""

Accepted Values

  • N/A
Demo

sort-desc

Boolean

Description

Presence of attribute sorts the column data in descending order

Default Value

""

Accepted Values

  • N/A
Demo

Description

Overrides default behavior for setting special sort for international data

Default Value

""

Accepted Values

  • "disabled"
Demo

sorter

String

Description

Overrides the default sorter for the column. It is also possible to override the column sorting by passing in method name of sort function instead or setting to disabled to disable sorting. Sorter function takes in two values (a, b) and returns 1, -1, or 0 indicating if a > b, a < b, or a = b. Can also be set to a path in the dataset to perform the sort on. This is useful for sorting object indices.

Default Value

""

Accepted Values

  • "functionName"
Demo

type

String

Description

The type of the data stored in the column. The column renderer/editor will behave based on the column type.

Default Value

""

Accepted Values

  • aggregate
  • boolean
  • button
  • checkbox
  • color
  • currency
  • custom
  • date
  • duplicate
  • editor
  • element
  • email
  • icon
  • image
  • iframe
  • number
  • password
  • percentage
  • radio
  • range
  • remover
  • row-group
  • row-number
  • select
  • selector
  • tel
  • text
  • toggle
  • url
Demo

Description

Presence of attribute ignores the column in aggregation calculations

Default Value

""

Accepted Values

  • N/A
Demo

Description

The token or aggregate value to use to display if the column is an aggregation column

Default Value

undefined

Accepted Values

  • "sum"
  • "avg"
  • "max"
  • "min"
  • "count"
  • "tokenized string"
  • "functionName"
Demo

Description

Presence of attribute sets the button to be in a disabled state. Can also set to "true" or "false".

Default Value

""

Accepted Values

  • N/A
Demo

Description

When the column type is set to button, use typeButtonHander to hook up a function call to the button click. Callback receives rowData, zg-cell DOM, and zg-cell object as arguments.

Default Value

undefined

Accepted Values

  • 'buttonClick'
Demo

Description

When the column type is set to button, use typeButtonIcon to add an icon next to the rendered button in the cell

Default Value

undefined

Accepted Values

  • 'checkmark'
Demo

Description

When the column type is set to button, use typeButtonLabel to add a label to the rendered button in the cell

Default Value

undefined

Accepted Values

  • 'Label'
Demo

Description

When the column type is set to button, use typeButtonTooltip to add a tooltip to the rendered button in the cell

Default Value

undefined

Accepted Values

  • 'Tooltip'
Demo

Description

When the column type is set to button, use typeButtonURL to add a shortcut handler on button click. The click will automatically open the url in a new window.

Default Value

undefined

Accepted Values

  • 'https://www.example.com/'
Demo

Description

When the column type is set to checkbox, use typeCheckboxLabel to add a label next to the rendered checkbox in the cell

Default Value

undefined

Accepted Values

  • 'Label'
Demo

Description

Sets the color mode to configure the color picker. Choose between HSL, RGBA, and the default Hex.

Default Value

"hex"

Accepted Values

  • "color: #ff9900;"
Demo

Description

Disable the default color swatch UI preview with a false value.

Default Value

true

Accepted Values

  • ""
Demo

Description

By default, spaces are added into the color when in RGB or HSL mode. Turn the spaces off by setting to disabled

Default Value

true

Accepted Values

  • ""
Demo

Description

The currency to be used in currency formatting. Currency is set using using the 3 letter currency code specified by ISO 4217 specification (https://en.wikipedia.org/wiki/ISO_4217)

Default Value

"USD" | "EUR"

Accepted Values

No Example Values Demo

Description

The tokenized formatting for a date column

Default Value

Browser Default based on locale

Accepted Values

  • "dddd, MMMM Do YYYY"
Demo

Description

Indicates if date should be displayed in FromNow format

Default Value

n/a

Accepted Values

  • n/a
Demo

Description

Sets the attribute of the custom-element in the column when <zg-column> has type set to element

Default Value

""

Accepted Values

  • "attributeName"
Demo

Description

Sets the tag to wrap content when <zg-column> has type set to element. If type-element-attribute-name isn't set, it will put the rendered data into the body of the element. If type-element-attribute-name is set, it will set the attribute to the indexed value.

Default Value

""

Accepted Values

No Example Values Demo

Description

Presence of the attribute disables the display of the row count on the row-group column

Default Value

""

Accepted Values

  • N/A
Demo

Description

Indicates the word to use if the count is plural or singular. Comma separated with singular first. The word can be referenced by the token group.plural and is used in a renderer or template.

Default Value

""

Accepted Values

  • "person,people"
Demo

Description

Sets a square ratio instead of the default 16:9

Default Value

'square'

Accepted Values

  • "square"
Demo

Description

The alternative text used with the image type column

Default Value

Full Image URL

Accepted Values

  • "Logo"
Demo

Description

The alternative shape to mask the image

Default Value

N/A

Accepted Values

  • "circle"
Demo

Description

If the column type is image, use the type-image-src attribute to set the src for the image. The src will be the index value by default.

Default Value

""

Accepted Values

  • "https://www.example.com/[[index.shortImg]]"
Demo

Description

Indicates the exact numbers to display after the decimal

Default Value

{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberDecimals","bRefreshContent":true}

Accepted Values

  • 2
Demo

Description

Set to "disabled" to turn off default number formatting

Default Value

{"bReflectToAttribute":true,"type":"","mapping":"sTypeNumberFormatting","bRefreshContent":true}

Accepted Values

  • "disabled"
Demo

Description

Indicates the maximum numbers to display after the decimal

Default Value

{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMaxDecimals","bRefreshContent":true}

Accepted Values

  • 2
Demo

Description

Indicates the minimum numbers to display after the decimal

Default Value

{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMinDecimals","bRefreshContent":true}

Accepted Values

  • 2
Demo

type-radio-options

Array | String

Description

When the column type is set to radio, use typeRadioOptions to add rendered radio options in the cell. Can also set as array of name/value pairs where the name is displayed for the given value

Default Value

undefined

Accepted Values

  • 'one,two,three'
Demo

Description

Maximum value for the input box. Used with the range type column in edit mode.

Default Value

100

Accepted Values

  • 150
Demo

Description

Minimum value for the input box. Used with range type column in edit mode.

Default Value

0

Accepted Values

  • 100
Demo

Description

Specifies the step between each legal value for the input box. Used with range type column in edit mode.

Default Value

1

Accepted Values

  • 20
Demo

Description

The default value of a new record. The select box in the create record will default to the specified value.

Default Value

""

Accepted Values

  • "M"
Demo

Description

In edit mode, presence of attribute allows column type select to have multiple selections, instead of the default of a single selection

Default Value

""

Accepted Values

  • N/A
Demo

type-select-options

String | Array

Description

To set the options for the select box for a select column when editor is enabled on <zing-grid>. Can also set as array of name/value pairs where the name is displayed for the given value

Default Value

""

Accepted Values

  • "M, T, W, Th, F"
  • [{"name": "Monday", "value": "M"}, {"name": "Tuesday", "value": "T"}, {"name": "Wednesday", "value": "W"}, {"name": "Thursday", "value": "Th"}, {"name": "Friday", "value": "F"}]
Demo

Description

When the column type is set to toggle, use typeToggleOptions to set the list of options for the display.

Default Value

[]

Accepted Values

  • ["red", "orange", "yellow", "green", "blue"]
Demo

Description

When the column type is set, the render and value will be the same. This prevents the default creating of true/false for toggles.

Default Value

false

Accepted Values

  • N/A
Demo

Description

If the column type is url, use this attribute to reference any <zg-icon> within the library to replace the link text with this icon.

Default Value

""

Accepted Values

  • "link"
  • "outsidearrow"
Demo

Description

If the column type is url, use the type-url-src attribute to set the src for the link. The link will be the index value by default.

Default Value

""

Accepted Values

  • "https://www.example.com/?searchfor=[[index.id]]"
Demo

Description

If the column type is url, use this attribute to set the target window of the click. Uses the same values as HTML <a> [target] attribute. _blank by default

Default Value

"_blank"

Accepted Values

  • "_self"
Demo

Description

If the column type is url, use the type-url-text attribute to set the text displayed for the link.

Default Value

""

Accepted Values

  • "Go to site"
Demo

Description

Sets the validation error message for the column. Overrides any other settings.

Default Value

N/A

Accepted Values

  • "Please provide valid input."
Demo

Description

Sets the validation required message for the column. Overrides any other settings.

Default Value

N/A

Accepted Values

  • "This field is required"
Demo

validator

String | function

Description

Sets the validation method for the column. Overrides the default for the column type

Default Value

N/A

Accepted Values

  • "number"
Demo

Description

Used in the case of automatically removing columns on resize. Columns without a visibility-priority never gets removed. The rest of the columns are removed from highest visibility-priority value to the lowest.

Default Value

""

Accepted Values

  • 2
Demo

width

String | Number

Description

Sets the width of the column.

Default Value

fit

Accepted Values

  • "fit"
  • "fitheader"
  • "fitcontent"
  • "stretch"
  • "10%"
  • "150px"
  • 150
Demo
Top

Type Attribute Values

Below is a list of the accepted values for the type attribute:

zg-column type Values
Name Description Demo
aggregate Will render a column containing the aggregate value of each row. Specify aggregate calculation with [typeAggregateValue] to return the aggregate of columns and rows. When [footCell] or [headCell] is set without [typeAggregateValue] to return the aggregate of all numeric value grid cells.
boolean Will render a true|false string value and the editor will use an input field with type="checkbox"
button Will render a button and the editor is disabled
checkbox Will render a checkbox that can be toggled
color Will render a preview of the color and display a color picker when editing the cell
currency Will render the currency symbol in front of the number and the editor will use an input field with type="number"
custom Will slot in column content and allow referencing data via [[index.key]] or [[record.key]], and the editor will use an input field with type="text"
date Will render the date as a string value and the editor will use an input field with type="date" expecting (dd/mm/yyyy) dates
duplicate A render only field to display an icon to duplicate the record on click.
editor A render only field to display an icon to edit the record on click
element Will wrap cell content with value specified in [type-element-tag-name] with the attribute specified in [type-element-attribute-name]
email Will render a string value and the editor will use an input field with type="email"
icon A render only field to 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. Editing will use an input field with type="text".
image Will render an <img> and the editor will use an input field with type="text".
iframe A render only field to display an <iframe>. Editing will use an input field with type="text".
number Will render a number as a thousand's separated string value and the editor will use an input field with type="number".
password Will render a hidden string value and the editor will use an input field with type="password".
percentage Will render a number as a percentage string value and the editor will use an input field with type="number".
radio Will render selected option in cell and the editor will use an radio options specified in typeRadioOptions.
range Will render a number as a thousand's separated string value and the editor will use an input field with type="number" with optional min, max and step fields defined on the input.
remover A render only field to display an icon to remove the record on click.
row-group A render only field to display the row grouping.
row-number A render only field to display the current row index of this row.
select Will render a string value and the editor will use an input field with type="select".
selector A render only field to display an checkbox to selector and remove the record on click.
tel Will render a string value and the editor will use an input field with type="tel".
text (Default Type) Sets the column type to text.
toggle N/A
url Will render the field to to display an <a> tag. The editor will use an input field with type="text".
Top

CSS Variables

No CSS variables are available for the <zg-column> tag.

Top

CSS Selector

No CSS selectors are available for the <zg-column> tag.

Top

Slots

<zg-column> contains placeholders to allow adding markup inside the component.

<zg-column>Slotted Content</zg-column>

Below is a list of all the associated ZGColumn slots. Check out the full list of slots.

ZGColumn Slots
Name Description Demo
Custom column content.
Top

[api: <zg-column>]

On This Page