Getting Started

Chart Elements

Integrations

ZingGrid Functions

Below we show you how to define attributes that can be assigned functions on ZingGrid.

Card Renderer

Defined by the renderer attribute on the <zg-card> tag, this is a lifecycle hook used when creating cells in card mode.

function cardRendererFunction(record, cellDOMRef, rowRef)

Arguments
Name	Type	Optional	Description
record	Object	true	The direct record info associated with that row
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
rowRef	Object	true	An object containing various row, cell, and ZingGrid information

<zg-card renderer="cardRenderer">
  <div>
    <h2>[[record.breed]]</h2>
    <span>Name: [[record.name]]</span>
    <hr>
    <select>
      <option value="" disabled selected>Please Choose One</option>
    </select>
  </div>
</zg-card>

// define custom card renderer and assign content 
// and event listeners inside function
function cardRenderer(record, cellDOMRef, cellRef) {
  const dogBreeds = [
    'Cane Corso',
    'Pug',
    'Corgi',
    'Pomeranian',
    'Great Dane',
    'Frenchie',
  ];
  
  // get reference to select dropdown
  const selectDropdown = cellDOMRef.querySelector('select');
  
  // sort breeds and populate select dropdown
  dogBreeds.sort().forEach(breed => {
    const breedOption = document.createElement('option');
    breedOption.textContent = breed;
    breedOption.value = breed;
    selectDropdown.appendChild(breedOption);
  });
  
  // add events in renderer as well
  selectDropdown.addEventListener('change', (e) => {
    const newType = e.target.value;
    alert(`Select dropdown changed to: ${newType}`);
  });
}

Here is a complete grid that runs a card renderer function:

Cell Class

Defined by the cell-class attribute on the <zg-column> tag, this is a way to dynamically render a CSS class to cells.

function cellClassFunction(...indexValues, cellDOMRef,cellRef)

Arguments
Name	Type	Optional	Description
indexValues	*	true	The index value defined on `<zg-column>` index="1,2,n" where the amount of arguments is dependent on the amount of index values defined. If you defined two index values, the initial two function arguments are reserved for these indices. The last two arguments are for `cellDomRef` and `cellRef`.
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
cellRef	Object	true	An object containing various row, cell, and ZingGrid information

<zg-column index="breed" cell-class="singleIndex"></zg-column>

function singleIndex(breed, cellDOMRef, cellRef) {
  return `breed ${breed.replace(/\s+/g, '-').toLowerCase()}`;
}

Here is a complete grid that runs a cell class function to style cells in the grid:

Column Class

Defined by the col-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for a whole column.

function colClassFunction(columnIndex, cellDOMRef, columnRef) {...}

Arguments
Name	Type	Optional	Description
columnIndex	String	true	The index value of the column
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
columnRef	Object	true	An object containing various row, cell, and ZingGrid information

<zing-grid col-class="singleColumnClass"></zing-grid>

function singleColumnClass(index, cellDOMRef, cellRef) {
  console.log(arguments)
  if (index === 'name') return 'yellow';
  return 'red';
}

Here is a complete grid that runs a column class function to style columns in the grid:

Column Renderer

Defined by the renderer attribute on the <zg-column> tag, this is a lifecycle hook used when creating columns in row mode.

function columnRendererFunction(...indices, cellDOMRef, cellRef) {...}

Arguments
Name	Type	Optional	Description
...indices	*	true	The amount of indices defined on `<zg-column>`. If you define two indices, then you must define two arguments before `cellDOMRef`.
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
cellRef	Object	true	An object containing various row, cell, and ZingGrid information

<zg-colgroup>
  <zg-column index="custom" renderer="noIndexCellRenderer">
    <h3>[[record.name]]</h3>
    <select>
      <option value="" disabled selected>Please Choose One</option>
    </select>
  </zg-column>
</zg-colgroup>

// define custom cell renderer and assign content
// and event listeners inside function
function noIndexCellRenderer(stubArgument, cellDOMRef, cellRef) {
  const dogBreeds = [
    'Cane Corso',
    'Pug',
    'Corgi',
    'Pomeranian',
    'Great Dane',
    'Frenchie',
  ];

  // get reference to select dropdown
  const selectDropdown = cellDOMRef.querySelector('select');

  // sort breeds and populate select dropdown
  dogBreeds.sort().forEach(breed => {
    const breedOption = document.createElement('option');
    breedOption.textContent = breed;
    breedOption.value = breed;
    selectDropdown.appendChild(breedOption);
  });

  // add events in renderer as well
  selectDropdown.addEventListener('change', (e) => {
    const newType = e.target.value;
    alert(`You changed the type to: ${newType}`);
  });
}

Here is a complete grid that runs a column renderer function to create custom columns:

Foot Class

Defined by the foot-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for your footer columns.

function footClassFunction(columnIndex, cellDOMRef, columnRef) {...}

Arguments
Name	Type	Optional	Description
columnIndex	String	true	The index value of the column
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
cellRef	Object	true	An object containing various row, cell, and ZingGrid information

<zing-grid foot-class="highlightFootCells"></zing-grid>

function highlightFootCells(columnIndex, cellDOMRef, columnRef) {
  if (columnIndex === 'points') return 'yellow';
}

function headClassFunction(columnIndex, cellDOMRef, columnRef) {...}

Arguments
Name	Type	Optional	Description
columnIndex	String	true	The index value of the column
cellDOMRef	DOM Node	true	A direct reference to the DOM node for this cell
columnRef	Object	true	An object containing various footer column information

<zing-grid head-class="highlightHeadCells"></zing-grid>

function highlightHeadCells(columnIndex, cellDOMRef, columnRef) {
  if (columnIndex === 'points') return 'yellow';
}

function rowClassFunction(record, rowIndex, rowDOMRef, rowRef) {...}

Arguments
Name	Type	Optional	Description
record	Object	true	An object containing all the values in this row
rowIndex	Number	true	The index value of the row
rowDOMRef	DOM Node	true	A direct reference to the DOM node for this row
rowRef	Object	true	An object containing various row, cell, and ZingGrid information

<zing-grid row-class="rowClass"></zing-grid>

function rowClass(record, index, cellDOMRef, cellRef) {
  if (index % 2) return 'yellow';
  return 'red';
}

Here is a complete grid that calls a row class function to style the grid's rows: