<zg-pager>

The <zg-pager> 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

Related Web Components

Usage

A <zg-pager> 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 <zg-pager via the pager attribute, like so:

<zing-grid pager></zing-grid>

You can slot the <zg-pager> tag as well:

<zing-grid>
  <zg-pager></zg-pager>
</zing-grid>

Attributes

There are a couple attributes to help position the <zg-pager> element in the grid and align the text within the <zg-pager>.

Example Usage

<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-pager align="center" position="both">Hello World</zg-pager>
</zing-grid>

page-size

Number

Description

Sets the number of records or rows to display per page

Default Value

50

Accepted Values

  • 10
Demo

Description

Sets the number of cards to display per page when in card mode

Default Value

page-size value

Accepted Values

  • 10
Demo

Description

Sets the number of rows to display per page when in row mode

Default Value

page-size value

Accepted Values

  • 10
Demo

Description

Determines max number of page buttons to display. Default is 5.

Default Value

No Default Value

Accepted Values

No Example Values Demo

pagerType

String

Description

Determines which type of pagination to use, input or buttons

Default Value

''

Accepted Values

  • "button-text"
  • "button-arrows"
Demo

position

String

Description

Indicates where to position the pager

Default Value

"bottom"

Accepted Values

  • "top"
  • "bottom"
Demo

Description

Sets the options for page size in zg-option-list

Default Value

"5,10,50"

Accepted Values

  • "2,4,6"
Demo

CSS Variables

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

: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 or our Styling Basics guide to learn more about styling the grid.

ZGPager CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-pager-backgroundBrowser's default valueStyles the background of pager
--zg-pager-background_buttonvar(--theme-color-primary)Styles the background of pager buttons in 'button-pagination` mode
--zg-pager-background_button_activevar(--theme-color-primary)Styles the background of active pager buttons in 'button-pagination` mode
--zg-pager-background_cursorvar(--theme-color-primary)Styles the background of pager next/previous buttons in 'cursor-pagination` mode
--zg-pager-border0Styles the border of pager
--zg-pager-border-bottomvar(--zg-pager-border, 0)Styles the bottom border of pager
--zg-pager-border-bottom_buttonvar(--zg-pager-border_button)Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_button_activevar(--zg-pager-border_button_active)Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_cursor0Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-leftvar(--zg-pager-border, 0)Styles the left border of pager
--zg-pager-border-left_buttonvar(--zg-pager-border_button)Styles the left border of pager buttons in 'button-pagination' mode
--zg-pager-border-left_button_activevar(--zg-pager-border_button_active)Styles the left border of active pager buttons in 'button-pagination' mode
--zg-pager-border-left_cursor0Styles the left border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-radius_button50%Applies border radius to the pager buttons in 'button-pagination' mode
--zg-pager-border-radius_button_active50%Applies border radius to the pager next/previous buttons in 'button-pagination' mode
--zg-pager-border-radius_cursor50%Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-rightvar(--zg-pager-border, 0)Styles the right border of pager
--zg-pager-border-right_buttonvar(--zg-pager-border_button)Styles the right border of pager buttons in 'button-pagination' mode
--zg-pager-border-right_button_activevar(--zg-pager-border_button_active)Styles the right border of active pager buttons in 'button-pagination' mode
--zg-pager-border-right_cursor0Styles the right border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-topvar(--zg-pager-border)Styles the top border of pager
--zg-pager-border-top_buttonvar(--zg-pager-border_button)Styles the top border of pager buttons in 'button-pagination' mode
--zg-pager-border-top_button_activevar(--zg-pager-border_button_active)Styles the top border of active pager buttons in 'button-pagination' mode
--zg-pager-border-top_cursor0Styles the top border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border_button1px solid var(--theme-border-color)Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border_button_active1px solid var(--theme-border-color)Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-box-shadow0Applies a box shadow behind the pager
--zg-pager-child-margin0 5pxSets the margin of pager items
--zg-pager-colorvar(--zing-grid-color), var(--theme-color)Sets the color of pager text
--zg-pager-color_button26pxSets the color of pager buttons in 'button-pagination' mode
--zg-pager-color_button_active26pxSets the color of pager buttons in 'button-pagination' mode
--zg-pager-font-sizeBrowser's default valueSets the font size of pager text
--zg-pager-height1pxSets the minimum height of pager
--zg-pager-height_button26pxSets the height of pager buttons in 'button-pagination' mode
--zg-pager-height_button_active26pxSets the height of active pager buttons in 'button-pagination' mode
--zg-pager-height_cursor21pxSets the height of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-margin0Sets the margin of pager
--zg-pager-padding0 var(--theme-padding_x)Sets the padding of pager
--zg-pager-text-margin0 2pxSets the margin of pager text
--zg-pager-width_button26pxSets the width of pager buttons in 'button-pagination' mode
--zg-pager-width_button_active26pxSets the width of active pager buttons in 'button-pagination' mode
--zg-pager-width_cursor21pxSets the width of pager next/previous buttons in 'cursor-pagination' mode

CSS Selector

<zg-pager> can be styled by common CSS selectors, like so:

zg-pager {
  padding: 2rem;
}

Slots

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

<!-- Default slot -->
<zg-pager>Slotted Content</zg-pager>

<!-- Named slot -->
<zg-pager><span slot="center">Slotted Content</span></zg-pager>

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

ZGPager Slots
NameDescriptionDemo
Pager content. If used with the other pager slot, the content is placed beneath the other slots.
centerPager content placed in the center.
leftPager content placed in the left.
rightPager content placed in the right.

[api: <zg-pager>]