zinggrid/index.d.ts

ZingGrid - A fully-featured, native, web-component, data table and grid for Javascript applications.

// Type definitions for zinggrid 2.1.3
// Project: https://github.com/ZingGrid/zinggrid
// Definitions by: Jeanette Phung <https://github.com/jeanettephung>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 4.3

type Upper = "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" |
  "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z";

type Kebab<T extends string> = T extends `${infer L}${Upper}${infer R}` ?

  T extends `${L}${infer U}${R}` ? `${L}-${Lowercase<U>}${Kebab<R>}` : T : T;

type KebabKeys<T> = { [K in keyof T as K extends string ? Kebab<K> : K]: T[K] };

declare namespace ZSoft {
  interface ZingGridElementEventMap {
    'menu:click': CustomEvent;
    'grid:beforerender': CustomEvent;
    'grid:contextmenuclose': CustomEvent;
    'grid:contextmenuopen': CustomEvent;
    'grid:deselect': CustomEvent;
    'grid:hydrate': CustomEvent;
    'grid:keydown:esc': CustomEvent;
    'grid:pagechange': CustomEvent;
    'grid:pagefirst': CustomEvent;
    'grid:pagelast': CustomEvent;
    'grid:pagenext': CustomEvent;
    'grid:pageprev': CustomEvent;
    'grid:pagesizechange': CustomEvent;
    'grid:ready': CustomEvent;
    'grid:refresh': CustomEvent;
    'grid:render': CustomEvent;
    'grid:scroll': CustomEvent;
    'grid:search': CustomEvent;
    'grid:select': CustomEvent;
    'grid:selectall': CustomEvent;
    'grid:sort': CustomEvent;
    'cell:beforecopy': CustomEvent;
    'cell:beforerender': CustomEvent;
    'cell:click': CustomEvent;
    'cell:closeedit': CustomEvent;
    'cell:copy': CustomEvent;
    'cell:mouseout': CustomEvent;
    'cell:mouseover': CustomEvent;
    'cell:openedit': CustomEvent;
    'cell:paste': CustomEvent;
    'cell:rightclick': CustomEvent;
    'data:afterfetch': CustomEvent;
    'data:cell:beforechange': CustomEvent;
    'data:cell:change': CustomEvent;
    'data:load': CustomEvent;
    'data:record:beforechange': CustomEvent;
    'data:record:beforedelete': CustomEvent;
    'data:record:beforeinsert': CustomEvent;
    'data:record:change': CustomEvent;
    'data:record:delete': CustomEvent;
    'data:record:insert': CustomEvent;
    'data:record:openinsert': CustomEvent;
    'row:click': CustomEvent;
    'row:detailsclose': CustomEvent;
    'row:detailsopen': CustomEvent;
    'row:frozen': CustomEvent;
    'row:mouseout': CustomEvent;
    'row:mouseover': CustomEvent;
    'row:select': CustomEvent;
    'column:click': CustomEvent;
    'column:filter': CustomEvent;
    'column:filter:menu:close': CustomEvent;
    'column:filter:menu:open': CustomEvent;
    'column:mouseout': CustomEvent;
    'column:mouseover': CustomEvent;
    'column:move': CustomEvent;
    'column:togglevisibility': CustomEvent;
    'card:click': CustomEvent;
    'card:mouseout': CustomEvent;
    'card:mouseover': CustomEvent;
    'record:click': CustomEvent;
    'record:mouseout': CustomEvent;
    'record:mouseover': CustomEvent;
    'header:click': CustomEvent;
  }

  interface ZingGridEventHandlers {
    /**
     * @description Fires the event when custom menu item is clicked.
     */
    'onMenuClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event once before the grid renders.
     */
    'onGridBeforerender'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the  event when the contextmenu is closed.
     */
    'onGridContextmenuclose'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the contextmenu is opened.
     */
    'onGridContextmenuopen'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when selection is deselected in the grid.
     */
    'onGridDeselect'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the pre-rendered grid is finished being hydrated.
     */
    'onGridHydrate'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the (Esc) key is pressed.
     */
    'onGridKeydownEsc'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a page changes in the grid.
     */
    'onGridPagechange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the grid changes to the first page.
     */
    'onGridPagefirst'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the grid changes to the last page.
     */
    'onGridPagelast'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the grid changes to the next page.
     */
    'onGridPagenext'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the grid changes to the previous page.
     */
    'onGridPageprev'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the "page-size" (amount of rows displaying) changes on the grid.
     */
    'onGridPagesizechange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the grid ready event when grid is ready.
     */
    'onGridReady'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the grid is refreshed through grid controls or API method "refresh()".
     */
    'onGridRefresh'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event once when grid renders.
     */
    'onGridRender'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when scrolling occurs in grid.
     */
    'onGridScroll'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a the grid is searched.
     */
    'onGridSearch'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when selection is made in the grid.
     */
    'onGridSelect'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when selecting every cell (ctrl+a) in the grid.
     */
    'onGridSelectall'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a the grid is sorted
     */
    'onGridSort'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when copying (ctrl+c) occurs in a cell before the data is saved to the clipboard.
The event handler can modify the data in ZGData.copiedValue to store in the clipboard
     */
    'onCellBeforecopy'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event before a cell is rendered.
     */
    'onCellBeforerender'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a click occurs to a cell.
     */
    'onCellClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the cell editor is closed.
     */
    'onCellCloseedit'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when copying (ctrl+c) occurs in a cell.
     */
    'onCellCopy'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved out of a cell.
     */
    'onCellMouseout'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved over a cell.
     */
    'onCellMouseover'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when the cell editor is opened.
     */
    'onCellOpenedit'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when pasting (ctrl+p) occurs in a cell.
     */
    'onCellPaste'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when right click occurs on a cell.
     */
    'onCellRightclick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event every time data is fetched
     */
    'onDataAfterfetch'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event before a single cell value is changed.
     */
    'onDataCellBeforechange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event after a single cell value is changed.
     */
    'onDataCellChange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event every time a new dataset is loaded in the grid.
     */
    'onDataLoad'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event before a record (row) is changed (edited through row editor as opposed to cell editor).
     */
    'onDataRecordBeforechange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event before a record (row) is deleted from the grid.
     */
    'onDataRecordBeforedelete'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event before a new record (row) is added to the grid.
     */
    'onDataRecordBeforeinsert'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event after a record (row) is changed (edited through row editor as opposed to cell editor).
     */
    'onDataRecordChange'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a record (row) is deleted from the grid.
     */
    'onDataRecordDelete'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event after a new record (row) is added to the grid.
     */
    'onDataRecordInsert'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires event when the insert dialog is opened
     */
    'onDataRecordOpeninsert'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the "row:click" and "record:click" event when a click occurs on a record (row).
     */
    'onRowClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the row details is closed
     */
    'onRowDetailsclose'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the row details is opened
     */
    'onRowDetailsopen'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the frozen row state changes
     */
    'onRowFrozen'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved out a record (row).
     */
    'onRowMouseout'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved over a record (row).
     */
    'onRowMouseover'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the row selector changes
     */
    'onRowSelect'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires event when click on a column.
     */
    'onColumnClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a column is filtered.
     */
    'onColumnFilter'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a filter menu is closed.
     */
    'onColumnFilterMenuClose'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a filter menu is opened
     */
    'onColumnFilterMenuOpen'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires event when mouseout on a column.
     */
    'onColumnMouseout'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires event when mouseover on a column.
     */
    'onColumnMouseover'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a column is moved to a frozen spot or within a frame
     */
    'onColumnMove'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when a column is hidden or shown
     */
    'onColumnTogglevisibility'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the "card:click" and "record:click" event when a click occurs on a record (card).
     */
    'onCardClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved out a record (card).
     */
    'onCardMouseout'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the event when mouse is moved over a record (card).
     */
    'onCardMouseover'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires the "row:click" and "record:click" event when a click occurs on a record (row).
     */
    'onRecordClick'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the mouse cursor leaves the record (row).
     */
    'onRecordMouseout'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires when the mouse cursor enter the record (row).
     */
    'onRecordMouseover'?: ((this: Window, ev: CustomEvent) => any) | null;
    /**
     * @description Fires event when click on a header cell.
     */
    'onHeaderClick'?: ((this: Window, ev: CustomEvent) => any) | null;
  }

  interface CatchAll {
    [attr: string]: any;
  }

  namespace ZingGridAttributes {
    interface ZGButton {
      /**
       * @description Sets the action of the button
       */
      action?: string;

