Docs

API Elements

<zing-grid>

The most important tag in the library. Contains most of the attributes to turn grid features on/off. Set zing-grid:not(:defined) {display:none;} to hide <zing-grid>instances until they are ready. This stops child elements from appearing unstyled for a brief moment.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/users-small.json">
Hello ZingGrid
</zing-grid>
ZingGrid Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
captionString"""My Caption"The caption for the grid.
cell-breakString"word""all","ellipsis","normal","word"The type of word-break style for body cells. When not set, work-break style is word by default. To overwrite word-break for cells in a specific column, set cell-break for that column. However, cell-break is not reactive in <zg-column>.
cell-classString"""userClassName","functionName"Adds a class to each <zg-cell> in the grid. This attribute can be applied to both <zing-grid> or <zg-column>. If the attribute is applied to both, <zg-column>'s cell-class overwrites <zing-grid>'s cell-class. To set a class conditionally, set cell-class to the name of the function, which takes in the arguments cellData, domContainer, cellObject.
col-classString"""userClassName","functionName"Adds a class to each <zg-cell> in targeted <zg-column>. To apply a class conditionally, set the value to the name of the function to run on each cell value. The function takes the parameters fieldIndex, domContainer, and colObject, and returns a string which is the class name to apply.
columnsObject[][{"index": "firstName"}, {"index": "lastName"}]Specifies the columns of the grid. More appropriate to use <zg-column> in most cases or set the property programatically.
columns-controlObject""N/APresence of attribute turns on the menu to show and hide columns.
compactObjectN/AN/AAugments internal themes to a compact mode.
configObject{}{"search": true,"pager":true,"caption": "Actors/Actresses","pageSize": 5}Used to set multiple grid properties at once. This should never be used directly. This is meant for object instantiation.
confirm-deleteBooleantrue"disabled"Turns off delete confirmation if set to disable.
context-menuBoolean""N/A,"myCustomMenu"Presence attribute which enables the default <zing-grid> context menu or set to the id name of a custom <zg-menu>. If set to a custom menu and <zg-menu> has the replace attribute present, then the custom menu will replace the context menu. Otherwise the contents of the custom meny is appended to the end of context menu.
dataObject""[{"firstName": "John", "lastName": "Doe"}]Data for the grid presented as an array or object.
default-displayString"""N/A"The data to display in each cell where the data value is null or undefined.
drag-actionObjectfalse"reorder","remove","both"Specifies the action of dragging allowed. By default, if draggable is enabled then drag-action is set "both". This property has no meaning if draggable is not enabled.
draggableObject"both""rows","columns","both"Enables column and/or row dragging.
editorStringfalse"modal",trueTurns on the grid editor. Enables single cell editing via double click. Sets the editor to inline (default) or modal.
editor-controlsStringfalse"editor","remover","creator","all",true,falseAdds columns for the editor controls. If it is added, default is "all".
filterBoolean""N/APresence enables on filtering for all columns. Can be turned on/off individually via column.
foot-classString"""userClassName","functionName"Adds a class to each <zg-cell> in the <zg-foot>. To apply a class conditionally, set the value to the name of the function to run on each cell value. The function takes the parameters fieldIndex, domContainer, and colObject, and returns a string which is the class name to apply.
gridlinesString"both","horz","horizontal","vert","vertical"Set vertical, horizontal or both grid lines to the grid.
head-classString"""userClassName","functionName"Adds a class to each <zg-cell> in the <zg-head>. To apply a class conditionally, set the value to the name of the function to run on each cell value. The function takes the parameters fieldIndex, domContainer, and colObject, and returns a string which is the class name to apply.
header-auto-formatString"""disabled","functionName"Setting to disabled will turn off formatting on headers. By default, headers will convert from camel case, dash, and kebab case to properly spaced and capitalized. Or set to a function name to customize formatting of headers.
heightStringinherit"500px","500",500Sets the height of the grid. If the height is less than the size of the content, scrolling is added to grid body.
icon-setBooleanundefined"fa","fontawesome","font-awesome"Allows the user to change the grid icon set to an allowed 3rd-party type (ex: Font-Awesome). To use a custom icon set, the icon set must first be registered.
layoutString"""card","row"Sets the grid layout to be either card or row and adds <zg-layout-controls> to the grid. The default is based on the size of the user's screen, unless layout is set.
layout-controlsString"""disabled"When layout is set, by default layout-controls is enabled. To hide, set layout-controls to disabled. Presence of this attribute will enable <zg-layout-controls> even if layout is not set.
loadingBoolean""N/APresence of attribute adds loading state to grid, which triggers <zg-load-mask> to show. This attribute allows styling the height of the grid (via CSS) before the data has loaded in the grid.
loading-textString"loading...""ZingGrid is Loading"Sets the text to display in the <zg-load-mask> on data load.
loadmaskString"""disabled"Set loadmask="disabled" to prevent the <zg-load-mask> from showing on data load.
page-sizeNumber5010Can be set only if pager is set. Sets the number of records or rows to display per page.
page-size-cardNumberpage-size value10Can be set only if pager is set. Sets the number of cards to display per page when in card mode.
page-size-optionsString"5,10,50""15,20,35"Can be set only if pager is set. Sets the options for page size in zg-optionl-ist.
page-size-rowNumberpage-size value10Can be set only if pager. Sets the number of rows to display per page when in row mode.
pagerString""N/AAdds pagination functionality and controls to the grid.
paramsObject{}{idKey: "id", sortByKey: "_sort", sortBy: "capital"}Name/Value pairs of <zg-param> values. More appropriate to use <zg-param> in most cases.
record-countNumber""1000Sets the total record count. Useful for loadByPage when the response packet does not return total count of records.
row-classString"""userClassName","functionName"Adds a class to each <zg-row> element. To apply a class conditionally, set the value to the name of the function to run on each cell value. The function takes the parameters data, rowIndex (1-based), domRow, and rowObject, and returns a string which is the class name to apply.
row-selectorBoolean""N/APresence of attribute adds selector type column to the rows as the first column.
Boolean""N/APresence of attribute turns on the search feature and add <zg-search> to the grid. The search button appears in the caption header.
selectorBoolean""N/APresence of attribute turns on the selector feature on the grid and adds <zg-selector-mask> to the grid.
server-renderedBoolean""N/AIndicates that the grid was completely rendered on the server and embedded in the page.
sortBoolean""N/APresence of attribute enables sorting on all columns. It is possible to disable specific columns via the columns object or setting sort="disabled" to specified columns.
sorterfunction"""functionName"Override the column sorting by passing in method name of sort function instead. Sorter function takes in two values (a, b) and returns 1, -1, or 0 indicating if a > b, a < b, or a = b.
sourceString"""Source: Wikipedia"Defines the source of the data in the grid. Adds the <zg-source> element.
srcString"""https://url-to-your-api"Specifies the absolute or relative URL to fetch data from to populate the grid.
static-menuBoolean""N/APresence of attribute adds a display button that launch the contextmenu.
template-end-delimiterString"]]""}}"Define the regex expression for closing data binding.
template-start-delimiterString"[[""{{"Define the regex expression for starting data binding.
themeString"default""android","black","default","dark","ios","urlToThemeFile","customThemeName"Sets the theme of the grid. Built-in themes are specified by keyword, but custom theme names are also accepted by setting a URL path to your custom css theme file. For custom themes, on load set theme to the path to the custom theme file. After, set to theme name to switch themes.
viewportString""N/AInternal attribute. Should not be set.
viewport-pauseBoolean""N/APresence of attribute keeps current value of viewport and freezes the breakpoint.
viewport-stopBoolean""N/APresence of attribute removes viewport attribute, disabling viewport resizing.
viewport-typesBooleanfalse{ mobile: 500, test: 600, desktop: 800 }Sets custom viewport breakpoints (value string-object must be valid JSON). NOTE: If you don't set mobile, the grid won't auto-set card or row mode.
widthStringinherit"500","500px","5em","5%","50vw",500Sets the width of the grid. If the width is less than the size of the content, scroll is added to <zg-body>.
zebraString"""userCustomStyle"Presence of attribute adds the classes, zebra-1 and zebra-2, alternating on <zg-row> elements. Setting to a list of class names will assign classes in sequential order. For conditional zebra classes, zebra also accepts name of function that returns a class name to use for zebra striping.

<zg-body>

<zg-body></zg-body> is created dynamically by the ZingGrid library, as such should not be manually added by the developer. However the user can style <zg-body> using CSS.

Example Usage

zg-body {
  backgroundColor: red;
}
ZGBody Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-button>

A custom, styled button that can be used both for internal grid-related action and for user-specific actions. It is stylable via CSS. Some buttons are automatically inserted when a feature that uses it enabled, like pager, while others are inserted manually by the user.

Example Usage

<zing-grid>
  <zg-button disabled action="reload">
</zing-grid>
ZGButton Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
actionString"""cancel","cancelrecord","checkbox","copycell","createrecord","createrecordend","createrecordstart","deselect","editcell","editrecord","editrow","firstpage","fixedmenu","getselection","insertrecord","layoutrow","layoutcard","lastpage","menu","nextpage","pastecell","prevpage","reload","removerecord","search","selectcell","selectrow","sortcolumn","submitrecord","about"Sets the action of the button.
disabledBoolean""N/APresence of attribute determines if the button is disabled or not.
iconString"""cancel","cancelrecord","checked","checkmark","close","createrecord","down","edit","editrecord","error","error-tmp","firstpage","fixedmenu","info","lastpage","layoutcard","layoutrow","link","menu","nextpage","outsidearrow","prevpage","reload","remove","removerecord","search","submitrecord","success","unchecked","up","warning"Sets the icon for the button.

<zg-caption>

A caption can be manually inserted inside the <zing-grid> tag as slotted content or automatically inserted when the caption is enabled. <zg-caption> is stylable via CSS.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/users-small.json">
  <zg-caption>
    <h2>Hello World</h2>
  </zg-caption>
</zing-grid>
ZGCaption Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
alignString"left""left","right","center"The alignment of content in the caption.
positionString"top""top","bottom","both"Indicates where to position the caption.

<zg-card>

The container for a card template that holds a custom template for card mode. This custom template will be rendered per row.can be styled via CSS or the --zg-card-* selectors. Please reference the "Template" section for more details on templates.

Example Usage

ZGCard Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
editorfunctionSets the custom editor
editorTemplatefunctionPoints to an external template element to be used as the template for the card's editor
rendererfunction"""

