ember-cli-grid v3.1.0

Ember-cli-grid

This README outlines the details of collaborating on this Ember addon.

Installation

• ember install ember-cli-grid

Syntax

• {{ember-cli-grid title='some title' model=some data total=total page=page size=size clickaction1="some action for pagination" fields='comma separated columns' headers='comma separated columns' clickaction='link for each record in the table' clickactionlink='navigation route onclick of above link'}}

Example route

• Route

 import Ember from 'ember';

export default Ember.Route.extend({
    //This action is called on pagination button clicks
    actions:{
      getData:function(n=1){
        this.get('controller').set('tdata',this.getData(n));
      }
    },
    // Initialize data
    setupController: function(controller, model) {
      controller.set('tdata',this.getData());
    },
    // Actual function that fetches the data. Should fetch data from ajax/ember model
    getData: function(n=1){
      var r={}
      if(n==1){
        r={
        data:[
          {id:1,name:'name1',designation:'designation1'},
          {id:2,name:'name2',designation:'designation2'},
          {id:3,name:'name3',designation:'designation3'},
          {id:4,name:'name4',designation:'designation4'},
          {id:5,name:'name5',designation:'designation5'},
        ],
        meta:{
          total:10,
          page:1,
          size:5
        }
      }
    }
    else{
      r={
      data:[
        {id:6,name:'name6',designation:'designation6'},
        {id:7,name:'name7',designation:'designation7'},
        {id:8,name:'name8',designation:'designation8'},
        {id:9,name:'name9',designation:'designation9'},
        {id:10,name:'name10',designation:'designation10'}
      ],
      meta:{
        total:10,
        page:2,
        size:5
      }
    }
    }
      return r;
    }
});

*Template

 {{ember-cli-grid
  title='My Requests'
   model=tdata.data
   total=tdata.meta.total
   page=tdata.meta.page
   size=tdata.meta.size
   clickaction1="getData"
   fields='name,designation'
   headers='name,designation'
   clickaction='view'
   clickactionlink='sample.view'}}

• CSS Add bootstrapcss to your project or provide css for the appropriate selectors.