      /**
       * @description Set to a template or a function to return true or false to set the disabled state
       * The function's callback receives rowData and zg-cell object if in a cell
       */
      customDisabled?: string;

      /**
       * @description Sets the tooltip in the case of custom buttons.  Can override the default tooltip on builtin buttons
       */
      customTooltip?: string;

      /**
       * @description Presence of attribute determines if the button is disabled or not
       */
      disabled?: boolean;

      /**
       * @description By default, action buttons have no border and custom buttons do.
       * You can force a border by setting the "[force-border]" attribute and you can force no border by setting "[force-border="disabled"]"
       */
      forceBorder?: string | boolean;

      /**
       * @description A custom function to call on button click
       */
      handler?: string;

      /**
       * @description Sets the icon for the button
       */
      icon?: string;
    }

    interface ZGCaption {
      /**
       * @description The alignment of content in the caption
       */
      align?: string;

      /**
       * @description Indicates where to position the caption
       */
      position?: string;
    }

    interface ZGCard {
      /**
       * @description Sets the custom editor
       */
      editor?: string;

      /**
       * @description Points to an external template element to be used as the template for the card's editor.
       */
      editorTemplate?: string;

      /**
       * @description 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?: string;

      /**
       * @description Points to an external template element to be used as the template for the card's render.
       */
      rendererTemplate?: string;
    }

    interface ZGCheckbox {
      /**
       * @description Presence of attribute determines if the checkbox is checked
       */
      checked?: boolean;
    }

    interface ZGColumn {
      /**
       * @description Aligns the contents of the cell
       */
      align?: 'center' | 'left' | 'right';

      /**
       * @description If the index is an array of objects, use array-index to indicate which index of the array object to include
       */
      arrayIndex?: string;

      /**
       * @description If the index is an array, you can use array-slice to indicate which array indexes to include.
       */
      arraySlice?: string | number;

      /**
       * @description Presence of attribute forces a border on the button.  Setting to "disabled" removes the default border.
       */
      buttonBorder?: boolean | string;

      /**
       * @description The type of "word-break" style for body cells. When not set, "cell-break" style is "normal" by default.
       * If the width of a column is set, "cell-break" is "word" by default.
       */
      cellBreak?: 'all' | 'ellipsis' | 'normal' | 'word' | 'none';

      /**
       * @description The class to be set directly on "<zg-cell>" within the column. "cell-class" applied to
       * "<zg-column>" will overwrite the "cell-class" applied to "<zing-grid>".
       */
      cellClass?: string;

      /**
       * @description Sets the execution method of custom 'icon' type tooltips to either activate on hover or click of the icon
       */
      cellTooltipAction?: 'click' | 'hover';

      /**
       * @description Sets the hover delay in milliseconds before displaying the tooltip
       */
      cellTooltipDelay?: number;

      /**
       * @description Specifies the icon to use for the cell tooltip trigger icon when using the info column type
       */
      cellTooltipIcon?: string;

      /**
       * @description Sets the tooltip-position for the cell
       */
      cellTooltipPosition?: 'top' | 'left' | 'right' | 'bottom';

      /**
       * @description Gets the name of the user's custom render function, on window, to use the function's return value as the tooltip content
       */
      cellTooltipRenderer?: string;

      /**
       * @description Points to an external template element to be used as the template for the tooltip display
       */
      cellTooltipTemplate?: string;

      /**
       * @description Sets the tooltip text for the cell of the column.  Can pass this value to renderer or template if using
       */
      cellTooltipText?: string;

      /**
       * @description Sets the style to use for the tooltips.  Uses the "default" style by default.  Can set to "system" to match the tooltips used on icons throughout "<zing-grid>".
       */
      cellTooltipType?: 'default' | 'system';

      /**
       * @description When an additional HTML element is added to the renderer, as in the case of image and url,
       * "content-style" will be put into a style attribute directly on the element.
       */
      contentStyle?: string;

      /**
       * @description Sets the width of the content inside of the cell. Used on cells of column type
       * "element", "iframe", "image", or "url".
       */
      contentWidth?: string | number;

      /**
       * @description The data to display in each cell where the data value is null or undefined
       */
      defaultDisplay?: string;

      /**
       * @description Renderer for the details page of a column.
       * To use a custom renderer, the attribute should be set to the name of the function.
       * The renderer function takes in the following arguments, "value of index" (for each index), "domCell", and "cellObject".
       * The returned value of the renderer function is set as the innerHTML of the details dialog.
       */
      detailsRenderer?: string;

