Docs

<zg-text>

Interactive Storybook Playground

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

ZGText Relationships
Component Relationship Type Ancestor
ZGCaption Parent Manual n/a
ZGCell Parent Generated ZGBody
ZGCard Parent Manual n/a
ZGColumn Parent Manual n/a
ZGControlBar Parent Generated n/a
ZGDialog Parent Manual n/a
ZGFooter Parent Manual n/a
ZGLayoutControls Parent Generated n/a
ZGLoadMask Parent Manual n/a
ZGMenu Parent Manual n/a
ZGNoData Parent Manual n/a
ZGPager Parent Generated, Manual n/a

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

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
Top

Type Attribute Values

These are the accepted values for the type attribute:

zg-text type Values
Name Description Demo
currpage Display the current page of the grid.
pagecount Displays the total amount of pages in the grid
pagesize Displays the current page-size of the grid
startrow Displays the current starting row index, of the current page, in the grid
endrow Displays the current end row index, of the current page, in the grid
rowcount Displays the total amount of rows in the grid
Top

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
Name Default Description Demo CSS Ref
--zg-text-color Browser's default value Sets the font color of text
--zg-text-font-family Browser's default value Sets the font family of text
--zg-text-font-size Browser's default value Sets the font size of text
--zg-text-font-style Browser's default value Sets the font style of text
--zg-text-font-weight Browser's default value Sets the font weight of text
--zg-text-line-height .8 Sets the line height of text
Top

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
Name Description Demo
Text value.
Top

[api: <zg-text>]