Card content

"
The return value of the method is set as the innerHTML of <zg-card>. If nothing is returned, it will not change the currently rendered card. The method takes the paramters data, domCard, and rowObject.
renderer-templatefunction"""myTemplateId"Points to an external template element to be used as the template for the card's render.

<zg-cell>

is the container for a single cell; it corresponds to the tag on an HTML table. It is automatically inserted and should not be placed directly in the user's HTML.can be styled via CSS.

Example Usage

Note: these are the cells inside of zg-body, for cells in the column headers see.

ZGCell Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-checkbox>

A checkbox is automatically inserted when a feature that uses it is enabled, like <zg-column type="selector">, or it can be manually-inserted to the grid. It can be style via CSS.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/users-small.json">
  <zg-checkbox checked></zg-checkbox>
</zing-grid>
ZGCheckbox Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
checkedBoolean""N/APresence of attribute determines if the checkbox is checked.

<zg-colgroup>

<zg-colgroup> is a container for the columns of the grid specified by <zg-column> tags. This element is similiar in function to the <colgroup> tag in an HTML element. Developers should always add this element to their grid structure, however ZingGrid will insert it automatically if it is omitted. As an non-visual element you should not apply style to this tag.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/users-small.json">
  <zg-colgroup>
    <zg-column index="firstName" header="First"></zg-column>
  </zg-colgroup>
</zing-grid>
ZGColgroup Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-column>

The ><zg-column> tag is used to associate the columns of the grid to the values in a data set. 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 and in the case 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/users-small.json">
  <zg-column index="firstName" header="First"></zg-column>
</zing-grid>
ZGColumn Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
alignString"left""center","left","right"Aligns the contents of the cell.
cell-classString"""userCustomClass"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>.
content-styleString"""max-width: 50px;"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.
content-widthString"""500","500px",500Sets the width of the content inside of the cell. Used on cells of column type element, iframe, image, or url.
draggableBoolean"""disabled"Disable the draggable state of a specific column when draggable enabled on <zing-grid>.
editorfunction"""columnType","objectName",falseOverrides 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" for more details on custom editor.
editor-templateString"""myTemplateId"Points to an external template element to be used as the template for the column's editor.
filterString"""disabled"Overrides the grid level filter attribute. Presence of attribute enables on filter column, otherwise set to disabled to disable.
foot-cellString"""sum","avg","max","min","count","tokenized string","functionName"The aggregate function, tokenized string or function to evaluate for the foot cell of the column. If using a function, the functin takes the parameters columnData and columnFieldIndex.
head-cellString"""sum","avg","max","min","count","tokenized string","functionName"The aggregate function to evaluate for the head cell of the column. If using a function, the functin takes the parameters columnData and columnFieldIndex.
headerString"index""My Header"The header name for the column. If it is not set, the default is to format the index value.
header-auto-formatString"""disabled","functionName"Setting to disabled will turn off formatting on the header of the column. By default, headers will convert from 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.
hiddenBoolean""N/APresence of attribute hides the column.
indexString"""recordkey","key1","object.key1","key1, key2, keyN"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).
localeString"en-us""de-De"Localization code used with column type currency.
menu-textString"index""My Header"The text to display in the control menu for the column. If it is not set, it is set to the header text.
rendererfunction"""functionName"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.
renderer-templateString"""myTemplateId"Points to an external template element to be used as the template for the column's renderer.
String"""disabled"Turns off the search on a column if search is present on <zing-grid>.
separatorString",""-"If multiple indices are set, this is the string that separates them in the display. By default, it is a comma.
sortString"""disabled"Turns off the sort on a column if sort is present on <zing-grid>.
sort-ascBoolean""N/APresence of attribute sorts the column data in ascending order.
sort-descBoolean""N/APresence of attribute sorts the column data in descending order.
sorterfunction"""functionName"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 diable 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.
typeString"""boolean","currency","custom","date","editor","element","email","icon","image","iframe","number","password","range","remover","row-number","select","selector","tel","text","toggle","url"The type of the data stored in the column. The column renderer/editor will behave based on the column type.
type-currencyString"USD" | "EUR"The currency to be used in currency formatting.
type-element-attribute-nameString"""attributeName"Sets the attribute of the custom-element in the column when <zg-column> has type set to element.
type-element-tag-nameString""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-iframe-ratioString'square''square'To set a square ratio instead of the default 16:9.
type-image-altStringFull Image URL"Logo"The alternative text used with the image type column.
type-image-maskStringN/A"circle"The alternative shape to mask the image.
type-range-maxNumber100150Maximum value for the input box. Used with the range type column in edit mode.
type-range-minNumber0100Minimum value for the input box. Used with range type column in edit mode.
type-range-stepNumber120Specifies the step between each legal value for the input box. Used with range type column in edit mode.
type-select-multipleBoolean""N/AIn edit mode, presence of attribute allows column type select to have mulitple selections, instead of the default of a single selection.
type-select-optionsString"""M, T, W, Th, F"To set the options for the select box for a select column when editor is enabled on <zing-grid>.
type-toggle-optionsArray[]["red", "orange", "yellow", "green", "blue"]When the column type is set to toggle, use typeToggleOptions to set the list of options for the display.
type-url-iconString"""link","outsidearrow"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-url-textString"""Go to site"If the column type is url, use the type-url-text attribute to set the text displayed for the link.
visibility-priorityNumber""2Used 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.
widthString | Numberfit"fit","fit-header","fit-content","stretch","10%","150px",150Sets the width of the column.

