I’m trying to get handsonTable implemented in a salesforce lightning web component.
I understand that the audience here might not have Salesforce knowledge, but hoping to work together to find out what the problem could be.
Below is a very basic implementation taken from the examples, but extremely simplified.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="hot"></div>
<script>
var dataObject = [{
id: 1,
currency: 'Euro'
}, {
id: 2,
currency: 'Japanese Yen'
}];
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
data: dataObject,
columns: [{
data: 'id',
type: 'numeric',
width: 40
}, {
data: 'currency',
type: 'text'
}],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
var hot = new Handsontable(hotElement, hotSettings);
</script>
</body>
</html>
In order to use external libraries in Salesforce Lightning Web Components (LWC), I am using the format mentioned in https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library
Modifying the HTML code above to the format mentioned gives me the LWC JS file as
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import handsonTableResource from '@salesforce/resourceUrl/handsonTable';
export default class handsonTable extends LightningElement {
dataObject = [
{
id: 1,
currency: 'Euro'
},
{
id: 2,
currency: 'Japanese Yen'
}
];
renderedCallback() {
Promise.all([
loadScript(this, handsonTableResource + '/handsontable.full.js'),
loadStyle(this, handsonTableResource + '/handsontable.full.css')
])
.then(() => {
this.initialiseHandsOnTable();
})
.catch(error => {
alert(error);
});
}
hotElement;
hotSettings;
initialiseHandsOnTable() {
this.hotElement = this.template.querySelector('div.hotElement');
this.hotSettings = {
data: this.dataObject,
columns: [
{
data: 'id',
type: 'numeric',
width: 40
},
{
data: 'currency',
type: 'text'
}
],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
new Handsontable(this.hotElement, this.hotSettings);
}
}
and the LWC html as
<template>
<div class="slds-m-around_medium">
<div class="hotElement" lwc:dom="manual"></div>
</div>
</template>
Applying these, gives me the result as below in Salesforce
The DOM generated is as below
<c-handson-table data-data-rendering-service-uid="188" data-aura-rendered-by="322:0">
<div class="slds-m-around_medium">
<div class="hotElement handsontable htRowHeaders htColumnHeaders" id="ht_917e38abdce11495">
<div class="ht_master handsontable" style="position: relative; overflow: visible;">
<div class="wtHolder" style="position: relative; overflow: visible;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_bottom handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="hot-display-license-info">The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-evaluation'. <a target="_blank" href="https://handsontable.com/docs/tutorial-license-key.html">Read more</a> about it in the documentation or contact us at <a href="mailto:support@handsontable.com">support@handsontable.com</a>.</div>
</div>
</c-handson-table>
As you can see the DOM structure is being generated for handsonTable but none of the data or columns are being generated.
I do not see any errors or warning on the Chrome Dev Tools console (except the license warning from handson table)
Any assistance would be greatly appreciated.