--- 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-pager --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-pager.md mode: provenance representation: markdown origin_response_id: 095bb3acfe17fedcdeaf173af6fa6443 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.645Z version_nonce: 8cfa9b5a5cb44f91d3c992d450db3d14 generated_at_utc: 2026-11-05T05:03:44.446Z response_nonce: 4df535252d9ac0aefa332f20dbe6c3db ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-pager--docs) The `` tag is a web component that controls the styling and display of the grid's paging controls. ![Image of the DOM relationship for the zg-pager web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-pager-web-component-dom.png "Image of the DOM relationship for the zg-pager web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated, Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Generated, Manual | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Generated, Manual | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Generated, Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-text/) - [``](https://www.zinggrid.com/docs/api/tags/zg-select/) - [``](https://www.zinggrid.com/docs/api/tags/zg-button/) - [``](https://www.zinggrid.com/docs/api/tags/zg-icon/) ## Usage A `` tag can be manually inserted inside the grid as slotted content or automatically inserted when enabled via the `pager` attribute. It is styleable via CSS variables or the `zg-pager` CSS selector. You can insert ` ``` You can slot the `` tag as well: ```html ``` ## Attributes There are a couple attributes to help position the `` element in the grid and align the text within the ``. **Example Usage** ```html Hello World ``` ### page-size Sets the number of records or rows to display per page - Type: Number - Default: `50` - Accepted values: 10 - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/81Z219UH) ### page-size-card Sets the number of cards to display per page when in card mode - Type: Number - Default: `page-size value` - Accepted values: 10 - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/686MIOTN) ### page-size-row Sets the number of rows to display per page when in row mode - Type: Number - Default: `page-size value` - Accepted values: 10 - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/97IV0UWT) ### pager-type Determines which type of pagination to use, input or buttons - Type: String - Default: `''` - Accepted values: "button-text", "button-arrows" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/H7FW1HCJ) ### pagerButtonLimit Determines max number of page buttons to display. Default is 5. - Type: Number - Supported versions: 2.x ### position Indicates where to position the pager - Type: String - Default: `"bottom"` - Accepted values: "top", "bottom" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/S32UQ3Q4) ### size-options Sets the options for page size in `zg-option-list` - Type: String - Default: `"5,10,50"` - Accepted values: "2,4,6" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/SHG55V21) ## CSS Variables `` can be styled with CSS variables, like so: ```css :root { --zg-pager-background: red; } ``` Below is a list of all the associated `--zg-pager` 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. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-pager-background` | Browser's default value | Styles the background of pager | [Example code](https://app.zingsoft.com/demos/embed/DSI1M4K6) | | `--zg-pager-background_button` | var(--theme-color-primary) | Styles the background of pager buttons in 'button-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/RFPJ268T) | | `--zg-pager-background_button_active` | var(--theme-color-primary) | Styles the background of active pager buttons in 'button-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/30Q3UD77) | | `--zg-pager-background_cursor` | var(--theme-color-primary) | Styles the background of pager next/previous buttons in 'cursor-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/2W0L943N) | | `--zg-pager-border` | 0 | Styles the border of pager | [Example code](https://app.zingsoft.com/demos/embed/12I3VYOI) | | `--zg-pager-border_button` | 1px solid var(--theme-border-color) | Styles the bottom border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/GMCTJPNT) | | `--zg-pager-border_button_active` | 1px solid var(--theme-border-color) | Styles the bottom border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/S0T1BVWQ) | | `--zg-pager-border-bottom` | var(--zg-pager-border, 0) | Styles the bottom border of pager | [Example code](https://app.zingsoft.com/demos/embed/HLBTB6HX) | | `--zg-pager-border-bottom_button` | var(--zg-pager-border_button) | Styles the bottom border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/SX86NT1Z) | | `--zg-pager-border-bottom_button_active` | var(--zg-pager-border-bottom_button_active, var(--zg-pager-border-bottom_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); | Styles the bottom border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/DTH3NBH8) | | `--zg-pager-border-bottom_cursor` | 0 | Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/6GTM4FBP) | | `--zg-pager-border-left` | var(--zg-pager-border, 0) | Styles the left border of pager | [Example code](https://app.zingsoft.com/demos/embed/A3EQ97B7) | | `--zg-pager-border-left_button` | var(--zg-pager-border_button) | Styles the left border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/7ZFWGWPZ) | | `--zg-pager-border-left_button_active` | var(--zg-pager-border-left_button_active, var(--zg-pager-border-left_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); | Styles the left border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/DMB3KOV6) | | `--zg-pager-border-left_cursor` | 0 | Styles the left border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/RYTF8WCR) | | `--zg-pager-border-radius_button` | 50% | Applies border radius to the pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/C5XSS45A) | | `--zg-pager-border-radius_button_active` | 50% | Applies border radius to the pager next/previous buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/4NN6CW5X) | | `--zg-pager-border-radius_cursor` | 50% | Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/NVMU8M40) | | `--zg-pager-border-right` | var(--zg-pager-border, 0) | Styles the right border of pager | [Example code](https://app.zingsoft.com/demos/embed/8PKZ2V87) | | `--zg-pager-border-right_button` | var(--zg-pager-border_button) | Styles the right border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/E0Z1Z61Z) | | `--zg-pager-border-right_button_active` | var(--zg-pager-border-right_button_active, var(--zg-pager-border-right_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); | Styles the right border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/8IH4UBJB) | | `--zg-pager-border-right_cursor` | 0 | Styles the right border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/CROQ1YCC) | | `--zg-pager-border-top` | var(--zg-pager-border) | Styles the top border of pager | [Example code](https://app.zingsoft.com/demos/embed/S7J5KA7S) | | `--zg-pager-border-top_button` | var(--zg-pager-border_button) | Styles the top border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/GUTPFSA2) | | `--zg-pager-border-top_button_active` | var(--zg-pager-border-top_button_active, var(--zg-pager-border-top_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); | Styles the top border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/3P68ZU21) | | `--zg-pager-border-top_cursor` | 0 | Styles the top border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/FUJKHWQ4) | | `--zg-pager-box-shadow` | 0 | Applies a box shadow behind the pager | [Example code](https://app.zingsoft.com/demos/embed/E3ZE0EHX) | | `--zg-pager-child-margin` | 0 5px | Sets the margin of pager items | [Example code](https://app.zingsoft.com/demos/embed/BHPOIOVV) | | `--zg-pager-color` | var(--zing-grid-color), var(--theme-color) | Sets the color of pager text | [Example code](https://app.zingsoft.com/demos/embed/C1JDZLU9) | | `--zg-pager-color_button` | 26px | Sets the color of pager buttons in 'button-text' mode | [Example code](https://app.zingsoft.com/demos/embed/3PUA1QDD) | | `--zg-pager-color_button_active` | 26px | Sets the color of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/65T7U4OO) | | `--zg-pager-font-size` | Browser's default value | Sets the font size of pager text | [Example code](https://app.zingsoft.com/demos/embed/4MA9LSWA) | | `--zg-pager-height` | 1px | Sets the minimum height of pager | [Example code](https://app.zingsoft.com/demos/embed/5LQ86G4I) | | `--zg-pager-height_button` | 26px | Sets the height of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/NU8PS15R) | | `--zg-pager-height_button_active` | 26px | Sets the height of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/YQK9B3TR) | | `--zg-pager-height_cursor` | 21px | Sets the height of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/1Q1Y5Y7U) | | `--zg-pager-margin` | 0 | Sets the margin of pager | [Example code](https://app.zingsoft.com/demos/embed/SQZ9LICW) | | `--zg-pager-padding` | 0 var(--theme-padding_x) | Sets the padding of pager | [Example code](https://app.zingsoft.com/demos/embed/DFS7ZU1P) | | `--zg-pager-text-margin` | 0 2px | Sets the margin of pager text | [Example code](https://app.zingsoft.com/demos/embed/JRVD4KCC) | | `--zg-pager-width_button` | 26px | Sets the width of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/TND8N5QP) | | `--zg-pager-width_button_active` | 26px | Sets the width of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/JGGN84RM) | | `--zg-pager-width_cursor` | 21px | Sets the width of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/XDFDMJDM) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-pager { padding: 2rem; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-pager::part(pager) { background-color: red; } ``` Below is a list of all the associated ZGPager shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `center` | The container for the center content of the pager | | `left` | The container for the left content of the pager | | `pager` | The container for the entire pager | | `pager-inner` | The inner container for the pager | | `right` | The container for the right content of the pager | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content Slotted Content ``` Below is a list of all the associated ZGPager slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Pager content. If used with the other pager slot, the content is placed beneath the other slots. | | `center` | Pager content placed in the center. | | `left` | Pager content placed in the left. | | `right` | Pager content placed in the right. |