<zg-param>
Interactive Storybook Playground
ZingGrid has a predefined set of parameter name values which have default behavior for fetching and receiving data.
Related Web Components
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.
<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
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
<zg-column index="firstName" header="First"></zg-column>
</zing-grid>
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.
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.