features
Menu
Menu

Paging

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

On This Page

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

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

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading