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.
To enable infinite scrolling, add the
height attribute to your
<zing-grid> tag and the
name="loadByScroll" attribute to
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:
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:
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:
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:
Here are some extra resources related to this feature to help with creating your grid: