---
title: "ZingGrid Web Component: <zg-column> | Docs"
description: "View our in depth tutorial covering the web component `<zg-column>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-column
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-column.md
mode: provenance
representation: markdown
origin_response_id: 77b7cabbc4f1c64853d8dc7a08c269b2
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.625Z
version_nonce: 65e42a605ec03129eb7a856876a64645
generated_at_utc: 2026-11-08T23:36:17.276Z
response_nonce: 33f1abd09571c73a55dc2f2aaebba669
```

# `<zg-column>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-column--docs)

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](https://www.zinggrid.com/docs/guides/column).

![Image of the DOM relationship for the zg-column web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-column-web-component-dom.png "Image of the DOM relationship for the zg-column web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGColgroup](https://www.zinggrid.com/docs/api/tags/zg-colgroup) | Parent | Generated, Manual | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a |
| [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a |
| [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-colgroup>`](https://www.zinggrid.com/docs/api/tags/zg-colgroup/)
- [`<zg-cell>`](https://www.zinggrid.com/docs/api/tags/zg-cell/)
- [`<zg-row>`](https://www.zinggrid.com/docs/api/tags/zg-row/)

## Usage

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

```html
<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>
```

## 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**

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

### align

Aligns the contents of the cell

- Type: String
- Default: `"left"`
- Accepted values: "center", "left", "right"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2E2VU1NK)

### array-index

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

- Type: String
- Accepted values: "title"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NI7I2MVM)

### array-slice

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

- Type: String | Number
- Accepted values: "0,1", "-1", "0,4"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QGP7YD9P)

### button-border

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

- Type: Boolean | String
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7L8FS2YW)

### cell-break

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.

- Type: String
- Default: `"normal"`
- Accepted values: "all", "ellipsis", "normal", "word", "none"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/EBYE5QDQ)

### cell-class

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

- Type: String
- Default: `""`
- Accepted values: "userCustomClass"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/UK4ATT1M)

### cell-tooltip-action

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

- Type: String
- Default: `"hover"`
- Accepted values: "click", "hover"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/V1ZLD20G)

### cell-tooltip-delay

Sets the hover delay in milliseconds before displaying the tooltip

- Type: Number
- Default: `1000`
- Accepted values: 2000
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ALCQX5KK)

### cell-tooltip-icon

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

- Type: String
- Default: `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"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/6PYU72NM)

### cell-tooltip-position

Sets the tooltip-position for the cell

- Type: String
- Default: `"top"`
- Accepted values: "top", "left", "right", "bottom"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/M23UZDB2)

### cell-tooltip-renderer

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

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NP2WIJZS)

### cell-tooltip-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VX47FJSI)

### cell-tooltip-text

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

- Type: String
- Default: `""`
- Accepted values: "Tooltip Value"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZU3CJEUG)

### cell-tooltip-type

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

- Type: String
- Default: `default`
- Accepted values: "default", "system"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0QC6J7QP)

### content-style

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.

- Type: String
- Default: `""`
- Accepted values: "max-width: 50px;"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SDSDOG9U)

### content-width

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

- Type: String | Number
- Default: `""`
- Accepted values: "500", "500px", 500
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/98S6N0H1)

### default-display

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

- Type: String
- Default: `""`
- Accepted values: "N/A"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/UT0I51BC)

### details-renderer

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/R5UTQ925)

### details-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2HFZ73WX)

### drag

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

- Type: Boolean
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/Y3HFXG3D)

### editor

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.

- Type: String | function
- Default: `""`
- Accepted values: "columnType", "objectName", false
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/U9KA82K8)

### editor-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/G5FN1ZAB)

### filter

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

- Type: String | Boolean
- Default: `"menu"`
- Accepted values: "menu", "inline", "both", "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/MEUDAXS9)

### filter-buttons

Comma separated list of buttons to display on the filter menu

- Type: String | Array
- Default: `"reset, apply"`
- Accepted values: "reset", "close", "apply"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/TUY6XOOT)

### filter-conditions

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.

- Type: String
- Default: `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"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KAENBEQ4)

### filter-conditions-display

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

- Type: Number
- Default: `1`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/YSC0Q3K9)

### filter-conditions-max

Max number of conditions to display in the filter menu

- Type: Number
- Default: `1`
- Accepted values: 5
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/FW97GV9E)

### filter-default-condition

The condition to initially display on filter menu open

- Type: String
- Default: `"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
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VZ0QTIXU)

