We are users of handsontable-pro and we use polymer for our frontend. The readme states that this is not yet ready for production, though it seems there has been little to no activity for about a year now. I am wondering if there are still plans to maintain this or if we should switch to vaadin-grid.

Thanks

Please release current gh-pages head as version 0.1.2 (last commit: f6bf183)

hot-table styles don't appear at all if Polymer 1.1 is loaded in Shadow DOM enabled mode.

  <script src="/sys/webcomponentsjs/webcomponents.js"></script>
  <script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = "shadow";
  </script>
  <link rel="import" href="/sys/polymer/polymer.html" />

Screenshot:

Polymer has some info about it:
https://www.polymer-project.org/1.0/docs/devguide/settings.html
https://www.polymer-project.org/1.0/docs/devguide/styling.html

Datepicker is not showing despite moment.js and pikaday.js was imported.

It would be nice to get support for Polymer 1.0, at least experimentally on a separate branch

I'm sorry for this noobish question but since migrating to 0.2 (Polymer 1).

How can I implement an alternating row colors.

Is it going to be handled by the renderers?

I noticed, that when the data object was changed in hot-table after adding a new row, the table lost the column names and data in the view, but kept the changes in the data object itself (tested using the getData() method).

Hot fixed by using the updateSettings({}) method after adding the new row.

The readme refers to 0.3.3 from cloudfare however polymer is now on 0.5.1. Has this been tested in the new versions?

When we try to copy from nested table data by drag and drop fill handle to cell (with type e.q: text) then cell render serialized data.

We found an issue when you click a link in a table that loads a new partial page from the server. it seems like first it loads the new partial and then it tries to give focus to the cell in the table where the link is. But since that doesn't exist anymore you get an exception.

http://screencast.com/t/6hxehdlP

Is there a way of turning the cell selection off but still having the content clickable?

I was wondering if there is any way to natively handle a cell which had its value deleted, or a value added when the cell was empty before action. Somewhat like an afterDelete() and afterFill(). I know these could be handled by the afterChange() event, although it might not be optimal performance-wise, since I would have to check each cell affected for which kind of change just happened.

Obviously its not an issue, rather a feature request. while this module is under development, is it possible to add tree-grid functionality ?

Dependent on #4

Should be possible to use a <template rel="hot-editor"> as a cell editor, so one can declare editors with HTML. Any HTML form, Custom Element or Polymer variable can be used as a cell editor.

<hot-column>
  <template rel="hot-editor">
    <template bind="{{ProductSearch}}">
      <input type="search" value="{{Query}}">
      <template repeat="{{Results}}">
        <span onclick="this.templateInstance.model.Choose$++">{{Name}}</span>
      </template>
    </template>
  </template>
</hot-column>

The editor MAY actually NOT make any direct change in Handsontable datasource. Other than that, it changes something in controller/server, and controller/server decides to update that datasource which will be reflected in Handsontable. Possible use scenario: Dropdown menu shows just how many people are invited to a event. Expanding the dropdown menu brings a searchable Handsontable instance with search and multiselect capabilities.

It should be upgraded to be a hybrid element, compatible with Polymer 1 and 2:

https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements

hot-table not working with Handsontable greater then 0.20.0.

Hi, hot-table team. Thanks for a great tool.
In my project, I tried to use this package for a purpose of excel grid view.

• Does it work well with Polymer 3?
• Do I need to embed polyfill js file and html file for usage?
• I tried to use inside the render section but nothing happens. It is not bound as shadow dom and I can't see anything on the screen.

Please help me for those issues.
Great regards!

The demos at http://handsontable.github.io/hot-table/ don't work

Could you pls take a look? We need to use hot-table in an app, but need the demos as the reference point.

Figured out the previous problem and everything is displaying correctly, but now I have another one, how would I go about converting the table data back to json?

It should be possible to use a <template rel="hot-renderer"> as a cell renderer, so one can declare renderers with HTML. Any HTML tag, Custom Element or Polymer variable can be used in the template.

<hot-column>
  <template rel="hot-renderer">
    <strong>{{name.last}}</strong> {{name.first}} 
  </template>
</hot-column>

