paper-datatable-card not working

[alexregier]

I'm always getting an error while creating a paper-datatable-card with Polymer 2:

Uncaught TypeError: Cannot read property 'apply' of undefined. This happens in btw-datatable-card.html line 501.

It's a clean installation of the Polymer 2 starter kit. I downloaded the JSON from the online example to keep things simple but this occurs immediately. The "normal" paper-datatable works well.

This is my code:

<paper-datatable-card id="datatableCard" header="Users" data-source="{{dataSource}}" progress id-property="sha1" selected-ids="{{selectedIds}}">
            <div slot="toolbar-main">
            </div>
            <div slot="toolbar-select">
                <paper-icon-button icon="delete" on-tap="delete"></paper-icon-button>
            </div>
            <div slot="toolbar-select-single">
                <paper-icon-button icon="info" on-tap="showInfo"></paper-icon-button>
            </div>
            <paper-datatable id="datatable" selectable multi-selection>
                <paper-datatable-column id="nameColumn" header="Name" property="name" capitalize="[[capitalize]]" style="min-width: 200px;" sortable>
                    <template>
                        <div>
                            <img src="[[item.picture.thumbnail]]" style="width:32px;height:32px;border-radius:16px;vertical-align: middle;margin-right:4px;">
                            <span style="vertical-align:middle;">[[capitalize(value.title)]]</span>
                            <span style="vertical-align:middle;">[[capitalize(value.first)]]</span>
                            <span style="vertical-align:middle;">[[capitalize(value.last)]]</span>
                        </div>
                    </template>
                </paper-datatable-column>
                <paper-datatable-column header="E-mail" property="email" style="min-width: 200px;" sortable></paper-datatable-column>
                <paper-datatable-column header="SSN" property="SSN" style="min-width: 130px;" sortable></paper-datatable-column>
                <paper-datatable-column header="Phone" property="phone" style="min-width: 150px;" sortable></paper-datatable-column>
                <paper-datatable-column header="Cell" property="cell" style="min-width: 150px;" sortable></paper-datatable-column>
                <paper-datatable-column header="Address" property="location" capitalize="[[capitalize]]" style="min-width: 200px;" sortable>
                    <template>
                        <div>[[capitalize(value.street)]]</div>
                        <div><span>[[capitalize(value.state)]]</span> <span>[[capitalize(value.zip)]]</span></div>
                    </template>
                </paper-datatable-column>
            </paper-datatable>
        </paper-datatable-card>

(this is copied from the demo)

and in the element registration:

static get properties() {
    return {
        dataSource: {
            type: Array,
            value: [
                // the data from the url
                ]
        }
    };
}

[dhrytsenko]

Hi @HoverAlex. Check this docs about dataSource and datatable-card example implementation. If you use only bwt-datatable it is normal to use simple array as data-source but with card you need to define set/get methods.

[dhrytsenko]

Closed due to inactivity. Please open it again if you have any questions