      /**
       * @description Points to an external template element to be used as the template for the column's details
       */
      detailsTemplate?: string;

      /**
       * @description Disables the drag state of a specific column when "column-drag" enabled on "<zing-grid>"
       */
      drag?: 'disabled';

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

      /**
       * @description Points to an external template element to be used as the template for the column's editor
       */
      editorTemplate?: string;

      /**
       * @description Overrides the grid level "filter" attribute.  Presence of attribute enables the menu on "filter" column.  Can be set to "inline", "menu", "both", or "disabled"
       */
      filter?: string | boolean;

      /**
       * @description Comma separated list of buttons to display on the filter menu
       */
      filterButtons?: string | any[];

      /**
       * @description The list of conditions to present as options in the filter menu condition select.  Use "break" to display the horizontal separator.  Use "default" to use the built in default.
       */
      filterConditions?: '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';

      /**
       * @description Number of conditions to display in the filter menu on menu open
       */
      filterConditionsDisplay?: number;

      /**
       * @description Max number of conditions to display in the filter menu
       */
      filterConditionsMax?: number;

      /**
       * @description The condition to initially display on filter menu open
       */
      filterDefaultCondition?: 'none' | 'empty' | 'notEmpty' | 'equals' | 'notEquals' | 'beginsWith' | 'endsWith' | 'contains' | 'notContains' | 'between' | 'notBetween' | 'greaterThan' | 'greaterEqualThan' | 
        'lessThan' | 'lessEqualThan' | 'before' | 'after' | 'betweenDate' | 'today' | 'yesterday' | 'tomorrow' | 'custom filter name';

      /**
       * @description Sets the data field index to filter on if index itself has multiple fields.  The value set in index is the default.
       */
      filterIndex?: string;

      /**
       * @description Sets the key for server side filtering.  By default the filterKey is set to the filterIndex value.
       */
      filterKey?: string;

      /**
       * @description The areas to display in the filter menu.  Can be conditions, selectbox, or both
       */
      filterMenuAreas?: 'conditions' | 'selectbox' | 'both';

      /**
       * @description Determines if the filter comparison should be against the raw values or the rendered
       * This only applies to conditionals in the filter menu.
       * For iframe column type, it is restricted to raw values.
       * For aggregate column type, it is restricted to rendered values.
       */
      filterOn?: 'raw' | 'rendered';

      /**
       * @description Determines if the selectbox in the filter menu should display the values as raw or rendered values.
       */
      filterSelectboxDisplay?: 'raw' | 'rendered';

      /**
       * @description Action that fires the filter event from the filter menu.
       */
      filterTrigger?: 'button' | 'change';

      /**
       * @description 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).
       */
      filterer?: string;

      /**
       * @description The aggregate function, tokenized string, or function to evaluate for the foot cell of the column.
       * If using a function, the function takes the parameters "columnData" and "columnFieldIndex".
       */
      footCell?: 'sum' | 'avg' | 'max' | 'min' | 'count' | 'tokenized string' | 'functionName' | string;

      /**
       * @description Moves the column to the frozen panel specified
       */
      frozen?: 'left' | 'right' | string;

      /**
       * @description Includes the column to the row-group column. To enable features on grouped row columns, set attributes on "ZGColumn[type="row-group"]".
       * All other attributes on the "[group]" column(s) are ignored.
       */
      group?: boolean;

      /**
       * @description Sets a head cell on the column in the grouped row.
       */
      groupHeadCell?: 'sum' | 'avg' | 'max' | 'min' | 'count' | 'tokenized string' | 'functionName' | string;

      /**
       * @description The aggregate function to evaluate for the head cell of the column.
       * If using a function, the function takes the parameters "columnData" and "columnFieldIndex".
       */
      headCell?: 'sum' | 'avg' | 'max' | 'min' | 'count' | 'tokenized string' | 'functionName' | string;

      /**
       * @description The header name for the column.   If it is not set, the default is to format the "index" value.
       */
      header?: string;

      /**
       * @description Setting to "disabled" will turn off formatting on the header of the column.  By default, headers will
       * convert camel, dash, or kebab case to a properly spaced and capitalized string.  Or
       * set to a function name to customize formatting of header text.  The custom function takes in two parameters,
       * "index" and "headerText", and returns the formatted header text.
       */
      headerAutoFormat?: 'disabled' | 'functionName' | string;

