Docs

Performance

ZingGrid had performance in mind while developing. Several key features can help you render data more quickly to the screen, including Infinite Scroll, Server Paging, Server-Side Rendering, and Styling.

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>

While scrolling, ZingGrid will batch in new rows. At any given time there is a small, finite number of rows rendering. Learn more about infinite scroll here.

Infinite Scroll Grid

Here is a complete grid with infinite scrolling enabled:

Top

Server Paging

Enable server paging through a couple <zg-param> attributes, 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>

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.

Server Paging Enabled Grid

Here is a complete grid with server paging enabled:

Top

Server-Side Render

To enhance performance, you can server-render or pre-render your grid and hydrate it on the client. Depending on your dataset size, this can help increase speed for grids without paging.

Server-Side Rendered Grid

Here is a complete grid that is server-side rendered:

Top

Height

Defining a height attribute on the grid will automatically enable lazy loading rows. By default, we try to fit the grid to the container size and then stretch the container to fit all rows. When you define a height, the grid will only use DOM nodes visible within the height of the grid. This means if only 5 rows are showing and there are 1000 rows, only 5 DOM rows will be used.

Here is a complete grid with the height attribute used to enhance performance:

Related Resources

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

[features: performance]