using paper datatable in angular2

Question

I have been struggling for quiet a while about using paper-data-table (paper data table by David Mulder) in my angular 2 application.

The problem im facing is described in the data table issue: Issue opened regarding using the table in angular 2 applicaiton

Basically there is a use of the polymer undocumented dataHost property that gets incorrect value when using it in angular2. I have tried a few angles of solutions which I cant make any of them work completely: 1) I tried to find a way to make an polymer element that will wrap the table for me, I tried to give it the table defenition from the outside of the element (as an effective child) and then remove it from there and re-add it to the element local dom. The problem with the dataHost remainded the same, I even found that David himself reported this issue in the past (so I guess my solution can't work for the same reason that makes David code fail) Issue about adding elements to the localdom with the dataHost 2) In the issue page which I posted in the start of the questetion David suggested to use . This didnt work because of a new reason, the content of the inside this dom-bind was not even placed in the dom, I think I can connect this to the fact that angular2 reads the template tags in his "own way" and comments them if there isn't anything meanningful in them (such as an [ngIf] attribute for example).

I would really appreciate help with either solutions 1 or 2, or a different solution (I couldn't find a fullly featured material design table that might work in angular 2, so if there is one that im not aware of its an option too)

Thanks alot in advance for any help ! :)

-------------------- UPDATE -----------------------------

Some code examples to what I have tried so far:

<!-- Normal way of using the table, throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined" -->
    <paper-datatable [data]="data" selectable multi-selection>
        <paper-datatable-column header="Name" property="exmp" sortable editable>
            <!--<template is="dom-bind">-->
            <!--<paper-input value="{{data.exmp}}" no-label-float></paper-input>-->
            <!--</template>-->
        </paper-datatable-column>
    </paper-datatable>

    <!-- This code still throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined". I think
         Becuase of the polymer issue I linked to about dataHost bug I linked to in polymer git hub (the one David opened)-->
    <table-wrapper id="tableWrapper" is="dom-bind" [data]="data">

        <paper-datatable [data]="data" selectable multi-selection>
            <paper-datatable-column header="Name" property="exmp" sortable editable>

            </paper-datatable-column>
        </paper-datatable>


    </table-wrapper>

    <!-- The solution suggested by David in the data-table bug with angular 2 issue link. Could be really awosome if
        I could get this to work, but for some reason, the template tag gets commented in the html and this code
        is just removed from the dom, I think its related to the way angular 2 compiler deals with this template
        tag-->
    <template is="dom-bind">
        <paper-datatable [data]="data" selectable multi-selection>
            <paper-datatable-column header="Name" property="exmp" sortable editable>

            </paper-datatable-column>
        </paper-datatable>
    </template>

and here is how I tried to implement the table-wrapper:

<dom-module id="table-wrapper">

        <template>
            <!-- Using content tag will cause the exact same problem as not using the wrapper,
                 since it will become an effective child and not a real one-->
            <!--<content></content>-->
        </template>
        <script>

            Polymer({

                is: 'table-wrapper',
                attached: function() {
                    debugger;
                    var element = Polymer.dom(this);
                    var child = element.removeChild(this.children[0]);
                    var root = Polymer.dom(this.root);
                    root.appendChild(child);

                    // Though this should work, the dataHost property isnt correct, like stated in the issue that
                    // David opened in the polymer project
                }

            });

        </script>
    </dom-module>

Also important to say that the code that uses the table is in some component, where in the component I define the data property as a public one, so I can data bind it to the table data (I will always need to use it inside my components, and always will need to pass it parameters and data from the component, if there is an alternative to using the binding that can also work with the solution its good aswell

score 3 · Answer 1 · answered Apr 26 '16 at 12:13

3

<template> elements are processed by Angular internally and never actually land in the DOM.

Some suggestions

ensure you have shadow DOM enabled for Polymer and full polyfills loaded for browsers without native shadow DOM support. See also https://www.polymer-project.org/1.0/docs/devguide/settings.html
you could wrap the element that provides the <template> and the data-table element inside another Polymer element, so that Angular doesn't process the <template> element because it's part of a Polymer element instead of a Angular view.
you could try to add the template element imperatively to the DOM to circument Angulars template processing

See also this issue I reported recently https://github.com/angular/angular/issues/7974

answered Apr 26 '16 at 12:13

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks alot for your quick reply ! * As you said, I already had polymer using shadow dom instead of shady. * The wrapping in another polymer element didnt work (if I give that element the table html from the outside as I did in the table-wrapper example). * This sounds like a great option that I would like to try, im not sure exactly what is the correct way of doing this because I do need angular to know about the template element so the data binding will work (I give the [data] parameter to the table using angular data binding as you can see in the example I added. a sample will help alot – Ziv Glazer Apr 27 '16 at 09:53
You want to pass a template that uses data binding with Angular pass to paper-datatable? I wouldn't expect this to work. Can you add some code to your question that demonstrates what you try to accomplish? – Günter Zöchbauer Apr 27 '16 at 09:56
I didn't mean to use the wrapper to wrap the template, but to wrap the `` and the children. – Günter Zöchbauer Apr 27 '16 at 10:07
Not sure what do you mean, isn't what you just said is what I do in the first code section in the second part (using table-wrapper to wrap the table?) Or your talking about putting the table itself in the table-wrapper own template (which will make it impossible to pass all the parameters to it from the outside of the table-wrapper I think) – Ziv Glazer Apr 27 '16 at 10:16
Yes, that's what I mean "putting the table itself in the table-wrapper own template". You can create properties on the wrapper to be able to pass parameters into the wrapper and then forward it to the paper-datatable. Cumbersome, I know, but with a ` – Günter Zöchbauer Apr 27 '16 at 10:23
Two things: 1) Lets say that I do wrap it completly and make options for all the documented parameters. how will I pass html from the outside (as you can see in my example, the is defined outside of the wrapper in my specific component. and there are many others outside html options that the table needs to handle which I dont see how can I wrap (or maybe im wrong?) 2) I do highly prefer the – Ziv Glazer Apr 27 '16 at 10:31
It might be worth a try to add an `` tag into the ` – Günter Zöchbauer Apr 27 '16 at 10:47
The problem with content is that it adds effective children, which causes the same problem to the table which expects "real" local dom children. And what do you mean about the table coping template tags added imperativly? Wasn't the idea to add both the template with the table imperativly to the component html? Can you give me a code example of how to do it in angular 2 with divs and I will try it with the table and give feedback? – Ziv Glazer Apr 27 '16 at 10:52
I'm quite rusty with Polymer already. Sorry, II don't want to spend that much much time on this. – Günter Zöchbauer Apr 27 '16 at 14:18
Alright no problem you helped alot anyway ! :) Btw why you think you will need Polymer for this? wasn't your suggestion to use angular 2 to append the template to the component DOM? or you meant using polymer earlier? (Because I know how to do dom manipulation in Polymer, just not in angular 2 code) – Ziv Glazer Apr 27 '16 at 15:00
I would need to set things up to work together. Angular, Polymer, the components. JS/TS is not my native tongue. I use only Dart. This is why trying this out is quite cumbersome for me. If you create a Plunker I can have a look and check if I can make it work. – Günter Zöchbauer Apr 27 '16 at 15:06

score -1 · Answer 2 · edited Nov 11 '21 at 06:49

-1

I think I managed to get to some solution. I altered small parts of the source code, this might "hurt" some features (I think only the ones related to the column array) but I work with it in my project and it works great. I also wrote a small angular 2 component wrapper to ease things up.

You can check it out here:

paper-datatable-fixes-for-angular-2

edited Nov 11 '21 at 06:49

Glorfindel

21,988
13
81
109

answered May 30 '16 at 08:47

Ziv Glazer

786
2
8
24

using paper datatable in angular2

2 Answers2

Linked