I managed to import jQuery and DataTable js using import and static resources but when I try to translate the documentation sentence :
$('⌗example').DataTable()
into what a LWC accepts it doesn't work:
this.template.querySelector('table.example').DataTable();
Please find hereby my code:
filteredTable.html
<template>
<lightning-card title="OST Events">
<lightning-layout>
<lightning-layout-item>
<table id="table_id" class="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<template if:true={error}>
<c-error-panel errors={error}></c-error-panel>
</template>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
filteredTable.js
Is there an other way to call a function of an imported js library?Thanks!import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import DATATABLE from '@salesforce/resourceUrl/dataTablesv10_18';
import JQUERY from '@salesforce/resourceUrl/jQuery';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class FilteredTable extends LightningElement {
DataTable;
@track error;
@track dataExample;
dataTablejsInitialized = false;
renderedCallback() {
if (this.dataTablejsInitialized) {
return;
}
this.dataTablejsInitialized = true;
loadScript(this,JQUERY)
.then(()=>{
loadScript(this, DATATABLE+'/datatables.min.js')
})
.then(()=>{
console.log("ENTRO EN EL .THEN DEL LOADSCRIPT");
this.DataTable = this.template.querySelector('table.example').DataTable();
})
.catch(error => {
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading DataTables',
message: error.message,
variant: 'error'
})
);
});
}
}
Hi Nicola Can you help me in my LWC problem of using a third party JS library (XSX js ) . I cant seem to figure out how do I instanciate or call a method in that library.
import shimlatest from '@salesforce/resourceUrl/shimlatest';
import xlsxfull from '@salesforce/resourceUrl/xlsxfull';
loadScript(this, shimlatest)
.then(() => {
loadScript(this, xlsxfull)
.then(() => {
X = XLSX; // THIS object XLSX IS FROM THE 3rd party library
console.log('XLSX Value of ' + X);
if(X !== undefined)
X = '';
this.initializePage();
})
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading XLSX modules',
message: error.message,
variant: 'error',
}),
);
});
HI All,I am new in LWC implementation and facing problem while adding 3rd Party js lib within LWC component.Can We are Jquery or React lib in LWC or not? Also I am facing issue using same component in lightning web component.Example: I have a dropdown component i need to use this same component in other page but issue is i am facing is that the data is loaded dynamically and if i use that component then data in dropdown will conflict.Is there any solution regarding this? Hi Is there any way to use Jquery '$' in lightning web component? Hi Vijayasaharan,I am running into the exact same issue with trying to use xlsx to read a spreadsheet when uploaded from a file input field. Did you figure out how to access the methods from the xlsx library? I also think you need to do this.template.querySelector('table.example').DATATABLE.DataTable();FYI this.template.query... doesn't need Jquery to run. I've done it before, here is an example https://github.com/punxcat/notecontent-lwc/blob/master/force-app/main/default/lwc/notescomp/notescomp.jsBut I am also currently struggling on using jQuery commands within the LWC.. if you figured this out or there is a better tutorial on external scripts let me know!