https://jspreadsheet.com/v12/webcomponent.js

1class Jspreadsheet extends HTMLElement {
2    constructor() {
3        super();
4    }
5
6    init(o) {
7        // Shadow root
8        const shadowRoot = this.attachShadow({mode: 'open'});
9
10        // Style
11        const css = document.createElement('link');
12        css.rel = 'stylesheet';
13        css.type = 'text/css'
14        css.href = 'https://cdn.jsdelivr.net/npm/jspreadsheet/dist/jspreadsheet.min.css';
15        shadowRoot.appendChild(css);
16
17        const cssJsuites = document.createElement('link');
18        cssJsuites.rel = 'stylesheet';
19        cssJsuites.type = 'text/css'
20        cssJsuites.href = 'https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css';
21        shadowRoot.appendChild(cssJsuites);
22
23        const cssMaterial = document.createElement('link');
24        cssMaterial.rel = 'stylesheet';
25        cssMaterial.type = 'text/css'
26        cssMaterial.href = 'https://fonts.googleapis.com/css?family=Material+Icons';
27        shadowRoot.appendChild(cssMaterial);
28
29        // JSS container
30        var container = document.createElement('div'); 
31        shadowRoot.appendChild(container);
32
33        // Properties
34        var toolbar = this.getAttribute('toolbar') == "true" ? true : false;
35
36        // Set the license
37        jspreadsheet.setLicense('ZmUwZTZiNDMyMmIxNzQxZDJjOThhNTlhMjdlMWY5NDQyOTY0OGZhMGE0ZmJhN2ZmNmIwMzcxYjQ3ODBlY2EzYTU3YTQ1YjJhZDJhM2Q4YTE2MjY5NzQ0ZDJmZGJhZGRlMDlkYjEwY2ViMDVkOTVkZjk2NTdkYzkxZjBjYzc1ZmEsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqTWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5');
38
39        // Create jexcel element
40        this.el = jspreadsheet(container, {
41            tabs: true,
42            toolbar: toolbar,
43            root: shadowRoot,
44            worksheets: [{
45                filters: true,
46                minDimensions: [6,6],
47            }],
48        });
49    }
50
51    connectedCallback() {
52        this.init(this);
53    }
54
55    disconnectedCallback() {
56    }
57
58    attributeChangedCallback() {
59    }
60}
61
62window.customElements.define('j-spreadsheet', Jspreadsheet);