### filter-index

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

- Type: String
- Default: `""`
- Accepted values: "city"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ABCQFCFA)

### filter-key

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

- Type: String
- Default: `the value of the column's filterIndex`
- Accepted values: "full-name"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5O772NYE)

### filter-menu-areas

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

- Type: String
- Default: `"both"`
- Accepted values: "conditions", "selectbox", "both"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5EBI08WX)

### filter-on

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.

- Type: String
- Default: `"raw"`
- Accepted values: "raw", "rendered"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KHO0OOE2)

### filter-selectbox-display

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

- Type: String
- Default: `"raw"`
- Accepted values: "raw", "rendered"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7ZY0ZKY3)

### filter-trigger

Action that fires the filter event from the filter menu.

- Type: String
- Default: `"button"`
- Accepted values: "button", "change"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/M0K8WL13)

### filterer

Overrides the default filterer for the column. Can be set to a different built-in filterer or to a custom filterer<br> 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).

- Type: function
- Accepted values: "myFilterer"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VDGE1CV7)

### foot-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/MLMKU2EP)

### frozen

Moves the column to the frozen panel specified

- Type: String
- Default: `"left"`
- Accepted values: "left", "right"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7APRNW8H)

### group

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.

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/1V86Y3OC)

### group-head-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QF7D4W6G)

### head-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2MABJWGE)

### header

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

- Type: String
- Default: `"index"`
- Accepted values: "My Header"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AHKN3N0A)

### header-auto-format

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.

- Type: String
- Default: `""`
- Accepted values: "disabled", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0QT0ZBDJ)

### header-tooltip-action

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

- Type: String
- Default: `"hover"`
- Accepted values: "click", "hover"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/T5MIH3ZJ)

### header-tooltip-delay

Sets the hover delay in milliseconds before displaying the header tooltip

- Type: Number
- Default: `0`
- Accepted values: 2000
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OWLEJ17A)

### header-tooltip-icon

Specifies the icon to use for the header tooltip trigger icon

- Type: String
- Default: `info`
- Accepted values: 'checkmark'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/DZGNBHVO)

### header-tooltip-icon-position

Sets the header icon position in the header cells

- Type: String
- Default: `"left"`
- Accepted values: "left", "right", "after-text"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5K6K6TNE)

### header-tooltip-icon-position

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

- Type: String
- Default: `"right"`
- Accepted values: "left", "right", "after-text"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/3PD1IQ2O)

### header-tooltip-position

Sets the tooltip-position for the header cell

- Type: String
- Default: `"top"`
- Accepted values: "top", "left", "right", "bottom"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/W1QE4CKI)

### header-tooltip-renderer

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

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SZBBLQ3B)

### header-tooltip-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AEP72BQH)

### header-tooltip-text

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

- Type: String
- Default: `""`
- Accepted values: "Tooltip Value"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZNA3E1ZA)

### header-tooltip-trigger

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

- Type: String
- Default: `text`
- Accepted values: "text", "icon"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IUS7B65M)

### header-tooltip-type

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

- Type: String
- Default: `default`
- Accepted values: "default", "system"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/4VUQ8QJO)

### headerIcon

Adds an icon next to the header text.

- Type: String
- Default: `""`
- Accepted values: "outsidearrow"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KVGW2Y7J)

### hidden

Presence of attribute hides the column

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/HV082G0U)

### index

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

- Type: String
- Default: `""`
- Accepted values: "recordkey", "key1", "object.key1", "key1, key2, keyN"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9NCUR9F6)

### locale

Localization code used with column type `currency` and `number`

- Type: String
- Default: `"en-us"`
- Accepted values: "de-De"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OVT2NU0P)

### menu-text

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

- Type: String
- Default: `"index"`
- Accepted values: "My Header"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2IVY5RXA)

### min-width

Sets the minimum width of the column in pixels

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LBHD4C38)

### renderer

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/K23DK1S3)

### renderer-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/XFAAAWV8)

### required

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

- Type: Boolean
- Default: `{"type":"","bReflectToAttribute":true,"mapping":"bRequired"}`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/XUPF06BF)