      /**
       * @description Sets the execution method of custom 'icon' type tooltips to either activate on hover or click of the icon
       */
      headerTooltipAction?: 'click' | 'hover';

      /**
       * @description Sets the hover delay in milliseconds before displaying the header tooltip
       */
      headerTooltipDelay?: number;

      /**
       * @description Specifies the icon to use for the header tooltip trigger icon
       */
      headerTooltipIcon?: string;

      /**
       * @description Sets the header icon position in the header cells
       */
      headerTooltipIconPosition?: 'left' | 'right' | 'after-text';

      /**
       * @description Sets the tooltip icon position for the tooltip icon in the header cells
       */
      headerTooltipIconPosition?: 'left' | 'right' | 'after-text';

      /**
       * @description Sets the tooltip-position for the header cell
       */
      headerTooltipPosition?: 'top' | 'left' | 'right' | 'bottom';

      /**
       * @description Gets the name of the user's custom render function, on window, to use the function's return value as the tooltip content
       */
      headerTooltipRenderer?: string;

      /**
       * @description Points to an external template element to be used as the template for the tooltip display
       */
      headerTooltipTemplate?: string;

      /**
       * @description Sets the tooltip text for the header cell of the column.  Can pass this value to renderer or template if using
       */
      headerTooltipText?: string;

      /**
       * @description Sets what part of the header triggers the tooltip.  If set to 'icon', an info icon is added to the header.
       */
      headerTooltipTrigger?: 'text' | 'icon';

      /**
       * @description Sets the style to use for the tooltips.  Uses the "default" style by default.  Can set to "system" to match the tooltips used on icons throughout "<zing-grid>".
       */
      headerTooltipType?: 'default' | 'system';

      /**
       * @description Adds an icon next to the header text.
       */
      headerIcon?: string;

      /**
       * @description Presence of attribute hides the column
       */
      hidden?: boolean;

      /**
       * @description A single index or multiple indices (separated by comma), to associate information in the data source
       *  to a column in the grid.  Nested data keys are referenced by the member character "." (Ex. data.key).
       */
      index?: string;

      /**
       * @description Localization code used with column type "currency" and "number"
       */
      locale?: string;

      /**
       * @description The text to display in the control menu for the column.  If it is not set, it is set to the header text.
       */
      menuText?: string;

      /**
       * @description Sets the minimum width of the column in pixels
       */
      minWidth?: number;

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

      /**
       * @description Points to an external template element to be used as the template for the column's renderer
       */
      rendererTemplate?: string;

      /**
       * @description Indicates that the column is required to have a value on edit
       */
      required?: boolean;

      /**
       * @description Turns on column resizing for single column.  Set to "disabled" to turn off resizing on a single column.
       */
      resizable?: 'disabled';

      /**
       * @description Sets the maximum width the column can be set to when resizing
       */
      resizableMaxWidth?: number;

      /**
       * @description Sets the minimum width the column can be set to when resizing
       */
      resizableMinWidth?: number;

      /**
       * @description Modifies the default column resizable persistence.  Set to "disabled" to turn off persistence on a single column.
       */
      resizablePersistent?: boolean;

      /**
       * @description Turns off the search on a column if "search" is present on "<zing-grid>"
       */
      search?: 'disabled';

      /**
       * @description If multiple indices are set, this is the string that separates them in the display.  By default, it is a comma.
       */
      separator?: string;

      /**
       * @description Turns off the sort on a column if "sort" is present on "<zing-grid>"
       */
      sort?: 'disabled';

      /**
       * @description Presence of attribute sorts the column data in ascending order
       */
      sortAsc?: boolean;

      /**
       * @description Presence of attribute sorts the column data in descending order
       */
      sortDesc?: boolean;

      /**
       * @description Overrides default behavior for setting special sort for international data
       */
      sortIntl?: 'disabled';

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

      /**
       * @description The type of the data stored in the column.  The column renderer/editor will behave based on the column type.
       */
      type?: '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';

      /**
       * @description Presence of attribute ignores the column in aggregation calculations
       */
      typeAggregateOmit?: boolean;

      /**
       * @description The token or aggregate value to use to display if the column is an aggregation column
       */
      typeAggregateValue?: 'sum' | 'avg' | 'max' | 'min' | 'count' | 'tokenized string' | 'functionName' | string;

