<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 by 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

There is a value attribute to specify what is generated in the text field.

value

String

Description

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

Default Value

""

Accepted Values

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

Type Attribute Values

These are the accepted values for the type attribute:

zg-text type Values
NameDescriptionDemo
currpageDisplay the current page of the grid.
pagecountDisplays the total amount of pages in the grid
pagesizeDisplays the current page-size of the grid
startrowDisplays the current starting row index, of the current page, in the grid
endrowDisplays the current end row index, of the current page, in the grid
rowcountDisplays the total amount of rows in the grid

CSS Variables

<zg-text> can be styled with CSS variables, like so:

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

Below is a list of all the associated --zg-text CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

Example Usage

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, like so:

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

## Slots

`<zg-text>` contains placeholders to allow adding markup inside the component.

```html
<zg-text>Slotted Content</zg-text>

Below is a list of all the associated ZGText slots. Check out the full list of slots.

ZGText Slots
NameDescriptionDemo
Text value.

[api: <zg-text>]