features
Menu
Menu

Performance

ZingGrid had performance in mind while developing. Several key features can help you render data more quickly to the screen.

On This Page

Paging

Use the pager to limit the amount of DOM nodes on the page.

While paging, ZingGrid re-uses the same rows from page to page. If you set page-size=5 there will only be five rows at a time in the DOM.

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

While scrolling, ZingGrid will batch in new rows. At any given time there is a small, finite number of rows rendering.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Server Paging

Enable server paging through a couple zg-param attributes.

While paging, ZingGrid will only fetch as much data is needed to populate the rows. The library also re-uses the same rows from page to page. This will be even faster than just normal paging because a smaller initial dataset is fetched on render.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Server-Side Render

Hydrate pre-rendered ZingGrid markup.

Give the browser markup to do what it does best, parse HTML. It is REALLY good at that. Depending on your dataset size, this will be a good idea to increase speed for grids without paging.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading