Handsontable in salesforce LWC

Tags: #<Tag:0x00007efc6b6d4cc8>
#1

Hi Team,

We have Handsontable used in VF pages and our users really amazed by the tool. Asked us to use the same for Salesforce Lightning. We are trying to use it in Aura Component or LWC components but not able to make as Locker Service is blocking us to use it. Could you please help me to use Handsontable in Aura or LWC components.

Appreciate all your help.

Thank you

#2

Hi

Do you get some errors or there are no error and table just do not appear on the page?

#3

Thanks, Aleksandra for your response. Below is the error:
error===> TypeError: Cannot read property ‘nodeType’ of undefined
at isHotTable (element.js:177)
at isChildOfWebComponentTable (element.js:181)
at new Core (core.js:123)
at new Handsontable (index.js:45)
at o.initialiseHandsOnTable (pnF_HandsonTablePOCLWC.js:4)
at eval (pnF_HandsonTablePOCLWC.js:4)

I am using v7.4.2 with licenses.
Here is the js:

import { LightningElement } from ‘lwc’;

import { loadScript, loadStyle } from ‘lightning/platformResourceLoader’;

import handsonTableResource from ‘@salesforce/resourceUrl/Handsontable_7’;

export default class PnF_HandsonTablePOCLWC extends LightningElement {

dataObject = [ { id: 1, currency: 'Euro' },{ id: 2, currency: 'Japanese Yen'}];

renderedCallback() {

    Promise.all([

        loadScript(this, handsonTableResource + '/Handsontable_7/handsontable-master/dist/handsontable.js'),

        loadStyle(this, handsonTableResource + '/Handsontable_7/handsontable-master/dist/handsontable.css'),

    ])

    .then(() => { this.initialiseHandsOnTable(); })

    .catch(error => {

        alert('error3xxxxx');

        alert(error);

        console.log('error===>', 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);

}

}

Is Handsontable library support LWC? If not, we can go back to VF page implementation.

Appreciate all your help.

Thank you.

#4

We do not have official support for LWC (we do not test Handsontable under the salesforce project).
The error seems to be related to some misalignments between what is already loaded and what should be loaded. The best way to get to the bottom of this issue would be to debug the code.
Nevertheless, if the visual force page solution works well I guess that it might be the best way to implement Handsontable.

#5

Thanks, @aleksandra_budnik for your quick response. I do see a questions which posted last year and they concluded that it is working with LWC. Here is the question link: Empty table generated in Salesforce Lightning Web component

Do you have or anyone has working example with LWC.

Do you guys have any plans to support LWC near future? it will be nice as new developments in Salesforce will use LWC so we will not miss this amazing libarary.

Thank you.

#6

Clients usually do not share whole apps so I guess that we do not have any examples for LWC. When it comes to the support for new platforms. We would rather get to the bottom of the issue and try to fix it for the core than declare official support for the platform. Meaning, sometimes one small change in the core or rendering engine might result in an improvement for more than one platform.

#7

Thanks @aleksandra_budnik. I did some changes but end-up with another issue and here is the error: error===> TypeError: (0 , _moment.default) is not a function
at _injectProductInfo (mixed.js:133)
at new Core (core.js:127)
at new Handsontable (index.js:52)
at l.initialiseHandsOnTable (handsonTableLWC.js:4)
at eval (handsonTableLWC.js:4)

Above error is show when i used ver8.0.0.

Thank you.

#8

Moment is one of our dependencies. You may check if you have those dependencies installed. Generally, how to you download Handsontable

  • yarn/npm
  • static file
  • CDN
#9

Thanks, @aleksandra_budnik. I am using static file from https://github.com/handsontable/handsontable/tree/master/dist.

Thank you.

#10