Using it in a Web Component (Two Issues)

Tags: #<Tag:0x00007efc72955a18>
#1

Hi All,

I am currently evaluating whether I can use handsontable for my work. I first need to embed it to web component and use a shadow dom. From what I have found so far there are two issues:

  • Context Menu seems to be with incorrect formatting (without css at all)
  • Dragging cells to copy the values from one to another produces an error (Uncaught TypeError: Cannot read property ‘getTopLeftCorner’ of undefined)

Is it something you can help me with?

Here is a code sample you can use to reproduce it. :

http://jsfiddle.net/gfLu428k/

  • Index.html
<com-et-datagrid1></com-et-datagrid1>
  • webcomponent_gh.js
(function()  {
    
    let tmpl = document.createElement('template');
    tmpl.innerHTML = `
        <div id="et-datagrid"></div>
    `;

    class DataGrid extends HTMLElement {

		constructor() {
            super(); 
            this._shadowRoot = this.attachShadow({mode: "open"});
            this._shadowRoot.appendChild(tmpl.content.cloneNode(true));
            this._tableOptions = {
              data: [['Company', 'Country', 'Revenue'],
              ['Dinc', 'UK', '1200'],
              ['Dinc', 'SA', '1500'],
              ['Dinc', 'AUS', '2500']
              ],
              contextMenu: true,
              comments: true,
              rowHeaders: false,
              colHeaders: false,
              fixedRowsTop: 1,
              licenseKey: 'non-commercial-and-evaluation'
            };
            this._loadThirdPartLib();
            this._tableDefinition;

        }

        

        _loadThirdPartLib(){
            const css = document.createElement('link');
            css.rel = 'stylesheet';
            css.type = 'text/css'
            css.href = 'https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css';
            this._shadowRoot.appendChild(css);

            const scriptLib = document.createElement('script');
            scriptLib.type = 'text/javascript';
            scriptLib.src = 'https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js';
            this._shadowRoot.appendChild(scriptLib);
            
            scriptLib.addEventListener('load', this._initialTabDef.bind(this));  
   
        }
      

      

        
        _initialTabDef(){
          this._tableDefinition = new Handsontable(this._shadowRoot.getElementById("et-datagrid"), this._tableOptions);
        }
        

        
    };
    
    customElements.define('com-et-datagrid1', DataGrid);
   
})();
#2

Hi @em.tanev

I can’t see where you apply your style.
Only the body is applied, but the CSS classes are not.

It seems that selection is disappearing first, and therefore ended with the bug. Maybe you need to listen to appropriate events.

#3

The style css and the script are attached to the shadow dom when you expand the tree.

From what I understand it requires further customisation as it is not supposed to work in a shadow dom/web component by default?

The same code works fine if I use it out of the web component.

#4

Yes, it seems that didn’t work with shadow dom/web component.
So you have to further customisation.

Admittedly we have a hot-table web component - https://github.com/handsontable/hot-table - but unfortunately, we don’t support (and develop) it any more.

#5