Часть dataTables fixColumn не работает ⇐ Javascript

[Anonymous]

Я использую DataTables версии 1.10.18 и пытаюсь заморозить первый столбец в таблице. Я включил фиксированныйColumns.js и соответствующие файлы CSS; однако функциональность фиксированных столбцов не работает должным образом. После проверки ресурсов в инструментах отладки выяснилось, что файлы fixColumns.js и CSS были успешно загружены.
См. изображение ниже

.
import {LightningElement,api} from 'lwc';
import dataTableResource from '@salesforce/resourceUrl/DataTableDemo';
import JqueryResource from '@salesforce/resourceUrl/jquery331';
import {
loadScript,
loadStyle
} from 'lightning/platformResourceLoader';
import {
ShowToastEvent
} from 'lightning/platformShowToastEvent';
// import toast message event .

// import apex class and it's methods.
import getAccounts from '@salesforce/apex/LWCExampleController.getAccounts';

export default class SampleTable1 extends LightningElement {
accounts = [];
error;
@api recordId;
async connectedCallback() {
await this.fetchAccoutns();

Promise.all([
loadScript(this, JqueryResource),
loadScript(this, dataTableResource + '/DataTables-1.10.18/media/js/jquery.dataTables.min.js'),
loadScript(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/js/dataTables.fixedColumns.min.js'),
loadScript(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/js/fixedColumns.dataTables.js'),
loadStyle(this, dataTableResource + '/DataTables-1.10.18/media/css/jquery.dataTables.min.css'),
loadStyle(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/css/fixedColumns.dataTables.css'),
]).then(() => {
console.log('script loaded sucessfully');

const table = this.template.querySelector('.tableClass');
const columnNames = ['Spend Category', 'Spend Sub Category', 'Line Item Description', 'Calculation Description', 'NGO and ILP Discussion','Q1','Q2','Q3','Q4'];
let tableHeaders = ' ';
columnNames.forEach(header => {
tableHeaders += '' + header + '';
});
tableHeaders += '';
table.innerHTML = tableHeaders;

let jqTable = $(table).DataTable({
fixedColumns: {
leftColumns: 1 // Fix the first column
}
});
$('div.dataTables_filter input').addClass('slds-input');
$('div.dataTables_filter input').css("marginBottom", "10px");

this.accounts.forEach(rec => {
let tableRows = [];
//tableRows.push('' + rec.Name + '');
tableRows.push(rec.Spend_Category_T__c != undefined ? rec.Spend_Category_T__c : '');
tableRows.push(rec.Spend_Sub_Category_T__c != undefined ? rec.Spend_Sub_Category_T__c : '');
tableRows.push(rec.Line_Item_Description__c != undefined ? rec.Line_Item_Description__c : '');
tableRows.push(rec.Calculation_Description__c != undefined ? rec.Calculation_Description__c : '');
tableRows.push(rec.NGO_and_ILP_Discussion__c != undefined ? rec.NGO_and_ILP_Discussion__c : '');
tableRows.push(rec.Q1__c != undefined ? rec.Q1__c : '');
tableRows.push(rec.Q2__c != undefined ? rec.Q2__c : '');
tableRows.push(rec.Q3__c != undefined ? rec.Q3__c : '');
tableRows.push(rec.Q4__c != undefined ? rec.Q4__c : '');
jqTable.row.add(tableRows);
});
jqTable.draw();

}).catch(error => {
this.error = error;
console.log('error in loaded script',this.error)
this.dispatchEvent(
new ShowToastEvent({
title: 'Error!!',
message: JSON.stringify(error),
variant: 'error',
}),
);
});
}

async fetchAccoutns() {
await getAccounts()
.then(data => {
if (data) {
this.accounts = data;
}
})
.catch(error => {
this.error = error;
this.accounts = undefined;
this.error = 'Unknown error';
if (Array.isArray(error.body)) {
this.error = error.body.map(e => e.message).join(', ');
} else if (typeof error.body.message === 'string') {
this.error = error.body.message;
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Error!!',
message: error,
variant: 'error',
}),
);
});
}

}


Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working