How do I disable row-tap and cell-tap events. I want to add links to text in some of the cells.

Hey,

Thanks for your great work.

Just one thing, could we remove these two lines:

multi-selection = false
selectable = true
item-selected

sort a column -> throws error -> deselect not working.

How do I use multiple properties in one column. I want to put a URL link which should be made of values from multiple properties as below:

<datatable-column header "Supplier" property="supplier">
<datatable-column header "Product" property="product">
<datatable-column header "Buy Link">

Buy

In all examples provided, the range start of the page is zero-base, i.e. if there are 10 rows per page, data-table footer shows "Rows per page: 10 / 0-10 of N"
It should show "Rows per page: 10 / 1-10 of N"

iron-shadow-flex-layout is deprecated. Please use iron-flex-layout/iron-flex-layout-classes.html, and one of the specific dom-modules instead.
This file is deprecated. Please use iron-flex-layout/iron-flex-layout-classes.html, and one of the specific dom-modules instead.

BTW tx for developing this further

First of all thanks for working on this great library. Second, is there any play to migrate base code from polymer 1 to polymer 2. I have read polymer 2 specs and it was great but this important library i use seems to doesn't support it. (i have tested it and it doesn't work)

The data-changed event dosent booble from column to card in version 3.0. Wrong methode in column and wrong path definition in table.

Rename _forwardInstanceProp to _notifyInstancePropV2 in column and replace the #x format in path with x (eg: data.#0.value to data.0.value) in datatable.

Is adding rows currently supported? If not, would it be hard to implement?

Regards,
Luiz

I'm trying to implement a simple filter but I can't get it to work. below is my code snippets

  <template>

    <cuba-query id="data"
        entity-name="myApp$myEntity"
        query-name="myQuery"
        params="{{queryParams}}"
        data="{{entities}}"
        loading="{{dataLoading}}"
        provide-count="true"
        count="[[entitiesCount]]"
        auto="[[active]]"
        handle-as="json">
    </cuba-query>

    <iron-ajax auto url="data.json" last-response="{{entities}}"></iron-ajax>

    <div >
        Search:  <paper-input value="{{filterString}}" style="display:inline-block;" label="Team name" on-input="applyFilter" ></paper-input>
    </div> 
    
    <paper-datatable id="datatable" data="[[entities]]" filter="{{tableFilter}}" >

        <paper-datatable-column  header="Home Team" property="description" type="String" sortable>
        <template>
            <span>{{value}}</span>
        </template>
        </paper-datatable-column>
    
    </paper-datatable>

  </template>

 <script>
    Polymer({
        is: 'app',
        behaviors: [CubaLocalizeBehavior, CubaEntityListViewBehavior ,CubaAppAwareBehavior],
        properties: {

            filterString: {
                type:String,
                value:''
            },

        },

        tableFilter: function(item, key, items){
            return item.description = (this.filterString || '');
        },

        applyFilter: function(){
                this.$.datatable.reload();
        }, 
			
    });
  </script>

Can the headers be prevented from scrolling with the content? So the user can see what the column refers to while scrolling.

today i was looking through polymer documentation and i came across an interesting element named app-indexeddb-mirror that seemed perfect to work with datatable solutions. but it couldn't be used with paper-datatable because of the way it handles data is using promises and not plain json data. so i thought maybe implementing it inside datatable might be a better choice. saves last list of objects received to localstorage and so when user is offline and has no access to server it would show last values received from server.
On promise rejection it would be cool if a bar appears above data table that says "you are currently offline" and shows previous data received. I think it would work great with spirit of progressive web apps that should work in offline mode too.

Would it be a considerable expenditure to convert the existing polymer version of bwt-datatable to a vanilla webcomponent for example with Ionic's Stencil?

No matter what I set sortDirection to, the default sort is always ascending if the "sorted" attribute is set. Apparently the _sort method does not check the sortDirection when comparing values.

