zg-pager

The <zg-pager> tag is a web component that controls the styling and display of the grid caption.

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 the caption is enabled via caption attribute. The caption is stylable via CSS variables or the zg-pager CSS selector.

<zing-grid caption="Hello World"></zing-grid>

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

Attributes

There 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

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

All the associated --zg-pager CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-pager-background: red;
}
ZGPager CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-pager-backgroundBrowser's default valueStyles the background of pager
--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_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_cursor0Styles the left border of pager next/previous buttons in 'cursor-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_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_cursor0Styles the top border of pager next/previous buttons in 'cursor-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-font-sizeBrowser's default valueSets the font size of pager text
--zg-pager-height1pxSets the minimum height of pager
--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_cursor21pxSets the width of pager next/previous buttons in 'cursor-pagination' mode

CSS Selector

<zg-pager> can be styled by common CSS selectors.

zg-pager {
  padding: 2rem;
}