Paging

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

Pagination

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.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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 the <zing-grid> tag. A full list of page size options can be found here.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

External Controls

You can use our API to get all the same pager functionality from user input.
CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.lastPage();
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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.

CloseCopy Copied
<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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Server Paging

Enable server paging through a couple <zg-param> attributes.
CloseCopy Copied
<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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Cursor Paging

Enable cursor paging through a couple <zg-param> attributes.
CloseCopy Copied
<!-- 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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Infinite Scroll

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