Hi sir, Have you consider to migrate to npm/yarn?
Ahm, new to web development, I have questions about bower, but dont know how to resolve dependencies that are in node_modules ;c
Double install size from bower and npm, I cant handle ;c

Yarn support please ;c

I'd like to make a column editable if the user has permission.

How can I accomplish this?

I tried setting the attribute like this:
editable="{{editable}}"

where I use a property to set the editable value, however it's not working.

Is it be possible to do something like https://datatables.net/examples/api/row_details.html using bwt-datatable ?

The checkbox cell color in the selection bar and table body is inheriting the paper-datatable-card background color in paper-datatable > div > table > thead > tr > th and paper-datatable > div > table > tbody > tr > td.

I am really struggling to get it to be the right color.

I want the checkbox cell color on the side of the selection to match the color for the selection bar, and I want the checkbox cell color on the side of a table row to match the color for the row.

Can you help me figure out the needed CSS for this?

paper menu has been deprecated in latest versions of polymer in favor of paper-listbox. use newer component as using paper-menu causes force installation of polymer 1.0.

Problem:
Select All checkbox functionality is currently not working. Does any one experience with this issue? Is there a way to fix this issue?

I have a problem with sorting in paper-datatable, event in your component are raising but nothing happens on view side. There is my code:

    <paper-datatable id="documentTypesTable" data="{{data.value}}" selectable response-width="767px" cell-tap="handleClick">
      <paper-datatable-column header="[[localize('documents-type-field-name')]]" property="Name" type="String" sortable>
      </paper-datatable-column>
      <paper-datatable-column header="[[localize('documents-type-field-description')]]" property="Comment" type="String">
      </paper-datatable-column>
      <paper-datatable-column header="[[localize('documents-type-field-created-at')]]" property="CreatedAt" type="Date">
      </paper-datatable-column>
      <paper-datatable-column header="[[localize('documents-type-field-created-by')]]" property="CreatedBy" type="String">
      </paper-datatable-column>
    </paper-datatable>

I'm having a problem with the selectAll checkbox. If I click on the selectAll checkbox, all the checkboxes below the header are not checked.

However, If I check all the checkboxes below the header, the selectAll checked is checked.

Does anyone have the same issue like this?

Note: selectable and multi-selection are included inside the paper-datatable

setData(idProp) {
if (!idProp) idProp = "_id";
return {
queryForIds: (sort, page, pageSize) => {
return this.select(this.data, '_id', this.searchTerm, sort, (page - 1) *
pageSize, page * pageSize, idProp);
},
getByIds: (ids) => {
return this.select(this.data, '*', ids, null, null, null, idProp);
},
set: (item, property, value) => {
return this.update(item._id, property, value);
},
length: 0
}
}

In above code function getByIds always return undefined. Please find attached console result for the same.

Seriously please consider publishing custom elements on npm/yarn too to give public more choice for the package managers supported. Many people are done with bower, so it's going to be a big community service on your behalf. Bower is also not recommended by the maintainers themselves. Here's a statement as y'all might know from their homepage.

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
				]
		}
	};
}

As it stands when you search and filter you data the pagination info (x-y of z) at the bottom of the paper-datatable-card element do not update as you filter the data. Additionally the pagination buttons do not update their state, so you are free to navigate to empty pages after you have filtered your data.

This is of course assuming that I haven't just missed the functionality that would allow me to update things in the docs, if so apologies in advance! :-)

This fix seems to be the culprit: #40
I'm experiencing an issue where the row keys don't match the actual data displayed in that row. So when a row is selected, the selected data is from a different row. In the below screenshots I just added a <h1> tag to show the rowKey. So as seen below, if you select the second row, it will select data from row 9.

This line always evaluates to false which causes the _internalSort to run (which messes with the row keys).

This is strange, because ev.preventDefault() is definitely being called, but the defaultPrevented property of the event isn't changing to true. I've verified this though debugging and even checking the event object straight after ev.preventDefault() is called.

