An addon for building efficient lists and grids for big data workloads in Ember.js.

Usage no npm install needed!

<script type="module">
  import abcumEmberGridlist from 'https://cdn.skypack.dev/@abcum/ember-gridlist';



An addon for building efficient lists and grids for large data workloads in an Ember.js app.



ember install @abcum/ember-gridlist


The ember-gridlist addon adds functionality for working with lists and grids, enabling efficient incremental rendering of large numbers of items in list or grid format, with single click or double click support, and multi-selection support, whilst at the same time re-rendering when the viewport is resized. Each list or grid will display only the necessary number of items to fill the desired layout, rendering other items as and when they are scrolled into view.


Add a basic list view.

{{#list-view content=model rowHeight=68}}

Or assign a custom class to each item.

{{#list-view content=model rowHeight=68 itemClass='person'}}

Or use a separate template for the items.

{{list-view content=model rowHeight=68 itemName='people/list'}}

And perform an action when an item is clicked.

{{#list-view content=model rowHeight=68 on-click=(transition-to 'person')}}

And perform an action when an item is double-clicked.

{{#list-view content=model rowHeight=68 on-dblclick=(transition-to 'person')}}

Or add a grid view with a predetermined width and height for each item.

{{#grid-view content=model colWidth=200 rowHeight=360 on-click=(transition-to 'person'}}
    <img src="{{content.avatar}}" />


  • make install (install bower and ember-cli dependencies)
  • make upgrade (upgrade ember-cli to the specified version)
  • make tests (run all tests defined in the package)