0.0.4 • Published 7 years ago

ember-simple-table v0.0.4

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

ember-simple-table

npm Version Build Status Ember Observer Score Ember badge

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

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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