/paper-data-table

Material Data Table for ember-paper

Primary LanguageJavaScriptMIT LicenseMIT

<<<<<<< HEAD

Paper-data-table Build Status

Port of https://github.com/daniel-nagy/md-data-table using ember-paper

Installation

ember install paper-data-table

Add @import 'paper-data-table'; to your app.scss file.

Usage

From dummy app:
{{#paper-data-table sortProp="name" sortDir="desc" selectable=true as |table|}}
{{#table.head as |head|}}
  {{#head.column checkbox=true}}
    {{#paper-checkbox disabled=true onChange=null}}{{/paper-checkbox}}
  {{/head.column}}
  {{#head.column sortProp="name"}}Dessert (100g serving){{/head.column}}
  {{#head.column sortProp="calories" numeric=true}}Calories{{/head.column}}
  {{#head.column sortProp="fat" numeric=true}}Fat (g){{/head.column}}
  {{#head.column sortProp="carbs" numeric=true}}Carbs (g){{/head.column}}
  {{#head.column sortProp="protein" numeric=true}}Protein (g){{/head.column}}
  {{#head.column numeric=true}}Sodium (mg){{/head.column}}
  {{#head.column numeric=true}}Calcium (%){{/head.column}}
  {{#head.column numeric=true}}Iron (%){{/head.column}}
  {{#head.column}}Comment{{/head.column}}
{{/table.head}}
{{#table.body as |body|}}
  {{#each (sort-by table.sortDesc paginatedDesserts) as |dessert|}}
    {{#body.row edit=true as |row|}}
      {{#row.cell checkbox=true}}
        {{#paper-checkbox
          value=dessert.checked
          onChange=(action (mut dessert.checked))}}
        {{/paper-checkbox}}
      {{/row.cell}}
      {{#row.cell}}{{dessert.name}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.calories}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.fat}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.carbs}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.protein}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.sodium}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.calcium}}%{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.iron}}%{{/row.cell}}
      {{#row.cell edit=true as |cell|}}
        {{#if cell.showEdit}}
          {{#cell.edit-dialog onClose=cell.toggleEdit}}
            {{paper-input
              value=dessert.comment
              onChange=(action (mut dessert.comment))}}
          {{/cell.edit-dialog}}
        {{else}}
          {{dessert.comment}}
          {{#paper-button iconButton=true onClick=row.toggleEdit}}
            {{paper-icon 'edit'}}
          {{/paper-button}}
        {{/if}}
      {{/row.cell}}
    {{/body.row}}
  {{/each}}
{{/table.body}}
{{#table.foot as |foot|}}
  {{#foot.row as |row|}}
    {{#row.cell}}{{/row.cell}}
    {{#row.cell}}{{/row.cell}}
    {{#each totalDesserts as |total|}}
      {{#row.cell numeric=true}}
        {{total}}
      {{/row.cell}}
    {{/each}}
    {{#row.cell}}{{/row.cell}}
  {{/foot.row}}
{{/table.foot}}
{{/paper-data-table}}
{{paper-data-table-pagination
limit=limit
limitOptions=limitOptions
page=page
pages=pages
onChangePage=(action (mut page))
onChangeLimit=(action (mut limit))
onIncrementPage=(action 'incrementPage')
onDecrementPage=(action 'decrementPage')}}

======= paper-data-table

[Short description of the addon.]

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

ember install paper-data-table

Usage

[Longer description of how to use the addon in apps.]

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

0071a7f... v3.2.0...v3.16.2