Paging

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

Pagination

To enable pagination, add the pager attribute or <zg-pager> element to the <zing-grid> tag, like so:

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

Pagination Enabled Grid

Here is a complete grid with pagination:

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, like so:

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

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 of values, like so:

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

Card-Layout Size

When a grid's width falls within the mobile-layout range, or card-layout mode has been forced, 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 by adding the page-size-card attribute to the grid (see below). This will override the default amount only in those view modes.

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

Try switching between card and row modes ( and ) in the "Page Size Option List" demo above to see it switch from 3 records per-page in row mode to 2 cards per-page in card mode.

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>

Alternative Pagination Layout Grids

Here are two complete grids displaying the alternative pagination layouts, one with arrow icons and one with text labels:

Position

By default, the pager is displayed at the bottom of the grid. To place it at the top of the grid, use [pager-position="top"], like so:

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

Top Positioned Pager

Here is a complete grid with the pager displayed at the top of the grid:

External Controls

Each of the pagination buttons are accessible via the grid API, like so:

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

External Pagination Controls Grid

Here is a complete grid with pagination buttons controlled via the API:

Custom Layout

You can customize the appearance of your pager by slotting different pieces of it inside the grid (see below). The components must have the same name or value associated with the built-in element.

For example, you can slot pieces of your pager in the footer of the grid, like so:

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

Custom Pager Layout Grid

Here is a complete grid with a custom pager layout:

Server Paging

Enable server paging through a couple <zg-param> options, like so:

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

Server Paging Enabled Grid

Here is a complete grid with server paging enabled:

Cursor Paging

Enable cursor paging through a couple <zg-param> options, like so:

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

Cursor Paging Enabled Grid

Here is a complete grid with cursor paging enabled:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• API Pager Methods List
• Adding Features Guide
• <zg-pager> Documentation