<zg-pager>

Interactive Storybook Playground

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

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>

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 which type of pagination to use, input or buttons

Default Value

''

Accepted Values

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

Description

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

Default Value

No Default Value

Accepted Values

No Example Values 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
Top

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
Name Default Description Demo CSS Ref
--zg-pager-background Browser's default value Styles the background of pager
--zg-pager-background_button var(--theme-color-primary) Styles the background of pager buttons in 'button-pagination` mode
--zg-pager-background_button_active var(--theme-color-primary) Styles the background of active pager buttons in 'button-pagination` mode
--zg-pager-background_cursor var(--theme-color-primary) Styles the background of pager next/previous buttons in 'cursor-pagination` mode
--zg-pager-border 0 Styles the border of pager
--zg-pager-border-bottom var(--zg-pager-border, 0) Styles the bottom border of pager
--zg-pager-border-bottom_button var(--zg-pager-border_button) Styles the bottom border of pager buttons in 'button-pagination' mode
--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
--zg-pager-border-bottom_cursor 0 Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-left var(--zg-pager-border, 0) Styles the left border of pager
--zg-pager-border-left_button var(--zg-pager-border_button) Styles the left border of pager buttons in 'button-pagination' mode
--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
--zg-pager-border-left_cursor 0 Styles the left border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-radius_button 50% Applies border radius to the pager buttons in 'button-pagination' mode
--zg-pager-border-radius_button_active 50% Applies border radius to the pager next/previous buttons in 'button-pagination' mode
--zg-pager-border-radius_cursor 50% Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-right var(--zg-pager-border, 0) Styles the right border of pager
--zg-pager-border-right_button var(--zg-pager-border_button) Styles the right border of pager buttons in 'button-pagination' mode
--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
--zg-pager-border-right_cursor 0 Styles the right border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-top var(--zg-pager-border) Styles the top border of pager
--zg-pager-border-top_button var(--zg-pager-border_button) Styles the top border of pager buttons in 'button-pagination' mode
--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
--zg-pager-border-top_cursor 0 Styles the top border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border_button 1px solid var(--theme-border-color) Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border_button_active 1px solid var(--theme-border-color) Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-box-shadow 0 Applies a box shadow behind the pager
--zg-pager-child-margin 0 5px Sets the margin of pager items
--zg-pager-color var(--zing-grid-color), var(--theme-color) Sets the color of pager text
--zg-pager-color_button 26px Sets the color of pager buttons in 'button-text' mode
--zg-pager-color_button_active 26px Sets the color of pager buttons in 'button-pagination' mode
--zg-pager-font-size Browser's default value Sets the font size of pager text
--zg-pager-height 1px Sets the minimum height of pager
--zg-pager-height_button 26px Sets the height of pager buttons in 'button-pagination' mode
--zg-pager-height_button_active 26px Sets the height of active pager buttons in 'button-pagination' mode
--zg-pager-height_cursor 21px Sets the height of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-margin 0 Sets the margin of pager
--zg-pager-padding 0 var(--theme-padding_x) Sets the padding of pager
--zg-pager-text-margin 0 2px Sets the margin of pager text
--zg-pager-width_button 26px Sets the width of pager buttons in 'button-pagination' mode
--zg-pager-width_button_active 26px Sets the width of active pager buttons in 'button-pagination' mode
--zg-pager-width_cursor 21px Sets the width of pager next/previous buttons in 'cursor-pagination' mode
Top

CSS Selector

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

zg-pager {
  padding: 2rem;
}
Top

CSS Shadow Parts

<zg-pager> exposed elements within the shadow can be styled by CSS shadow parts, like so:

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

ZGPager CSS Shadow Parts
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
Top

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

[api: <zg-pager>]