--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-text --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-text.md mode: provenance representation: markdown origin_response_id: 92b6008e47e2aa91a509a95e997e0c52 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.654Z version_nonce: d591dcc8ad91eadec44ab137e7b7024d generated_at_utc: 2026-10-31T01:13:22.932Z response_nonce: 9434da9faef21137a653a8465e0d0cbd ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-text--docs) ZingGrid has a predefined set of attribute values to display information about the grid state. `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-text-web-component-dom.png "Image of the DOM relationship for the zg-text web component tag") #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-pager/) - [``](https://www.zinggrid.com/docs/api/tags/zg-menu/) - [``](https://www.zinggrid.com/docs/api/tags/zg-button/) - [``](https://www.zinggrid.com/docs/api/tags/zg-icon/) | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Manual | n/a | | [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Parent | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) | | [ZGCard](https://www.zinggrid.com/docs/api/tags/zg-card) | Parent | Manual | n/a | | [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Parent | Manual | n/a | | [ZGControlBar](https://www.zinggrid.com/docs/api/tags/zg-control-bar) | Parent | Generated | n/a | | [ZGDialog](https://www.zinggrid.com/docs/api/tags/zg-dialog) | Parent | Manual | n/a | | [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Manual | n/a | | [ZGLayoutControls](https://www.zinggrid.com/docs/api/tags/zg-layout-controls) | Parent | Generated | n/a | | [ZGLoadMask](https://www.zinggrid.com/docs/api/tags/zg-load-mask) | Parent | Manual | n/a | | [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Manual | n/a | | [ZGNoData](https://www.zinggrid.com/docs/api/tags/zg-no-data) | Parent | Manual | n/a | | [ZGPager](https://www.zinggrid.com/docs/api/tags/zg-pager) | Parent | Generated, Manual | n/a | ## Usage `` 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. ```html
Showing - of rows
``` ## Attributes There is a value attribute to specify what is generated in the text field. ### value Specifies what value to generate in text field. Current built-in options are pager-related information. - Type: String - Default: `""` - Accepted values: currpage, pagecount, pagesize, startrow, endrow, rowcount - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/JVDZATK6) ## Type Attribute Values ### value Specifies what value to generate in text field. Current built-in options are pager-related information. - Type: String - Default: `""` - Accepted values: currpage, pagecount, pagesize, startrow, endrow, rowcount - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/JVDZATK6) ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. **Example Usage** | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-text-color` | Browser's default value | Sets the font color of text | [Example code](https://app.zingsoft.com/demos/embed/6MC0B6AC) | | `--zg-text-font-family` | Browser's default value | Sets the font family of text | [Example code](https://app.zingsoft.com/demos/embed/0WX0EZZ8) | | `--zg-text-font-size` | Browser's default value | Sets the font size of text | [Example code](https://app.zingsoft.com/demos/embed/R9RX1WRC) | | `--zg-text-font-style` | Browser's default value | Sets the font style of text | [Example code](https://app.zingsoft.com/demos/embed/LE7Z8B73) | | `--zg-text-font-weight` | Browser's default value | Sets the font weight of text | [Example code](https://app.zingsoft.com/demos/embed/J9EWFRHT) | | `--zg-text-line-height` | .8 | Sets the line height of text | [Example code](https://app.zingsoft.com/demos/embed/W14MFSEF) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-text { font-size: 2rem; } ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content ``` Below is a list of all the associated ZGText slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Text value. |