ember-simple-table

Requirements

• Ember >= 1.13.0
• Ember CLI

Installing

• ember-cli >= 0.2.3 ember install ember-simple-table

Upgrading

It's advisable to run ember g ember-simple-table between upgrades as dependencies may have been added, removed, or upgraded between releases. Please try this, along with clearing node_modules and bower_components before reporting issues after upgrading.

Usage

Having your data as:

let content = [{
    id: 1,
    text: 'person 1'
  }, {
    id: 2,
    text: 'person 2'
  }, {
    id: 3,
    text: 'person 3'
  }, {
    id: 4,
    text: 'person 4'
  }, {
    id: 5,
    text: 'person 5'
  }];

or

content: Ember.computed.alias('model');

You can create the table as:

{{#basic-table content=content as |t|}}
  {{#t.header as |header|}}
    {{#header.row}}
      {{#header.cell}}ID{{/header.cell}}
      {{#header.cell}}NAME{{/header.cell}}
    {{/header.row}}
  {{/t.header}}
  {{#t.footer as |footer|}}
    {{#footer.row}}
      {{#footer.cell colspan="2"}}My footer{{/footer.cell}}
    {{/footer.row}}
  {{/t.footer}}
  {{#t.body as |body item|}}
    {{#body.row}}
      {{#body.cell}}{{item.id}}{{/body.cell}}
      {{#body.cell}}{{item.text}}{{/body.cell}}
    {{/body.row}}
  {{/t.body}}
{{/basic-table}}

Handling Events

You can handle any event just adding the event name in the component

{{header.cell click=(action 'cellSelected')}}...{{/header.click}}

Creating your own cells

You can create your own row or cell component and pass it to the table:

{{#basic-table 
  content=content
  headerRowComponent="my-header-row",
  bodyRowComponent="my-body-row",
  footerRowComponent="my-footer-row",
  headerCellComponent="my-header-cell",
  bodyCellComponent="my-body-cell",
  footerCellComponent="my-footer-cell"
  as |t|
}}

or use different components

{{#basic-table content=content as |t|}}
  {{#t.header}}
    {{#t.cell}}
      ...
    {{/t.cell}}
    {{#my-cell-custom}}
      ...
    {{/my-cell-custom}}
  {{/t.header}}
{{/basic-table}}

Development

• git clone this repository
• npm install
• bower install
• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.