### resizable

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0JT243X2)

### resizable-max-width

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

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NAAVS052)

### resizable-min-width

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

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QL1FNFJA)

### resizablePersistent

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

- Type: Boolean
- Supported versions: 2.x

### search

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CLWPU7EF)

### separator

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

- Type: String
- Default: `","`
- Accepted values: "-"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CPPYOYHM)

### sort

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/P8AYYNEK)

### sort-asc

Presence of attribute sorts the column data in ascending order

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7YFFO3N2)

### sort-desc

Presence of attribute sorts the column data in descending order

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7YFFO3N2)

### sort-intl

Overrides default behavior for setting special sort for international data

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/420MNZQE)

### sorter

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AWR08X5U)

### type

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

- Type: String
- Default: `""`
- Accepted values: aggregate, boolean, button, checkbox, color, currency, custom, date, duplicate, editor, element, email, emoji, icon, image, iframe, number, password, percentage, radio, range, remover, row-group, row-number, select, selector, tel, text, toggle, url
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/X5U3C30T)

### type-aggregate-omit

Presence of attribute ignores the column in aggregation calculations

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SK9EPCZS)

### type-aggregate-value

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

- Type: String
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/093GV5N3)

### type-button-disabled

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IX3EMQE5)

### type-button-handler

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

- Type: String
- Accepted values: 'buttonClick'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5KOTS7K4)

### type-button-icon

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

- Type: String
- Accepted values: 'checkmark'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OZWC8PUN)

### type-button-label

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

- Type: String
- Accepted values: 'Label'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/PW4V2ETW)

### type-button-tooltip

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

- Type: String
- Accepted values: 'Tooltip'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AQ5I7JP2)

### type-button-url

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.

- Type: String
- Accepted values: 'https://www.example.com/'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NDETJCG1)

### type-checkbox-label

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

- Type: String
- Accepted values: 'Label'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NP9MOB3X)

### type-color-mode

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

- Type: String
- Default: `"hex"`
- Accepted values: "color: #ff9900;"
- Supported versions: 1.x, 2.x

### type-color-preview

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

- Type: Boolean
- Default: `true`
- Accepted values: ""
- Supported versions: 1.x, 2.x

### type-color-spaces

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

- Type: String
- Default: `true`
- Accepted values: ""
- Supported versions: 1.x, 2.x

### type-currency

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)

- Type: String
- Default: `"USD" | "EUR"`
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/GFES04TQ)

### type-date-format

The tokenized formatting for a date column

- Type: String
- Default: `Browser Default based on locale`
- Accepted values: "dddd, MMMM Do YYYY"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CO0KH0B8)

### type-date-from-now

Indicates if date should be displayed in FromNow format

- Type: Boolean
- Default: `n/a`
- Accepted values: n/a
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IAGMQ14H)

### type-element-attribute-name

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

- Type: String
- Default: `""`
- Accepted values: "attributeName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LNADIAME)

### type-element-tag-name

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.

- Type: String
- Default: `""`
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ATEG1H8V)

### type-emoji-shortcode

Set to function to convert shortcodes to emojis

- Type: String
- Default: `""`
- Accepted values: "shortcodeConverter"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/08MRBQOM)

### type-group-hide-count

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VKCXNCU6)

### type-group-plural

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.

- Type: String
- Default: `""`
- Accepted values: "person,people"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/99NOEJ3E)

### type-iframe-ratio

Sets a `square` ratio instead of the default `16:9`

- Type: String
- Default: `'square'`
- Accepted values: "square"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CMXG73AF)

### type-image-alt

The alternative text used with the `image` type column

- Type: String
- Default: `Full Image URL`
- Accepted values: "Logo"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/E77C24KU)

### type-image-mask

The alternative shape to mask the image

- Type: String
- Accepted values: "circle"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LXCGPDZD)

### type-image-src

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.

- Type: String
- Default: `""`
- Accepted values: "https://www.example.com/[[index.shortImg]]"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5A1UF54Z)

### type-number-decimals

Indicates the exact numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-number-formatting

Set to "disabled" to turn off default number formatting