      /**
       * @description Presence of attribute sets the button to be in a disabled state. Can also set to "true" or "false".
       */
      typeButtonDisabled?: boolean;

      /**
       * @description When the column type is set to "button", use "typeButtonHander" to hook up a function call to the button click.
       * Callback receives rowData, zg-cell DOM, and zg-cell object as arguments.
       */
      typeButtonHandler?: string;

      /**
       * @description When the column type is set to "button", use "typeButtonIcon" to add an icon next to the rendered button in the cell
       */
      typeButtonIcon?: string;

      /**
       * @description When the column type is set to "button", use "typeButtonLabel" to add a label to the rendered button in the cell
       */
      typeButtonLabel?: string;

      /**
       * @description When the column type is set to "button", use "typeButtonTooltip" to add a tooltip to the rendered button in the cell
       */
      typeButtonTooltip?: string;

      /**
       * @description When the column type is set to "button", use "typeButtonURL" to add a shortcut handler on button click.  The click will automatically open the url in a new window.
       */
      typeButtonUrl?: string;

      /**
       * @description When the column type is set to "checkbox", use "typeCheckboxLabel" to add a label next to the rendered checkbox in the cell
       */
      typeCheckboxLabel?: string;

      /**
       * @description Sets the color mode to configure the color picker. Choose between HSL, RGBA, and the default Hex.
       */
      typeColorMode?: string;

      /**
       * @description Disable the default color swatch UI preview with a false value.
       */
      typeColorPreview?: boolean;

      /**
       * @description By default, spaces are added into the color when in RGB or HSL mode.  Turn the spaces off by setting to "disabled"
       */
      typeColorSpaces?: string;

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

      /**
       * @description The tokenized formatting for a date column
       */
      typeDateFormat?: string;

      /**
       * @description Indicates if date should be displayed in FromNow format
       */
      typeDateFromNow?: boolean;

      /**
       * @description Sets the attribute of the custom-element in the column when "<zg-column>" has "type" set to "element"
       */
      typeElementAttributeName?: string;

      /**
       * @description Sets the tag to wrap content when "<zg-column>" has "type" set to "element".
       * If "type-element-attribute-name" isn't set, it will put the rendered data into the body of the element.
       * If "type-element-attribute-name" is set, it will set the attribute to the indexed value.
       */
      typeElementTagName?: string;

      /**
       * @description Set to function to convert shortcodes to emojis
       */
      typeEmojiShortcode?: string;

      /**
       * @description Presence of the attribute disables the display of the row count on the row-group column
       */
      typeGroupHideCount?: boolean;

      /**
       * @description Indicates the word to use if the count is plural or singular.  Comma separated with singular first.
       * The word can be referenced by the token "group.plural" and is used in a renderer or template.
       */
      typeGroupPlural?: string;

      /**
       * @description Sets a "square" ratio instead of the default "16:9"
       */
      typeIframeRatio?: 'square';

      /**
       * @description The alternative text used with the "image" type column
       */
      typeImageAlt?: string;

      /**
       * @description The alternative shape to mask the image
       */
      typeImageMask?: 'circle';

      /**
       * @description If the column type is "image", use the "type-image-src" attribute to set the src for the image.  The src will be the index value by default.
       */
      typeImageSrc?: string;

      /**
       * @description Indicates the exact numbers to display after the decimal
       */
      typeNumberDecimals?: number;

      /**
       * @description Set to "disabled" to turn off default number formatting
       */
      typeNumberFormatting?: 'disabled';

      /**
       * @description Indicates the maximum numbers to display after the decimal
       */
      typeNumberMaxDecimals?: number;

      /**
       * @description Indicates the minimum numbers to display after the decimal
       */
      typeNumberMinDecimals?: number;

      /**
       * @description When the column type is set to "radio", use "typeRadioOptions" to add rendered radio options in the cell.
       * Can also set as array of name/value pairs where the name is displayed for the given value
       */
      typeRadioOptions?: any[] | string;

      /**
       * @description Maximum value for the input box. Used with the "range" type column in edit mode.
       */
      typeRangeMax?: number;

      /**
       * @description Minimum value for the input box.  Used with "range" type column in edit mode.
       */
      typeRangeMin?: number;

      /**
       * @description Specifies the step between each legal value for the input box.  Used with "range" type column in edit mode.
       */
      typeRangeStep?: number;