Also I can't understand why ev.preventDefault() is needed at all since it's a custom event? Maybe somone can explain this to me. Thanks!

Hi, Great work! I was just checking the examples given in demo section of the guid and I noticed they are not using bwt-datatable-card and instead are using paper-datatable-card , etc ... It would be helpful to change the elements to use bwt... Also noticed; when trying to use datatable-paper ; weakCache.js is loaded twice; judging by netweork in chrome dev tools. Cheers

I think you should provide examples on how to use datasource inside a custom element.
Right now the only examples are using template is=bind , i'm having a hard time finding out how to setup a datasource inside a custom app.
Also it is not clear when certain functions are called (queryForIds,getByIds,get,set)

Hello
It would have been interesting to type the property editable in string and not in boolean. This would have allowed to code editable = "false | true". Because only the presence of the editable attribute puts the field editable! So editable="[[_isEditable]] does not works (Polymer design).

I have the code in the attached text file. The paper-datatable-card seem not to be working. The data is display the same way when I have only the paper-datatable. What am I doing wrong? I have enabled the paper elements listed in devDependencies by adding them to Dependencies but still no change. My data source has more than 100 items so I expect to see pagination on the table.

card.txt

Hi @dhrytsenko ,
I have the same problem of @etanuvar .
Mi env is:
polymer 3. (version 3.4.1)
bwt-datatable 3.0.0.
nodejs v.12.16.3
express v.4.17.1
I have seen your example but I don't need a paper-datatable-card.
I use a simple table that I have to sort on a column.
for example, I only have two lines that I want to order.
Following the code to the function _internalSort
on line 1088: this.set("_rowKeys", this._rowKeys);
value of this._rowKeys are correctly sorted ascending or descending.
["#0", "#1"] or ["#1", "#0"]
but the table is not updated.
In the previous version the update worked.
I have attached a piece of html code as an example.
Thanks

datatable.txt

Originally posted by @gaxolio in #46 (comment)

I'm getting "DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node" after adding the datatable to a simple app.
Steps to reproduce:
polymer init (choose polymer-2-starter-kit option)
bower install --save bluewatertracks/bwt-datatable
vi src/my-view1.html
add import for paper-datatable.html
add component just after card div
After polymer serve command check the app on browser.

Does the bwt-datatable accept JSON data object as the data source?

Hi,

sorting won't work without a paper-datatable-card like this:

<paper-datatable data="[[videos]]" selectable>
	<paper-datatable-column header="ID" property="jwId" type="String" sortable></paper-datatable-column>
	<paper-datatable-column header="Title" property="title" type="String" sortable></paper-datatable-column>
	<paper-datatable-column header="Classes" property="classes" type="Array" sortable></paper-datatable-column>
	<paper-datatable-column header="Tags" property="tags" type="Array" sortable></paper-datatable-column>
	<paper-datatable-column header="Description" property="description" type="String"></paper-datatable-column>
</paper-datatable>

I investigated it and found a fix to this problem.
I'll open a pull request.

I have data in dataset like this:

Item supplier price

Item_1 Supplier_X 5.00
Item_1 Supplier_Y 5.50
Item_1 Supplier_Z 6.00
Item_2 Supplier_X 3.50
Item_2 Supplier_Y 3.00
Item_2 Supplier_Z 4.00

I want to display it like below using bwt-datatable.

Item Supplier_X Supplier_Y Supplier_Z

Item_1 5.00 5.50 6.00
Item_2 3.50 3.00 4.00

Is it possible to do this with datatable or the data has to be transformed while still at backend?

I'm getting the error message below and non of my bwt-tables are working. They were working before.

Uncaught ReferenceError: CollectionHelpers is not defined

It's been said on release page that v2.1 solves these two not being available when building but in my case it still is an issue and i have to copy weackcache.js and collectionhelper.js manually every time i do a build. Can you please advice?