- Type: String
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"sTypeNumberFormatting","bRefreshContent":true}`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LCOCD7Z5)

### type-number-max-decimals

Indicates the maximum numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMaxDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-number-min-decimals

Indicates the minimum numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMinDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-radio-options

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

- Type: Array | String
- Accepted values: 'one,two,three'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/41C9I817)

### type-range-max

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

- Type: Number
- Default: `100`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/X7FZSCAS)

### type-range-min

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

- Type: Number
- Default: `0`
- Accepted values: 100
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/S4IQMYFF)

### type-range-step

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

- Type: Number
- Default: `1`
- Accepted values: 20
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0DBR208U)

### type-select-default-value

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

- Type: String
- Default: `""`
- Accepted values: "M"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0E6JVOFK)

### type-select-multiple

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0OP35J9R)

### type-select-options

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

- Type: String | Array
- Default: `""`
- 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"}]
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0OP35J9R)

### type-selector-page-persist

Keeps the selected rows selected even on page change. This means that rows can be selected and not on the current page.

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/9T4P7ZG5)

### type-toggle-options

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

- Type: Array
- Default: `[]`
- Accepted values: ["red", "orange", "yellow", "green", "blue"]
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/BWSBRL9C)

### type-toggle-render-value

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

- Type: Boolean
- Default: `false`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/W88ROFBK)

### type-url-icon

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.

- Type: String
- Default: `""`
- Accepted values: "link", "outsidearrow"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/51XKWSN3)

### type-url-src

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.

- Type: String
- Default: `""`
- Accepted values: "https://www.example.com/?searchfor=[[index.id]]"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9H6VZVVU)

### type-url-target

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

- Type: String
- Default: `"_blank"`
- Accepted values: "_self"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9EJ6RLKQ)

### type-url-text

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

- Type: String
- Default: `""`
- Accepted values: "Go to site"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/Z3WKG5XL)

### validation-error-message

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

- Type: String
- Accepted values: "Please provide valid input."
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/B6KISBZ0)

### validation-required-message

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

- Type: String
- Accepted values: "This field is required"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0247YIAM)

### validator

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

- Type: String | function
- Accepted values: "number"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VYY009C8)

### visibility-priority

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.

- Type: Number
- Default: `""`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/HMLS88C7)

### width

Sets the width of the column.

- Type: String | Number
- Default: `fit`
- Accepted values: "fit", "fitheader", "fitcontent", "stretch", "10%", "150px", 150, min-content, max-content
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/L0JW9BEW)

## Type Attribute Values

### align

Aligns the contents of the cell

- Type: String
- Default: `"left"`
- Accepted values: "center", "left", "right"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2E2VU1NK)

### array-index

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

- Type: String
- Accepted values: "title"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NI7I2MVM)

### array-slice

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

- Type: String | Number
- Accepted values: "0,1", "-1", "0,4"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QGP7YD9P)

### button-border

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

- Type: Boolean | String
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7L8FS2YW)

### cell-break

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.

- Type: String
- Default: `"normal"`
- Accepted values: "all", "ellipsis", "normal", "word", "none"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/EBYE5QDQ)

### cell-class

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

- Type: String
- Default: `""`
- Accepted values: "userCustomClass"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/UK4ATT1M)

### cell-tooltip-action

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

- Type: String
- Default: `"hover"`
- Accepted values: "click", "hover"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/V1ZLD20G)

### cell-tooltip-delay

Sets the hover delay in milliseconds before displaying the tooltip

- Type: Number
- Default: `1000`
- Accepted values: 2000
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ALCQX5KK)

### cell-tooltip-icon

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

- Type: String
- Default: `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"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/6PYU72NM)

### cell-tooltip-position

Sets the tooltip-position for the cell

- Type: String
- Default: `"top"`
- Accepted values: "top", "left", "right", "bottom"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/M23UZDB2)

### cell-tooltip-renderer

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

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NP2WIJZS)

### cell-tooltip-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VX47FJSI)

### cell-tooltip-text

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

- Type: String
- Default: `""`
- Accepted values: "Tooltip Value"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZU3CJEUG)

### cell-tooltip-type

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

- Type: String
- Default: `default`
- Accepted values: "default", "system"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0QC6J7QP)

### content-style

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.

- Type: String
- Default: `""`
- Accepted values: "max-width: 50px;"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SDSDOG9U)

### content-width

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

- Type: String | Number
- Default: `""`
- Accepted values: "500", "500px", 500
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/98S6N0H1)