<zg-control-bar>

The <zg-control-bar> is inserted dynamically by the ZingGrid library and serves as a container for the grid's interface controls. As a generated element, developers should not manually place <zg-control-bar> in their grid, however, they may style the bar and its internal elements using CSS.

Example Usage

--zg-control-bar-padding: 2rem;
ZGControlBar Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-data>

The <zg-data> tag is used to associate a data set with the actual grid. A top-level attribute is placed on <zing-grid> for basic cases, but when more fine grain control is required, <zg-data> should be employed and various configuration values set via the options attribute or more appropriately via <zg-param> tags nested within the tag.

Example Usage

ZGData Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
adapterString"""firebase"Adapter is a shortcut to set known options for specific third party datasets. Currently, the only build-in option offered is "firebase". Developers could register their own custom adapters. For more information on custom adapters, visit Guides > ZingGrid Object > registerAdapter().
dataObject""[{"firstName": "John", "lastName": "Doe"}]Data for the grid presented as an array or object. If set as an attribute value, the data needs to be in JSON format.
id-keyString"id""state"In the case of non-key based objects, the idKey can be set to indicate the id to send back to the datasource on CRUD commands. For example, if the READ URL was https://zinggrid-named.firebaseio.com/ then the UPDATE would be https://zinggrid-named.firebaseio.com/VALUE_OF_IDKEY.
optionsObject{}{"idKey":"state","sortDirKey":"_order","sortDir":"desc","sortByKey":"_sort","sortBy":"capital","src":"https://zinggrid-named.firebaseio.com/"}Used to set <zg-param>, the configuration data for <zg-data>. This should never be used directly as an attribute and is meant for object instantiation and for setting in JavaScript.
srcString"""https://url-to-your-api"Specifies the absolute or relative URL to fetch data from to populate the grid.

