Giter Club home page Giter Club logo

juicy-table-repeat's Introduction

<juicy-table-repeat>

This is a workaround custom element to support <template is="dom-repeat"> in <table> under IE. Will not be required after this Polymer issue is fixed: Polymer/polymer#1567

Install

Install the component using Bower:

$ bower install Juicy/juicy-table-repeat --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill, if needed:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  2. Import Custom Element:

    <link rel="import" href="bower_components/juicy-table-repeat/juicy-table-repeat.html">
  3. Start using it!

Instead of following code:

  <table>
      <thead>
      <!-- your favorite thead -->
      </thead>
      <tbody>
      <template is="dom-repeat" items="{{model.Shops}}">
          <tr>
              <td>{{item.Name}}</td>
              <!-- other item stuff -->
          </tr>
      </template>
      </tbody>
  </table>

Use this:

<juicy-table-repeat rows="{{model.Shops}}">
    <table>
      <thead>
      <!-- your favorite thead -->
      </thead>
      <tbody>
      </tbody>
    </table>
    <template is="dom-template" class="row-template">
        <table>
            <tr>
              <td>{{item.Name}}</td>
              <!-- other item stuff -->
            </tr>
        </table>
    </template>
</juicy-table-repeat>

Observing changes

Note: juicy-table-repeat observes changes in the rows array, but re-rendering HTML table might be expensive.

  • A splice on the rows array causes entire table re-rendering.
  • A row property change causes entire table row re-rendering.

Options

Attribute Options Default Description
rows Array The array of objects to iterate over.

History

For detailed changelog, check Releases.

License

MIT

juicy-table-repeat's People

Contributors

joozek78 avatar tomalec avatar warpech avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

joozek78

juicy-table-repeat's Issues

Component not registered on Bower

Just an FYI bower install juicy-table-repeat comes up blank, looks like the component isn't registered in the Bower registry.

You can still install the package from Github with bower install Juicy/juicy-table-repeat, but either the README needs updating or it needs to be added to the Bower registry.

dom-repeat on td?

What if we were to do a dom-repeat on <td> tags, how do we go about it? Does your element support that?

Where did the master branch go?

This solution works great for repeating in IE, but it's harder to install than necessary because there's only a gh-pages branch. Am I missing something?

Should this element be used in Starcounter apps

This element is used few Starcounter apps. From README.md, I understand that it is only needed for supporting IE. Since we don't support IE anymore, can this element be removed from the apps?

@Mihaiii could you please research that.

Column doesn't propagate changes

The problem occurs when in each rows we can do some changes and result doesn't propagate changes.
So ex. we have row with two columns

<div class="column">{{item.Quantity$}}</div>
<div class="column"><button value="{{item.AddQuantity$::click}}" onmousedown="++this.value"/>Add quantity</button></div>

In server side I add Quantity + 1:

public void Handle(Input.AddQuantity action){
Quantity++;
}

All patches looks good, but value in {{item.Quantity$}} doesn't increased

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.