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

To create a pager that will appear at the bottom of the grid, you can either add the <zg-pager> tag, or add the pager attribute to the <zing-grid> tag.


Page Size

You can adjust the amount of data shown through the page-size attribute on the <zing-grid> tag.

You can adjust the size of mobile view, typically to make it smaller, with the page-size-card attribute on thetag. A full list of page size options can be found here.


External Controls

You can use our API to get all the same pager functionality from user input.

const zgRef = document.querySelector('zing-grid');

Custom Layout

You can customize the appearance of your pager by slotting different pieces of the pager inside the grid.

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

    <zg-text value="currpage"></zg-text>
    <zg-text value="pagecount"></zg-text>
    <zg-text value="pagecount"></zg-text>
    <zg-button action="prevpage"></zg-button>
    <zg-text value="currpage"></zg-text>
    <zg-button action="nextpage"></zg-button>

Server Paging

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

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

Cursor Paging

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

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

Infinite Scroll

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