Performance

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

Infinite Scroll

Enable infinite scrolling by adding the height attribute to your <zing-grid> tag and the 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. Follow more comprehensive infinite scroll docs here.

Top

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.

Top

Server-Side Render

Hydrate pre-rendered ZingGrid markup.

Let the browser markup 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.

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.

Top

Related Resources