NOTE: rel is probably not the right attribute to add semantic meaning for a <template>, because it should be used only with predefined values and a href (http://demosthenes.info/blog/411/Using-rel-in-HTML5). Please investigate what is the desired replacement (class? data-role?)

Need to change Handsontable package building process to be compatible with npm.

Context menu is not opening on touchscreen mobile , same is working on desktop browsers.

Steps to reproduce

1. Go to the demo page http://handsontable.github.io/hot-table/examples/dashboard.html
2. Execute this in the browser console: document.querySelector("dashboard-demo").set("people.0.age", 99);

Expected

The age of Joe Fabiano (first row) should be re-rendered as 99.

Actual

Nothing happens after changing the age to 99 with Polymer notification protocol unless you click somewhere on the page .

Clicking forces the re-render because of the option options.observeChanges, which forces change dirty checking on mouse events and has nothing to do with Polymer notification protocol.

IMO observeChanges should be turned off for hot-table and Polymer notification protocol should be supported.

PS. actually observeChanges feature in Handsontable might be causing more wrong than good, because it can sometimes hide other issues. I'd suggest to remove observeChanges option from Handsontable.

I have a working implementation of this. Will make a PR.

Will HotTable provide horizontal scrollbar feature?

Of all the grids out there in the WebComponents Universe, this is undoubtedly the best!

The only thing stopping our team from using <hot-table> though is mobile-support.

A preliminary viewing of the demos and examples on Chrome for Android showed that we were unable to select the cells using touch and the UI also did not auto resize. Any comments on mobile support? Is it planned for the future?

From http://docs.handsontable.com/0.15.1/demo-mobiles-and-tablets.html it seems handsontable itself officially supports only IPad?

<paper-input> or <input> (or maybe other webcomponents inputs) are losing their current focus when CTRL is pressed

<paper-input floatinglabel label='Text'></paper-input>
<hot-table datarows="{{itemsArray}}"></hot-table>

Is it possible create <hot-columns> dynamically using a dom-repeat ? I have tried something like this

<hot-table height="250" width="300">
        <template is="dom-repeat" items="{{colum_list}}">
          <hot-column value="{{item.col}}" header="{{item.title}}" width="{{item.width}}"></hot-column>
        </template>
  </hot-table>

But I got Uncaught TypeError: this.parentNode.onMutation is not a function Error in the console

Any workarounds to do this ?

Hi @wszymanski,
I trigger cell to open i dialog and wanted to close the cell editor right after dialog is opened, which function will help me to do that?

My Json is:
{"id":"africa","divisions":[{"name":"Algeria"},{"name":"Angola"},{"name":"Benin"},{"name":"Botswana"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cameroon"},{"name":"Cape Verde"},{"name":"Central African Rep."},{"name":"Chad"},{"name":"Comoros"},{"name":"Congo"},{"name":"Côte d'Ivoire"},{"name":"Dem. Rep. Congo"},{"name":"Djibouti"},{"name":"Egypt"},{"name":"Eq. Guinea"},{"name":"Eritrea"},{"name":"Ethiopia"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Ghana"},{"name":"Guinea"},{"name":"Guinea-Bissau"},{"name":"Kenya"},{"name":"Lesotho"},{"name":"Liberia"},{"name":"Libya"},{"name":"Madagascar"},{"name":"Malawi"},{"name":"Mali"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Namibia"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Rwanda"},{"name":"S. Sudan"},{"name":"Sao Tome and Principe"},{"name":"Senegal"},{"name":"Seychelles"},{"name":"Sierra Leone"},{"name":"Somalia"},{"name":"South Africa"},{"name":"Sudan"},{"name":"Swaziland"},{"name":"Tanzania"},{"name":"Togo"},{"name":"Tunisia"},{"name":"Uganda"},{"name":"W. Sahara"},{"name":"Zambia"},{"name":"Zimbabwe"}]}

and my hot-table code:
<hot-table datarows$="{{mapData}}" row-headers> <hot-column width="200" value$="divisions.name" header="Englischer Name"></hot-column> </hot-table>

But in order for it to display anything at all I'd have to change the value to "divisions.0.name", but that won't work for me as it will obviously only display the first item.
How would I get it to display all of the items?

I have been testing hot-table in Chrome, and it looks good, especially easy to integrate into a frontend project I'm working on in the Elm language. You have to specify Polymer.dom = 'shadow' before the component is loaded, otherwise basic functionality seems to be there.

However, under Firefox and Safari, where the Web Component importing is handled by the webcomponentsjs/webcomponents.js library, styles and positioning are severely off:

Row headers and column headers seem to be positioned absolute relative the the body element, grid lines are missing, and fonts, colors, etc. do not render properly. Here's what it looks like, correct, in Chrome:

Any possible fixes, or suggestions for me, if I'm thinking of fixing myself?

Is there a way to export hot-table to csv, pdf, png and so on?

I noticed the value, row and col are available to bind too. But it would be nice to have the row itself and not just the index. I know I can use the index to get to the collection and get the row data that way. We want to call a function and look at multiple fields in the row.

    <hot-column header="Name" read-only="true">
        <template data-hot-role="renderer" is="dom-template">
                <span>[[formatName(model)]]</span>
        </template>
    </hot-column>

Fatal Error on press backspace when after cell is selected;
The provable problem is the shadowDom, as tested here.

Is it possible for the table to keep the selection when it loses focus? It seems to always set -1 as selectedIndex now.

Need to check compatibility <hot-table> with all features defined in handsontable-pro.

I'm using the latest master version of <hot-table>
When I implemented <hot-table> as a web component in my sample project, the handsontable was not displayed because the console throw error as below:

hot-table.js:54 Uncaught TypeError: Cannot set property 'isHotTableEnv' of undefined
at HTMLElement. (hot-table.js:54)

I tried to comment out the below source code (hot-table.js)

        this.hot.isHotTableEnv = true;
        Handsontable.eventManager.isHotTableEnv = this.hot.isHotTableEnv;

Then the table was shown properly.
Could you please provide me a sample source code without modifying hot-table.js?
I need to run hot-table in JavaScript (not AngularJS)

Thank you very much!

The use of Bower and HTML Imports in this repository is already causing usability problems for me.

HTML Imports are deprecated in Chrome M70, and will be removed in M73, around April 2019.
https://www.chromestatus.com/feature/5144752345317376

HTML Imports were never implemented in Firefox, and require polyfills.

The latest version of webcomponentsjs says, "The HTML Imports polyfill has been removed. Given that ES modules have shipped in most browsers, the expectation is that web components code will be loaded via ES modules."

And finally, Polymer version 3 is abandoning HTML imports, and using ES modules instead: https://www.linkedin.com/pulse/writing-web-components-from-future-polymer-3-rafa-bernad

I am really a novice at Web Components, but is this an easy migration?

All polymer elements in https://github.com/PolymerElements have the main importable element (in this case hot-table.html) at the top-level directory of the project.

This convention makes importing predictable, you just include:

<link rel="import" href="bower_components/paper-button/paper-button.html">

Rather than each element having something different and un-predictable like:

<link rel="import" href="bower_components/paper-button/src/paper-button.html">
<link rel="import" href="bower_components/paper-button/dist/paper-button.html">

etc.

handsontable supports pasting content into editable cells with Cmd-V (Ctrl-V), but this only works in hot-table on Chrome (native Web Components support).

The default DD/MM/YYYY date format is still reflecting

despite it's declare to be MM/DD/YYYY

We are having an issue when our hot-table is inside a paper drawer panel. It looks like hot-table doesn't calculate the drawer width when sizing the table.
To recreate take the hot-table/index.html and remove the width/height and add stretch-h="all" to hot-table.
It will then size to browser width.
Then put table inside a paper-drawer-panel main div and it will go off the screen by the width of the panel. Did all this in the hot-table/index.html.

Example:

        <template id="tpl" is="dom-bind">
            <p>
                Name of first person: <strong>{{ people.0.name.first }}</strong> | Highlighted row: <strong>{{
                highlightedRow }}</strong>
            </p>
            <paper-drawer-panel>
                <div drawer>drawer</div>
                <div main>
                    <hot-table stretch-h="all" datarows="{{ people }}" context-menu max-rows="{{ people.length }}"
                               highlighted-row="{{ highlightedRow }}" class="htLeft">
                        <hot-column width="30" read-only value="id" header="ID"></hot-column>
                        <hot-column value="name.first" header="First Name">
                            <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template>
                        </hot-column>
                        <hot-column width="100" value="name.last" header="Last Name"></hot-column>
                        <hot-column width="100" type="date" value="date" header="Birthday"></hot-column>
                        <hot-column value="gender" header="Gender" source="[[ genderSource ]]"
                                    type="dropdown"></hot-column>
                        <hot-column type="numeric" value="age" header="Age"></hot-column>
                        <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column>
                    </hot-table>
                </div>
            </paper-drawer-panel>
        </template>

This is just a nice to have. Having a way to switch the theme of the table to material design. Eliminating the need for the developer to customize the appearance themselves.

Material Design data table examples:

https://www.google.com/design/spec/components/data-tables.html#

Steps to reproduce

1. Install hot-table locally using bower
2. Run a local server (I use Polyserve)
3. Go to the demo page index.html
4. Right-click on any cell

Expected

A context menu should open because the attribute context-menu is present.

Actual

Context menu does not open but I can see that the vertical scrollbar moves a bit. It seems as if the context menu opens unstyled outside of the browser viewport.

Tested using Chrome.

Nothing happened when I change some css properties on or < hot-column>

It should be better support for navigating through nested tables via arrows keys. For now it's not possible to navigate between different tables without using mouse.

how to reproduce issue:

• double click an autocomplete field

• type any text that's not valid and backspace to delete previous character won't work

• and when I try to move the cursor out of the field, I got this error in the console

  Uncaught TypeError: Cannot read property 'getInstance' of undefined handsontable.full.js:6809
  line where the error occur: [ var innerHOT = editor.htEditor.getInstance(); ]
  function that's has bug: handsontable.full.js:6809 - onBeforeKeyDown function

I understand this might be related with handsontable bug, but I think the issue is somewhere related with the polymer implementation preventing HOT to get the required node / variable since shadow DOM might have a bit structure differences.

Pikaday not showing edited date