<zg-dialog>

The <zg-dialog> tag is used internally for dialogs used by CRUD (Create, Read, Update, and Delete) actions, as well as allow for custom dialogs to be created for generic use with the grid. The design goal of the custom element is to extend HTML's <dialog> element for a consistent style and more data grid- related duties.

Example Usage

ZGDialog Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
cancelStringN/A"functionName"Callback method to call on custom dialog when the dialog's "cancel" button is clicked.
confirmStringN/A"functionName"Callback method to call on custom dialog when the dialog's "confirm" button is clicked.
labelString"""Are you sure you want to continue?"Sets the dialog's header 'label' text.
openString""N/AThe presence of the specification-standard open attribute designates whether the dialog is shown or hidden.

<zg-editor-row>

<zg-editor-row> holds the details of the edit mode for the grid. <zg-editor-row> is created internally and should not be placed directly in the user's HTML.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/users-small.json">
  <zg-editor-row type="modal"></zg-editor-row>
</zing-grid>
ZGEditorRow Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-focus>

The <zg-focus> element is a generated element added to <zing-grid> when the selector attribute is defined. It is used as a container for the focus of cell(s) and used as a CSS target for styling by the developer. It should not be accessed specifically beyond styling.

Example Usage

ZGFocus Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-foot>

The <zg-foot> tag contains the foot cells (<zg-foot-cell>) of the data grid specified via the foot-cell attribute found on <zg-column> tags. The tag roughly corresponds to the idea of the <tfoot> tag used in HTML tables. The <zg-foot> tag is generated by the library and should not be placed in a grid manually by a developer, but instead is used as a styling target for CSS.

Example Usage

ZGFoot Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-footer>

The >zg-foot> tag contains the foot cells (>zg-foot-cell>) of the data grid specified via the foot-cell attribute found on >zg-column> tags. The tag roughly corresponds to the idea of the >tfoot> tag used in HTML tables. The >zg-foot> tag is generated by the library and should not be placed in a grid manually by a developer, but instead is used as a styling target for CSS.

Example Usage

ZGFooter Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-head>

The <zg-head> tag contains the head cells (<zg-head-cell>) of the data grid specified via the head-cell attribute found on <zg-column> tags. The tag roughly corresponds to the idea of the <thead> tag used in HTML tables. The <zg-head> tag is generated by the library and should not be placed in a grid manually by a developer, but instead is used as a styling target for CSS.

Example Usage

ZGHead Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-head-cell>

The <zg-head-cell> contains header information for a column and is roughly equivalent to the <th> tag used for HTML tables. The <zg-head-cell> tag is generated by the library and should not be placed in a grid manually by a developer, but can be used as a styling target for CSS.

Example Usage

Note: these are the cells inside of column headers, for cells in the grid body see <zg-cell>.

ZGHeadCell Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-header>

<zg-header> is the semantic container placed at the top of the grid to hold various grid items. <zg-header> is created internally and should not be placed directly in the user's HTML. The element can be styled via CSS.

Example Usage

ZGHeader Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-icon>

<zg-icon> is used to display custom ZingGrid icons within the grid. The icon is set by its name, but can have a different look based on the grid's theme. <zg-icon> is created internally when a feature that uses it is enabled, like pager, but can be included in the grid manually as long as the name attribute exists.

Example Usage

ZGIcon Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
nameString"""cancelrecord","checked","checkmark","close","down","edit","editrecord","firstpage","lastpage","layoutcard","layoutrow","link","menu","nextpage","outsidearrow","prevpage","reload","remove","removerecord","search","sort","submitrecord","unchecked","up"Sets the icon type of the ZGIcon.