### default-display

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

- Type: String
- Default: `""`
- Accepted values: "N/A"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/UT0I51BC)

### details-renderer

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/R5UTQ925)

### details-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2HFZ73WX)

### drag

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

- Type: Boolean
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/Y3HFXG3D)

### editor

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.

- Type: String | function
- Default: `""`
- Accepted values: "columnType", "objectName", false
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/U9KA82K8)

### editor-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/G5FN1ZAB)

### filter

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

- Type: String | Boolean
- Default: `"menu"`
- Accepted values: "menu", "inline", "both", "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/MEUDAXS9)

### filter-buttons

Comma separated list of buttons to display on the filter menu

- Type: String | Array
- Default: `"reset, apply"`
- Accepted values: "reset", "close", "apply"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/TUY6XOOT)

### filter-conditions

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.

- Type: String
- Default: `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"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KAENBEQ4)

### filter-conditions-display

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

- Type: Number
- Default: `1`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/YSC0Q3K9)

### filter-conditions-max

Max number of conditions to display in the filter menu

- Type: Number
- Default: `1`
- Accepted values: 5
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/FW97GV9E)

### filter-default-condition

The condition to initially display on filter menu open

- Type: String
- Default: `"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
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VZ0QTIXU)

### filter-index

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

- Type: String
- Default: `""`
- Accepted values: "city"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ABCQFCFA)

### filter-key

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

- Type: String
- Default: `the value of the column's filterIndex`
- Accepted values: "full-name"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5O772NYE)

### filter-menu-areas

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

- Type: String
- Default: `"both"`
- Accepted values: "conditions", "selectbox", "both"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5EBI08WX)

### filter-on

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.

- Type: String
- Default: `"raw"`
- Accepted values: "raw", "rendered"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KHO0OOE2)

### filter-selectbox-display

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

- Type: String
- Default: `"raw"`
- Accepted values: "raw", "rendered"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7ZY0ZKY3)

### filter-trigger

Action that fires the filter event from the filter menu.

- Type: String
- Default: `"button"`
- Accepted values: "button", "change"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/M0K8WL13)

### filterer

Overrides the default filterer for the column. Can be set to a different built-in filterer or to a custom filterer<br> 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).

- Type: function
- Accepted values: "myFilterer"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VDGE1CV7)

### foot-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/MLMKU2EP)

### frozen

Moves the column to the frozen panel specified

- Type: String
- Default: `"left"`
- Accepted values: "left", "right"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7APRNW8H)

### group

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.

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/1V86Y3OC)

### group-head-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QF7D4W6G)

### head-cell

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

- Type: String
- Default: `""`
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2MABJWGE)

### header

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

- Type: String
- Default: `"index"`
- Accepted values: "My Header"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AHKN3N0A)

### header-auto-format

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.

- Type: String
- Default: `""`
- Accepted values: "disabled", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0QT0ZBDJ)

### header-tooltip-action

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

- Type: String
- Default: `"hover"`
- Accepted values: "click", "hover"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/T5MIH3ZJ)

### header-tooltip-delay

Sets the hover delay in milliseconds before displaying the header tooltip

- Type: Number
- Default: `0`
- Accepted values: 2000
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OWLEJ17A)

### header-tooltip-icon

Specifies the icon to use for the header tooltip trigger icon

- Type: String
- Default: `info`
- Accepted values: 'checkmark'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/DZGNBHVO)

### header-tooltip-icon-position

Sets the header icon position in the header cells

- Type: String
- Default: `"left"`
- Accepted values: "left", "right", "after-text"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5K6K6TNE)

### header-tooltip-icon-position

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

- Type: String
- Default: `"right"`
- Accepted values: "left", "right", "after-text"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/3PD1IQ2O)

### header-tooltip-position

Sets the tooltip-position for the header cell

- Type: String
- Default: `"top"`
- Accepted values: "top", "left", "right", "bottom"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/W1QE4CKI)

### header-tooltip-renderer

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

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SZBBLQ3B)

### header-tooltip-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AEP72BQH)

### header-tooltip-text

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

- Type: String
- Default: `""`
- Accepted values: "Tooltip Value"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ZNA3E1ZA)

### header-tooltip-trigger

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

