---
title: "ZingGrid Functions Usage | Docs"
description: "Learn how to define attributes that can be assigned functions on ZingGrid, including cell renderer, cell class, column class, and more!"
url: https://www.zinggrid.com/docs/v1/api/methods/functions
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/methods/functions.md
mode: provenance
representation: markdown
origin_response_id: 793ddec9ac34170740ebd58feadfe01e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.739Z
version_nonce: 8fa8515611d1416737c29b139968a30a
generated_at_utc: 2026-11-08T23:36:16.355Z
response_nonce: 7bd0fc691d6e4f6ffe2f96c891d1421d
```

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

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

### HTML

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

### JavaScript

```javascript
// 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}`);
  });
}
```
### Card Renderer Function Grid

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

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

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

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

### HTML

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

### JavaScript

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

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

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

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

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

### HTML

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

### JavaScript

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

### Column Class Function Grid
Here is a complete grid that runs a column class function to style columns in the grid:

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

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

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

### HTML

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

### JavaScript

```javascript
// 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}`);
  });
}
```

### Column Renderer Function Grid

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

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

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

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

### HTML

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

### JavaScript

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

### Foot Class Function Grid
Here is a complete grid that calls a foot class function to highlight the grid's foot cells:

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

## Head Class
Defined by the `head-class` attribute on the `<zing-grid>` tag, this is a way to define a dynamic class for your column headers.

### Function Definition

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

### HTML

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

### JavaScript

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

### Head Class Function Grid
Here is a complete grid that calls a function to highlight the grid's head cells:

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

## Row Class
Defined by the `row-class` attribute on the `<zing-grid>` tag, this is a way to define a dynamic class for a whole row.

### Function Definition

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

### HTML

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

### JavaScript

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

### Row Class Function Grid
Here is a complete grid that calls a row class function to style the grid's rows:

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