<zg-input>

<zg-input> contains input fields with added ZingGrid specific functionality. The specific functionality can be set via the action attribute.

Example Usage

ZGInput Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
actionString"""currpage"The built-in behavior and display of the input. Gets and sets the associated grid property.
valueString"""6"The value of the input.

<zg-layout-controls>

Allows you to switch between normal row mode and condensed card mode for the grid. <zg-layout-controls> is created internally and should not be placed directly in the user's HTML, however the user can style the <zg-layout-controls> using the zg-layout-controls selector.

Example Usage

ZGLayoutControls Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-load-mask>

The <zg-load-mask> element is used to define the loading overlay that displays on top of the grid before the grid is completely rendered. The element is generally dynamically created, though it is possible to manually define it for a complex loading screen. More appropriate would be to define a simple message and use CSS to style the element.

Example Usage

ZGLoadMask Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-menu>

The <zg-menu>> element is a container for a custom menu for ZingGrid used as context or static (aka "Hamburger") menu. The element is generally dynamically inserted by the library, though the developer can append of overwrite menu with custom entries. The element can be styled using CSS.

Example Usage

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/users-small.json"
  context-menu="mymenu">
  <zg-menu id="mymenu" replace="true">
    <p>This content replaces the built-in menu</p>
  </zg-menu>
