Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<com-et-datagrid1></com-et-datagrid1>

CSS

body {
	font: 0.8em sans-serif;
}
.btyellow,
.btblue, .btpink, .btwhite {
  padding: 10px;
  width: 150px;
  border: 2px solid #ccc;
  margin-bottom: 2px;
  background: #fff;
  border-radius: 2px;
}
.handsontable .white {
  background: #fff;
}
.handsontable .yellow {
  background: #f7ecb7;
}
.handsontable .blue {
  background: #b7ebf4;
}
.handsontable .pink {
	background: #fcc9e9;
}
.yellow-dot, .blue-dot, .pink-dot, .white-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	float: right;
	border: 1px solid #777;
}
.white-dot {
	background: #fff;
}
.yellow-dot {
	background: #f7ecb7;
}
.blue-dot {
	background: #b7ebf4;
}
.pink-dot {
	background: #fcc9e9;
}

JavaScript

(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);
   
})();