zg-text

ZingGrid has a predefined set of attribute values to display information about the grid state. <zg-text> is a self-contained web component so you can display the value anywhere in the grid.

Related Web Components

• <zg-pager>
• <zg-menu>
• <zg-button>
• <zg-icon>

Usage

<zg-text> is a ZingGrid specific text value that is bound to the status of the grid, as defined by the value attribute. The field can be manually inserted by a developer, but is more commonly added by the use of certain grid features, like paging. The element can inherently be styled through CSS variables or targeting the tag directly.

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-footer>
    <div>
      <span>Showing</span>
      <zg-text value="currpage"></zg-text>
      <span>-</span>
      <zg-text value="pagecount"></zg-text>
      <span>of</span>
      <zg-text value="pagecount"></zg-text>
      <span>rows</span>
    </div>
    <div>
      <zg-button action="prevpage"></zg-button>
      <zg-text value="currpage"></zg-text>
      <zg-button action="nextpage"></zg-button>
    </div>
  </zg-footer>
</zing-grid>

Attributes

A custom, styled button that can be used both for internal grid-related action and for user-specific actions. It is stylable via CSS. Some buttons are automatically inserted when a feature that uses it enabled, like pager, while others <zg-button>(s) are inserted manually by the user.

Example Usage

<zing-grid>
  <zg-button disabled action="reload"></zg-button>
</zing-grid>

Type Attribute Values

The accepted values for the type <zg-text type=""> attribute.

CSS Variables

All the associated --zg-text CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

Example Usage

root: {
  --zg-text-color: red;
}

CSS Selector

<zg-text> can be styled by common CSS selectors.

zg-text {
  font-size: 2rem;
}