      /**
       * @description The default value of a new record.  The select box in the create record will default to the specified value.
       */
      typeSelectDefaultValue?: string;

      /**
       * @description In edit mode, presence of attribute allows column type "select" to have multiple selections, instead of the default
       * of a single selection
       */
      typeSelectMultiple?: boolean;

      /**
       * @description To set the options for the select box for a "select" column when "editor" is enabled on "<zing-grid>".
       * Can also set as array of name/value pairs where the name is displayed for the given value
       */
      typeSelectOptions?: string | any[];

      /**
       * @description Keeps the selected rows selected even on page change.  This means that rows can be selected and not on the current page.
       */
      typeSelectorPagePersist?: boolean;

      /**
       * @description When the column type is set to "toggle", use "typeToggleOptions" to set the list of options for the display.
       */
      typeToggleOptions?: any[];

      /**
       * @description When the column type is set, the render and value will be the same.  This prevents the default creating of true/false for toggles.
       */
      typeToggleRenderValue?: boolean;

      /**
       * @description If the column type is "url", use this attribute to reference any "<zg-icon>" within the library
       * to replace the link text with this icon.
       */
      typeUrlIcon?: 'link' | 'outsidearrow';

      /**
       * @description If the column type is "url", use the "type-url-src" attribute to set the src for the link.  The link will be the index value by default.
       */
      typeUrlSrc?: string;

      /**
       * @description If the column type is "url", use this attribute to set the target window of the click.
       * Uses the same values as HTML "<a>" "[target]" attribute.  "_blank" by default
       */
      typeUrlTarget?: string;

      /**
       * @description If the column type is "url", use the "type-url-text" attribute to set the text displayed for the link.
       */
      typeUrlText?: string;

      /**
       * @description Sets the validation error message for the column.  Overrides any other settings.
       */
      validationErrorMessage?: string;

      /**
       * @description Sets the validation required message for the column.  Overrides any other settings.
       */
      validationRequiredMessage?: string;

      /**
       * @description Sets the validation method for the column.  Overrides the default for the column type
       */
      validator?: string | string;

      /**
       * @description Used in the case of automatically removing columns on resize.  Columns without a "visibility-priority" never
       * gets removed. The rest of the columns are removed from highest "visibility-priority" value to the lowest.
       */
      visibilityPriority?: number;

      /**
       * @description Sets the width of the column.
       */
      width?: 'fit' | 'fitheader' | 'fitcontent' | 'stretch' | '10%' | '150px' | '150' | 'min-content' | 'max-content' | string | number;
    }

    interface ZGData {
      /**
       * @description Adapter is a shortcut to set known options for specific third party datasets.  Currently supports "graphql" and  "firebase".
       * Developers could register their own custom adapters.  For more information on custom adapters, visit Guides > ZingGrid Object > registerAdapter().
       */
      adapter?: string;

      /**
       * @description Data for the grid presented as an array or object.  If set as an attribute value, the
       * data needs to be in JSON format.
       */
      data?: any;

      /**
       * @description 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.
       */
      idKey?: string;

      /**
       * @description 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.
       */
      options?: any;

      /**
       * @description Specifies the absolute or relative URL to fetch data from to populate the grid
       */
      src?: string;
    }

    interface ZGDialog {
      /**
       * @description Callback method to call on custom dialog when the dialog's "cancel"
       * button is clicked
       */
      cancel?: string;

      /**
       * @description Callback method to call on custom dialog when the dialog's "confirm"
       * button is clicked
       */
      confirm?: string;

      /**
       * @description Sets the dialog's header 'label' text
       */
      label?: string;

      /**
       * @description The presence of the specification-standard "open" attribute designates whether the dialog is shown or hidden
       */
      open?: string;
    }

    interface ZGIcon {
      /**
       * @description Sets the icon type of "<zg-icon>"
       */
      name?: string;
    }

    interface ZGInput {
      /**
       * @description The built-in behavior and display of the input.  Gets and sets the associated grid property.
       */
      action?: string;

      /**
       * @description The type of the input if not using a built-in action
       */
      type?: string;

      /**
       * @description The value of the input
       */
      value?: string;
    }

    interface ZGMenu {
      /**
       * @description Presence 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.
       */
      replace?: boolean;
    }

    interface ZGPager {
      /**
       * @description Sets the number of records or rows to display per page
       */
      pageSize?: number;

