@abcum/ember-gridlist NPM

ember-gridlist

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

Usage

Installation

ember install @abcum/ember-gridlist

Introduction

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.

Examples

Add a basic list view.

{{#list-view content=model rowHeight=68}}
	{{content.fullname}}
{{/list-view}}

Or assign a custom class to each item.

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

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')}}
	{{content.fullname}}
{{/list-view}}

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

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

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}}" />
	{{content.fullname}}
{{/grid-view}}