</zing-grid>
ZGMenu Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
replaceBoolean""N/APresence of attribute replaces the default context menu with a custom menu. If replace is not set, the custom menu will be appended to the end of the default menu.

<zg-menu-group>

A group wrapper for multiple menu items found in the context menu. ZingGrid dynamically creates this element to hold various <zg-menu-item> tags together for organizational purposes. As it is a visual element, it can be styled via CSS.

Example Usage

ZGMenuGroup Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-menu-item>

This element defines a single menu item in ZingGrid's context menu defined by <zg-menu>. The element is typically dynamically generated, through it can be overwritten by a user's own custom <zg-menu-item> elements. The element can be styled via CSS.

Example Usage

ZGMenuItem Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-pager>

An element that contains the UI controls for paging through a grid's data set. The element can be manually placed, though it is more often dynamically inserted when paging is enabled via the pager attribute on the <zing-grid>> tag. The element can be styled via CSS.

Example Usage

<zing-grid
  src="https://cdn.zinggrid.com/datasets/users-small.json">
  <zg-pager size-options="1,2,3"></zg-pager>
</zing-grid>
ZGPager Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
page-sizeNumber5010Sets the number of records or rows to display per page.
page-size-cardNumberpage-size value10Sets the number of cards to display per page when in card mode.
page-size-rowNumberpage-size value10Sets the number of rows to display per page when in row mode.
positionString"bottom""top","bottom"Indicates where to position the pager.
size-optionsString"5,10,50""2,4,6"Sets the options for page size in zg-option-list.