      /**
       * @description Sets the number of cards to display per page when in card mode
       */
      pageSizeCard?: number;

      /**
       * @description Sets the number of rows to display per page when in row mode
       */
      pageSizeRow?: number;

      /**
       * @description Determines which type of pagination to use, input or buttons
       */
      pagerType?: string;

      /**
       * @description Determines max number of page buttons to display.  Default is 5.
       */
      pagerButtonLimit?: number;

      /**
       * @description Indicates where to position the pager
       */
      position?: string;

      /**
       * @description Sets the options for page size in "zg-option-list"
       */
      sizeOptions?: string;
    }

    interface ZGParam {
      /**
       * @description Name of parameter
       */
      name?: string;

      /**
       * @description The value for given data key.  If the value is an object, format as JSON encoded version of string.
       */
      value?: string;
    }

    interface ZGSelect {
      /**
       * @description The actions of the select dropdown. The current option is pagesize.
       */
      action?: string;

      /**
       * @description The comma separated string list of options to go into the Select Element
       */
      options?: string;

      /**
       * @description The default value of the select dropdown
       */
      value?: string;
    }

    interface ZGSource {
      /**
       * @description Indicates where to position the source
       */
      position?: string;
    }

    interface ZGText {
      /**
       * @description Specifies what value to generate in text field.  Current built-in options are
       * pager-related information.
       */
      value?: string;
    }

    interface ZingGrid {
      /**
       * @description Adds aggregate column and sets the type-aggregate-value to the specified value
       */
      aggregate?: string;

      /**
       * @description Aligns the contents of the grid's text
       */
      align?: 'center' | 'left' | 'right';

      /**
       * @description Presence of attribute indicates the grid allows batch editing and displays the controls.
       * In batch edit mode, changes can be made to cells that do not have edit disabled or are not a part of the "recordkey" column.
       */
      batchEdit?: boolean;

      /**
       * @description Sets the message to display when making batch edits.
       * Can use the following tokens: [[changes]], [[deleted]], [[fieldsEdited]], [[inserted]], [[modified]], [[recordsEdited]].
       * Can append 'Message' to any of the above for a string description.
       */
      batchEditStatus?: string;

      /**
       * @description Turns off the tooltips on all buttons in the grid
       */
      buttonTooltipDisabled?: boolean;

      /**
       * @description The caption for the grid
       */
      caption?: string;

      /**
       * @description Specifies the defined "<zg-card>" of the grid.  More appropriate to use "<zg-card>" in most cases or set the property programmatically.
       */
      card?: any;

      /**
       * @description The type of "word-break" style for body cells. When not set, "cell-break" style is "normal" by default.
       * If the width of a column is set, "cell-break" is "word" by default.
       * To overwrite "cell-break" for cells in a specific column, set "cell-break" for that column.
       */
      cellBreak?: 'all' | 'ellipsis' | 'normal' | 'word';

      /**
       * @description 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".
       */
      cellClass?: string;

      /**
       * @description Turns cell editing on or off. Automatically turned on when setting "editor" or "editor-controls".
       */
      cellEditor?: 'disabled' | boolean;

      /**
       * @description Turns off keyboard nav cell focus if set to disabled
       */
      cellFocus?: 'disabled';

      /**
       * @description Sets the execution method of custom 'icon' type tooltips to either activate on hover or click of the icon
       */
      cellTooltipAction?: 'click' | 'hover';

      /**
       * @description Sets the hover delay in milliseconds before displaying the tooltip. If delay is not specified,
       * it is 1000ms on cell tooltips without an icon and 0ms on cell tooltips with an icon.
       */
      cellTooltipDelay?: number;

      /**
       * @description Specifies the icon to use for the info column types
       */
      cellTooltipIcon?: string;

      /**
       * @description Sets the tooltip-position for the cell
       */
      cellTooltipPosition?: 'top' | 'left' | 'right' | 'bottom';

      /**
       * @description Gets the name of the user's custom render function, on window, to use the function's return value as the tooltip content
       */
      cellTooltipRenderer?: string;

      /**
       * @description Points to an external template element to be used as the template for the tooltip display
       */
      cellTooltipTemplate?: string;

      /**
       * @description Sets the style to use for the tooltips.  Uses the "default" style by default.  Can set to "system" to match the tooltips used on icons t