Paging

ZingGrid has incremental loading, infinite scrolling, load-by-page, and flexible pager styling.

Add the attribute pager to the <zing-grid> tag, or add <zg-pager> as a child element.

<zing-grid ... pager></zing-grid>
<!-- Or -->
<zing-grid>
  <zg-pager></zg-pager>
</zing-grid>
Top

Page Size

By default, up to 50 records are displayed per page. To adjust this amount, set the page-size attribute on the <zing-grid> tag.

<zing-grid
  ...
  pager
  page-size="3"
>
</zing-grid>

Card-Layout Size

When a grid's width falls within the mobile-layout range, or the grid owner has forced card-layout mode, the UI changes from rows of content to individual cards. You have the ability to set the number of cards per-page differently than its row-layout mode counterpart. Add the page-size-card attribute to the grid and this will override the default amount only in those view modes.

Try switching between card and row modes ( and ) in the demo to see it switch from 3 records per-page in row mode, to 2 cards per-page in card mode.

<zing-grid
  ...
  pager
  page-size="3"
  page-size-card="2"
>
</zing-grid>

You can adjust the size of mobile view (typically to make it smaller) with the page-size-card attribute on the <zing-grid> tag. A full list of page size options can be found here.

Page Size Option List

The default 'per-page' option values from the pager's dropdown are 5,10,50. Use pager-size-options to provide a new set.

<zing-grid
  ...
  pager
  page-size="3"
  page-size-options="3,5,15,25"
>
</zing-grid>
Top

Pagination Type

The default paging controls consist of next and previous, first and last, and direct page jump elements.

To use the alternative layout, which consists of just next and previous buttons with 1 to many individual page buttons, add pager-type to the grid, with one of 2 variant options:

  • button-arrows - The next and previous buttons have arrow SVG icons
  • button-text - The next and previous buttons have localized next and previous text labels
<zing-grid
  ...
  pager
  pager-type="button-arrows"
>
</zing-grid>
<!-- Or -->
<zing-grid
  ...
  pager
  pager-type="button-text"
>
</zing-grid>
Top

Position

The pager is added below the grid by default. Place it above the grid body with pager-position="top".

<zing-grid
  ...
  pager
  pager-position="top"
>
</zing-grid>
Top

External Controls

Each of the pagination buttons are accessible via the grid API.

<script>
const zgRef = document.querySelector('zing-grid');
zgRef.lastPage();
</script>
Top

Custom Layout

You may customize the appearance of your pager by slotting different pieces of it inside the grid, as long as the components have the same name or value associated with the built-in element.

In this case, we are slotting pieces of our pager in the footer of the grid.

<zg-footer>
  <div>
    <span>Showing</span>
    <zg-text value="currpage"></zg-text>
    <span>-</span>
    <zg-text value="pagecount"></zg-text>
    <span>of</span>
    <zg-text value="pagecount"></zg-text>
    <span>rows</span>
  </div>
  <div>
    <zg-button action="prevpage"></zg-button>
    <zg-text value="currpage"></zg-text>
    <zg-button action="nextpage"></zg-button>
  </div>
</zg-footer>
Top

Server Paging

Enable server paging through a couple <zg-param> options.

<zg-param name="loadByPage" value="true"></zg-param>
<!-- define the "page" query parameter -->
<zg-param name="pageKey" value="page"></zg-param>
<!--
  Need to tell ZG how many records were returned so it knows
  how to divide up the page-size
-->
<zg-param name="countPath" value="count"></zg-param>
<!-- define the path in the result JSON to find next/prev urls -->
<zg-param name="nextPath" value="next"></zg-param>
<zg-param name="prevPath" value="previous"></zg-param>
Top

Cursor Paging

Enable cursor paging through a couple <zg-param> options.

<!-- enable server paging -->
<zg-param name="loadByPage" value="true"></zg-param>
<!-- enable cursor server paging -->
<zg-param name="cursor" value="true"></zg-param>
<!-- return value from cursor endpoint for previous page -->
<zg-param name="prevIDPath" value="previous_cursor"></zg-param>
<!-- return value from cursor endpoint for next page -->
<zg-param name="nextIDPath" value="next_cursor"></zg-param>
<!-- query param to send back for next/prev cursors -->
<zg-param name="prevIDKey" value="cursor"></zg-param>
<!-- query param to send back for next/prev cursors -->
<zg-param name="nextIDKey" value="cursor"></zg-param>
Top

Infinite Scroll

Enable infinite scrolling by adding the height attribute to your <zing-grid> tag and the loadByScroll attribute to <zg-param>.

Top