Paging

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

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:

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

You can also 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.

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.

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>

Alternative Pagination Layout Grids

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

Top

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:

Top

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:

Top

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:

Top

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:

Top

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:

Top

Infinite Scroll

To enable infinite scrolling, add the height attribute to your <zing-grid> tag and the name="loadByScroll" attribute to <zg-param> with value="true", like so:

<zing-grid height="238" >
    <zg-data>
      <!-- loadByScroll enables infinite scrolling -->
      <zg-param name="loadByScroll" value="true"></zg-param>
    </zg-data>
</zing-grid>

Infinite Scroll Grid

Here is a complete grid with infinite scrolling enabled:

Top

Related Resources

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