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.

Image of the DOM relationship for the zg-text web component tag

Related Web Components

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>

value

String

Description

Specifies what value to generate in text field. Current build-in options are pager-related information.

Default Value

""

Accepted Values

  • "currpage"
  • "pagecount"
  • "pagesize"
  • "startrow"
  • "endrow"
  • "rowcount"
Demo

Type Attribute Values

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

zg-text type Values
NameDescriptionDemo
currpageDisplay the current page of the grid.
pagecountDisplay the total amount of pages in the grid.
pagesizeDisplay the current page-size of the grid.
startrowDisplay the current starting row index, of the current page, in the grid.
endrowDisplay the current end row index, of the current page, in the grid.
rowcountDisplay the total amount of rows in the grid.

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;
}
ZGText CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-text-colorBrowser's default valueSets the font color of text
--zg-text-font-familyBrowser's default valueSets the font family of text
--zg-text-font-sizeBrowser's default valueSets the font size of text
--zg-text-font-styleBrowser's default valueSets the font style of text
--zg-text-font-weightBrowser's default valueSets the font weight of text
--zg-text-line-height.8Sets the line height of text

CSS Selector

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

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