Ember-imdt-table NPM

Ember-imdt-table

This is an Ember Table Component inspired on Ember-models-table: https://github.com/onechiporenko/ember-models-table

Installation

git clone this repository
npm install
bower install

Usage

First set your content up, here we are using a predefined json as the content, but you can use your model aswell.

// ../controllers/index.js
values = [
  {
    "id":1,
    "firstName":"Kiana",
    "lastName":"Murphy",
    "age":19,
    "city":"Lahore",
    "cityWithHtml":"<i>Lahore</i>"},
  {
    "id":2,
    "firstName":"Ingeborg",
    "lastName":"Jones",
    "age":48,
    "city":"Tianjin",
    "cityWithHtml":"<i>Tianjin</i>"},
  {
    "id":3,
    "firstName":"Chuck",
    "lastName":"Ali",
    "age":32,
    "city":"Bogotá",
    "cityWithHtml":"<i>Bogotá</i>"},
  {
    "id":4,
    "firstName":"Chasity",
    "lastName":"Quinn",
    "age":36,
    "city":"Cairo",
    "cityWithHtml":"<i>Cairo</i>"},
  {
    "id":5,
    "firstName":"Chuck",
    "lastName":"Taylor",
    "age":44,
    "city":"Lahore",
    "cityWithHtml":"<i>Lahore</i>"
  }
];

Then set up the table properties,

// ../controllers/index.js

content: values,
columns: new A([{
  contentPath: 'id',
  columnTitle: 'ID',
  isSortable: false,
  isSearchable: false,
}, {
  contentPath: 'firstName',
  columnTitle: 'First Name'
}, {
  contentPath: 'lastName',
  columnTitle: 'Last Name'
}, {
  contentPath: 'cityWithHtml',
  columnTitle: 'City',
  sortPath: 'city'
},
{
  contentPath: 'age',
  columnTitle: 'Age'
},

After you have everything set up, all you need to do is use the table helper on your template and pass your defined properties as parameters, along with more options:

<!-- ../templates/index.hbs -->

{{imdt-table
  content=content
  columns=columns
  sortProperties=sort
  paginable=true
  searchable=true
  sortable=true
}}

If you want to set some sort properties for the table to be sorted on load you can do it, like this:

sort: new A(['city:desc', 'firstName:desc', 'lastName:asc']),

Supported Properties

property	description	default
content	content that will be displayed in the table cells	null
columns	column configuration and names	null
sortProperties	sort properties on load	null
paginable	whether the table has pagination or not	false
searchable	whether the table has search or not	false
sortable	whether the table is sortable or not	false
useSimplePagination	whether the page has simple pagination or numbered pagination	true

Rendering templates on column

If you want to render a custom template inside a table cell, like a button, checkbox, or wathever else you would need you can do it by adding the column that will render the template in your column configuration, like this:

// ../controllers/index.js

columns: new A([{
    contentPath: 'id',
    columnTitle: 'ID',
    isSortable: false,
    isSearchable: false,
  }, {
    contentPath: 'firstName',
    columnTitle: 'First Name'
  }, {
    contentPath: 'lastName',
    columnTitle: 'Last Name'
  }, {
    contentPath: 'cityWithHtml',
    columnTitle: 'City',
    sortPath: 'city'
  },
  {
    contentPath: 'age',
    columnTitle: 'Age'
  },
  {
    contentPath: 'template',
    columnTitle: 'Template',
    template: 'custom/button'
  }

...