Giter VIP home page Giter VIP logo

paper-data-table's Introduction

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}}
{{/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's People

Contributors

ember-tomster avatar ibarrick avatar n1ru4l avatar olgabrani avatar panthony avatar shoxter avatar subtletree avatar xomaczar avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.