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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-param.md
mode: provenance
representation: markdown
origin_response_id: 1ebcf639a5188791c17303750f82250e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.646Z
version_nonce: 5fc29b10b881225879e013102af2a558
generated_at_utc: 2026-10-24T14:40:58.244Z
response_nonce: 08accbb6e039241b30ad2a8044bb656d
```

# `<zg-param>`

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

ZingGrid has a predefined set of parameter name values which have default behavior for fetching and receiving data.

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGData](https://www.zinggrid.com/docs/api/tags/zg-data) | Parent | Manual | n/a |

#### Related Web Components

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

## Usage

`<zg-param>` `name` values are an extension of the ZingGrid library and are used to increase and alter fetching data or alter data on return from fetch.

```html
<zing-grid
  pager
  page-size="5"
  layout="row"
  layout-controls="disabled"
  viewport-stop>
  <zg-caption>
    ZingGrid Star Wars Server Paging
    <span class="button" id="reloadBtn">Reload Demo</span>
  </zg-caption>
  <zg-data>
    <!-- define the main source for the API -->
    <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>

    <!-- define the path in the JSON to get the array of results.
        In this case it is body.results -->
    <zg-param name="recordPath" value="results"></zg-param>

    <!-- if loadByPage is set to true it will go to the
      server for each new page of data -->
    <zg-param name="loadByPage" value="true"></zg-param>

    <!-- define the "page" query parameter -->
    <zg-param name="pageKey" value="page"></zg-param>

    <!-- Need to tell ZG how many records were returned so it knows
        how to divide up the page-size -->
    <zg-param name="countPath" value="count"></zg-param>

    <!-- define the path in the result JSON to find next/prev urls -->
    <zg-param name="nextPath" value="next"></zg-param>
    <zg-param name="prevPath" value="previous"></zg-param>

  </zg-data>
  <zg-colgroup>
    <zg-column index="name"></zg-column>
    <zg-column index="height"></zg-column>
    <zg-column index="mass"></zg-column>
    <zg-column index="hair_color"></zg-column>
    <zg-column index="eye_color"></zg-column>
    <zg-column index="skin_color"></zg-column>
  </zg-colgroup>
</zing-grid>
```

## Attributes

`<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 this when setting complex values for the `value` attribute to use JSON encoded values). As a non-visual element, CSS styling does not apply to `<zg-param>`.

**Example Usage**

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

### name

Name of parameter

- Type: String
- Default: `""`
- Accepted values: adapter, idKey, newIndexPath, recordPath, nodePath, searchKey, search, serverFilter, filterFunction, sortByKey, sortBy, sortDirKey, sortDir, batchEditStatus, startAtKey, startAtValue, limitToKey, limitTo, offsetKey, offsetValue, pageKey, countPath, cursor, loadByPage, loadByScroll, hasNextPath, nextPath, nextIDPath, nextIDKey, hasPrevPath, prevPath, prevIDPath, prevIDKey, pageBase, selectorKey, csvCaption, csvDelimiter, csvHeader, csvLineSeparator, tableHide, tableHead, tableDataFormat, tableHeadFormat, collection, subscription, dataTable, createOptions, readOptions, updateRowOptions, updateCellOptions, updateOptions, deleteOptions, src, createSrc, readSrc, updateRowSrc, updateCellSrc, deleteSrc, restmode, method, createMethod, readMethod, updateRowMethod, updateCellMethod, deleteMethod, headers, queryString, body, bodyMethodSuffix, createBody, readBody, updateRowBody, updateCellBody, deleteBody, createCustomFunction, readCustomFunction, updateCellCustomFunction, updateRowCustomFunction, deleteCustomFunction, serverErrorMessage, serverErrorPath, exclude, cdataEscape, requestType, responseType, dataType, urlSuffix, mode
- Supported versions: 1.x, 2.x

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

### value

The value for given data key. If the value is an object, format as JSON encoded version of string.

- Type: String
- Default: `""`
- Accepted values: '{"src":"http://example.com/deletestate/","method":"GET"}'
- Supported versions: 1.x, 2.x

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

## Name Attribute Values

The list below is detailed information about the `name` values used in `<zg-param>`. The **example input** column demonstrates the type of value to feed to the `name` attribute. The **related attributes** column shows other parameters that usually go in conjunction with the current one.

### name

Name of parameter

- Type: String
- Default: `""`
- Accepted values: adapter, idKey, newIndexPath, recordPath, nodePath, searchKey, search, serverFilter, filterFunction, sortByKey, sortBy, sortDirKey, sortDir, batchEditStatus, startAtKey, startAtValue, limitToKey, limitTo, offsetKey, offsetValue, pageKey, countPath, cursor, loadByPage, loadByScroll, hasNextPath, nextPath, nextIDPath, nextIDKey, hasPrevPath, prevPath, prevIDPath, prevIDKey, pageBase, selectorKey, csvCaption, csvDelimiter, csvHeader, csvLineSeparator, tableHide, tableHead, tableDataFormat, tableHeadFormat, collection, subscription, dataTable, createOptions, readOptions, updateRowOptions, updateCellOptions, updateOptions, deleteOptions, src, createSrc, readSrc, updateRowSrc, updateCellSrc, deleteSrc, restmode, method, createMethod, readMethod, updateRowMethod, updateCellMethod, deleteMethod, headers, queryString, body, bodyMethodSuffix, createBody, readBody, updateRowBody, updateCellBody, deleteBody, createCustomFunction, readCustomFunction, updateCellCustomFunction, updateRowCustomFunction, deleteCustomFunction, serverErrorMessage, serverErrorPath, exclude, cdataEscape, requestType, responseType, dataType, urlSuffix, mode
- Supported versions: 1.x, 2.x

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

### value

The value for given data key. If the value is an object, format as JSON encoded version of string.

- Type: String
- Default: `""`
- Accepted values: '{"src":"http://example.com/deletestate/","method":"GET"}'
- Supported versions: 1.x, 2.x

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

## CSS Variables

There are no CSS variables available for the `<zg-param>` web component.

## CSS Selector

As a non-visual element, you should not apply styles to this tag.

## Slots

There are no slots available for the `<zg-param>` web component.