<zg-param>

<zg-param> is a non-visual element used to pass the configuration options for the <zg-data> element more cleanly via name-value pairs. The element is not required, though it is preferred, as everything set within a <zg-param> element can also be set directly on <zg-data> via the config attribute. Developers should note that when setting complex values for the value attribute to use JSON encoded balues. Also, as a non-visual element, CSS styling does not apply to <zg-param>.

Example Usage

ZGParam Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
nameString"""adapter","idKey","newIndexPath","recordPath","searchKey","search","sortByKey","sortBy","sortDirKey","sortDir","startAtKey","startAtValue","limitToKey","limitTo","pageKey","countPath","cursor","loadByPage","loadByScroll","hasNextPath","nextPath","nextIDPath","nextIDKey","hasPrevPath","prevPath","prevIDPath","prevIDKey","pageBase","createOptions","readOptions","updateOptions","deleteOptions","src","method","headers","queryString","body","exclude","requestType","mode"Name of parameter.
valueString""'{"src":"http://example.com/deletestate/","method":"GET"}'Value of "name" parameter

<zg-row>

<zg-row> is the container for the <zg-cell>, <zg-head-cell> , and <zg-filter> elements. It corresponds to the <tr>tag on an HTML table. The <zg-row> element is created dynamically and should not be placed in the grid by a developer. However, the element is useful for styling the various rows of the grid using CSS.

Example Usage

ZGRow Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-search>

The <zg-search> element is used to encapsulate the interface widget necessary for searching the grid -- typically a text field and a button to trigger the search. The element is added dynamically when search is specified and should not be directly inserted by the developer. The element and its contents can be styled using CSS.

Example Usage

ZGSearch Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-selector-mask>

<zg-selector-mask> is used to wrap the cells during user selection for styling purposes. The element is dynamically added to the grid based upon the presence of the selector attribute on the <zing-grid> element. The element should not be manually inserted, through it can be styled using CSS.

Example Usage

ZGSelectorMask Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-separator>

<zg-separator> specifies the horizontal bar in the <zg-menu> used for separating items. The element is created dynamically and should not be manually inserted by developers. However, <zg-separator> can be styled using CSS. <zg-separator> is created internally and should not be placed directly in the user's HTML, however the user can style the <zg-separator> using the zg-separator selector.

Example Usage

ZGSeparator Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-source>

<zg-source> is used to source the data in ZingGrid. The element internally wraps any text in a <cite role="any"> tag for proper semantics. The element is stylable with CSS like most ZingGrid elements.

Example Usage

ZGSource Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-status>

<zg-source> is used to source the data in ZingGrid. The element internally wraps any text in a <cite role="any"> tag for proper semantics. The element is stylable with CSS like most ZingGrid elements.

Example Usage

ZGStatus Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-status>

<zg-source> is used to source the data in ZingGrid. The element internally wraps any text in a <cite role="any"> tag for proper semantics. The element is stylable with CSS like most ZingGrid elements.

Example Usage

<zg-status> has generic CSS variables that control all use cases, as well as specific overrides for its states (success, error, etc.). Generic styles are styled in the form of 'element-property' (--zg-status-background), whereas overrides are 'element-state-property' (--zg-status-success-background). For example, to update the background color of the built-in 'success' state, you'll need to use the more specific variable, since it is already defined in the default template.
ZGStatus Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo

<zg-text>

<zg-source> is used to source the data in ZingGrid. The element internally wraps any text in a <cite role="any"> tag for proper semantics. The element is stylable with CSS like most ZingGrid elements.

Example Usage

<zg-text> is a ZingGrid specific text value that is bound to the status of the grid, as defined by the value attribute. The field can be manually inserted by a developer, but is more commonly added by the use of certain grid features, like paging. The element is stylable with CSS.
ZGText Attributes and Default Values
NameTypeDefaultValuesDescriptionDemo
valueString"""currpage","pagecount","pagesize","startrow","endrow","rowcount"Specifies what value to generate in text field. Current build-in options are pager-related information.