- Type: String
- Default: `text`
- Accepted values: "text", "icon"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IUS7B65M)

### header-tooltip-type

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

- Type: String
- Default: `default`
- Accepted values: "default", "system"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/4VUQ8QJO)

### headerIcon

Adds an icon next to the header text.

- Type: String
- Default: `""`
- Accepted values: "outsidearrow"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/KVGW2Y7J)

### hidden

Presence of attribute hides the column

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/HV082G0U)

### index

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

- Type: String
- Default: `""`
- Accepted values: "recordkey", "key1", "object.key1", "key1, key2, keyN"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9NCUR9F6)

### locale

Localization code used with column type `currency` and `number`

- Type: String
- Default: `"en-us"`
- Accepted values: "de-De"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OVT2NU0P)

### menu-text

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

- Type: String
- Default: `"index"`
- Accepted values: "My Header"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/2IVY5RXA)

### min-width

Sets the minimum width of the column in pixels

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LBHD4C38)

### renderer

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/K23DK1S3)

### renderer-template

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

- Type: String
- Default: `""`
- Accepted values: "myTemplateId"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/XFAAAWV8)

### required

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

- Type: Boolean
- Default: `{"type":"","bReflectToAttribute":true,"mapping":"bRequired"}`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/XUPF06BF)

### resizable

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0JT243X2)

### resizable-max-width

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

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NAAVS052)

### resizable-min-width

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

- Type: Number
- Default: `n/a`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/QL1FNFJA)

### resizablePersistent

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

- Type: Boolean
- Supported versions: 2.x

### search

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CLWPU7EF)

### separator

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

- Type: String
- Default: `","`
- Accepted values: "-"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CPPYOYHM)

### sort

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

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/P8AYYNEK)

### sort-asc

Presence of attribute sorts the column data in ascending order

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7YFFO3N2)

### sort-desc

Presence of attribute sorts the column data in descending order

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/7YFFO3N2)

### sort-intl

Overrides default behavior for setting special sort for international data

- Type: String
- Default: `""`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/420MNZQE)

### sorter

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.

- Type: String
- Default: `""`
- Accepted values: "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AWR08X5U)

### type

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

- Type: String
- Default: `""`
- Accepted values: aggregate, boolean, button, checkbox, color, currency, custom, date, duplicate, editor, element, email, emoji, icon, image, iframe, number, password, percentage, radio, range, remover, row-group, row-number, select, selector, tel, text, toggle, url
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/X5U3C30T)

### type-aggregate-omit

Presence of attribute ignores the column in aggregation calculations

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/SK9EPCZS)

### type-aggregate-value

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

- Type: String
- Accepted values: "sum", "avg", "max", "min", "count", "tokenized string", "functionName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/093GV5N3)

### type-button-disabled

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IX3EMQE5)

### type-button-handler

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

- Type: String
- Accepted values: 'buttonClick'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5KOTS7K4)

### type-button-icon

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

- Type: String
- Accepted values: 'checkmark'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/OZWC8PUN)

### type-button-label

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

- Type: String
- Accepted values: 'Label'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/PW4V2ETW)

### type-button-tooltip

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

- Type: String
- Accepted values: 'Tooltip'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/AQ5I7JP2)

### type-button-url

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.

- Type: String
- Accepted values: 'https://www.example.com/'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NDETJCG1)

### type-checkbox-label

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

- Type: String
- Accepted values: 'Label'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/NP9MOB3X)

### type-color-mode

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

- Type: String
- Default: `"hex"`
- Accepted values: "color: #ff9900;"
- Supported versions: 1.x, 2.x

### type-color-preview

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

- Type: Boolean
- Default: `true`
- Accepted values: ""
- Supported versions: 1.x, 2.x

### type-color-spaces

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

- Type: String
- Default: `true`
- Accepted values: ""
- Supported versions: 1.x, 2.x

### type-currency

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)

- Type: String
- Default: `"USD" | "EUR"`
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/GFES04TQ)

### type-date-format

The tokenized formatting for a date column

- Type: String
- Default: `Browser Default based on locale`
- Accepted values: "dddd, MMMM Do YYYY"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CO0KH0B8)

### type-date-from-now

Indicates if date should be displayed in FromNow format

- Type: Boolean
- Default: `n/a`
- Accepted values: n/a
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/IAGMQ14H)

### type-element-attribute-name

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

- Type: String
- Default: `""`
- Accepted values: "attributeName"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LNADIAME)

### type-element-tag-name

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.

- Type: String
- Default: `""`
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/ATEG1H8V)

### type-emoji-shortcode

Set to function to convert shortcodes to emojis

- Type: String
- Default: `""`
- Accepted values: "shortcodeConverter"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/08MRBQOM)

### type-group-hide-count

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VKCXNCU6)

### type-group-plural

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.

- Type: String
- Default: `""`
- Accepted values: "person,people"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/99NOEJ3E)

### type-iframe-ratio

Sets a `square` ratio instead of the default `16:9`

- Type: String
- Default: `'square'`
- Accepted values: "square"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/CMXG73AF)

### type-image-alt

The alternative text used with the `image` type column

- Type: String
- Default: `Full Image URL`
- Accepted values: "Logo"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/E77C24KU)

### type-image-mask

The alternative shape to mask the image

- Type: String
- Accepted values: "circle"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LXCGPDZD)

### type-image-src

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.

- Type: String
- Default: `""`
- Accepted values: "https://www.example.com/[[index.shortImg]]"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/5A1UF54Z)

### type-number-decimals

Indicates the exact numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-number-formatting

Set to "disabled" to turn off default number formatting

- Type: String
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"sTypeNumberFormatting","bRefreshContent":true}`
- Accepted values: "disabled"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/LCOCD7Z5)

### type-number-max-decimals

Indicates the maximum numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMaxDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-number-min-decimals

Indicates the minimum numbers to display after the decimal

- Type: Number
- Default: `{"bReflectToAttribute":true,"type":"","mapping":"nTypeNumberMinDecimals","bRefreshContent":true}`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/85JDYLP2)

### type-radio-options

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

- Type: Array | String
- Accepted values: 'one,two,three'
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/41C9I817)

### type-range-max

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

- Type: Number
- Default: `100`
- Accepted values: 150
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/X7FZSCAS)

### type-range-min

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

- Type: Number
- Default: `0`
- Accepted values: 100
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/S4IQMYFF)

### type-range-step

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

- Type: Number
- Default: `1`
- Accepted values: 20
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0DBR208U)

### type-select-default-value

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

- Type: String
- Default: `""`
- Accepted values: "M"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0E6JVOFK)

### type-select-multiple

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

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0OP35J9R)

### type-select-options

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

- Type: String | Array
- Default: `""`
- 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"}]
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0OP35J9R)

### type-selector-page-persist

Keeps the selected rows selected even on page change. This means that rows can be selected and not on the current page.

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/9T4P7ZG5)

### type-toggle-options

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

- Type: Array
- Default: `[]`
- Accepted values: ["red", "orange", "yellow", "green", "blue"]
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/BWSBRL9C)

### type-toggle-render-value

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

- Type: Boolean
- Default: `false`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/W88ROFBK)

### type-url-icon

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.

- Type: String
- Default: `""`
- Accepted values: "link", "outsidearrow"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/51XKWSN3)

### type-url-src

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.

- Type: String
- Default: `""`
- Accepted values: "https://www.example.com/?searchfor=[[index.id]]"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9H6VZVVU)

### type-url-target

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

- Type: String
- Default: `"_blank"`
- Accepted values: "_self"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/9EJ6RLKQ)

### type-url-text

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

- Type: String
- Default: `""`
- Accepted values: "Go to site"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/Z3WKG5XL)

### validation-error-message

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

- Type: String
- Accepted values: "Please provide valid input."
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/B6KISBZ0)

### validation-required-message

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

- Type: String
- Accepted values: "This field is required"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/0247YIAM)

### validator

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

- Type: String | function
- Accepted values: "number"
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/VYY009C8)

### visibility-priority

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.

- Type: Number
- Default: `""`
- Accepted values: 2
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/HMLS88C7)

### width

Sets the width of the column.

- Type: String | Number
- Default: `fit`
- Accepted values: "fit", "fitheader", "fitcontent", "stretch", "10%", "150px", 150, min-content, max-content
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/L0JW9BEW)

## CSS Variables

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

## CSS Selector

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

## Slots

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

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

Below is a list of all the associated ZGColumn slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Custom column content. |