+ Start a Discussion
Saravanan @CreationSaravanan @Creation 

LWC Bootstrap Mobile Responsive Table

Hello Everyone,

I am trying to load the bootstrap into my lwc component to create the mobile responsive table. 

I have created the LWC Tab and in the. And I was getting this below error while loading the page so I placed the compoent into another component 

https://trailblazer.salesforce.com/issues_view?id=a1p3A000001SHoDQAW&title=the-first-parameter-of-loadscript-and-loadstyle-must-be-an-lwc-component-when-using-lightning-platformresourceloader

After that I not getting this error, I placed this lightning component in another LWC and even though it's not loading the reesource successfully.

<template>
<h2>Common Fruits</h2>
<div class = "table-responsive">
<table class="table table-bordered table-striped" id="tableOne">
<thead >
<tr>
<th>Name</th>
<th>Color</th>
<th>Taste</th>
<th>Taste 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Green and Red</td>
<td>Sweet and Tart</td>
<td>Sweet and Tart</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>Sweet and Mushy</td>
<td>Sweet and Mushy</td>
</tr>
<tr>
<td>Mango</td>
<td>Yellowish Green</td>
<td>Tangy</td>
<td>Tangy</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>Sweet and Tangy</td>
<td>Sweet and Tangy</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>Mild Sweetness</td>
<td>Mild Sweetness</td>
</tr>
</tbody>
</table>
</div>
<!-- /.container -->
</template>


import { LightningElement } from 'lwc';
import tableresponsive from '@salesforce/resourceUrl/TableResponsiveSource';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
export default class TableResponsive extends LightningElement {
connectedCallback(){
Promise.all([
loadStyle(this, tableresponsive +'/bootstrap-4.5.0-dist/css/bootstrap.css'),
loadStyle(this, tableresponsive +'/bootstrap-4.5.0-dist/css/bootstrap.min.css'),
loadStyle(this, tableresponsive +'/bootstrap-4.5.0-dist/css/bootstrap-grid.css'),
loadStyle(this, tableresponsive +'/bootstrap-4.5.0-dist/css/bootstrap-grid.min.css'),
loadScript(this, tableresponsive +'/bootstrap-4.5.0-dist/js/jquery-3.5.1.js'),
loadScript(this, tableresponsive +'/bootstrap-4.5.0-dist/js/bootstrap.js'),
loadScript(this, tableresponsive +'/bootstrap-4.5.0-dist/js/bootstrap.min.js'),
]).then(() => {
window.console.log('*********Success****************');
})
.catch(error => {
window.console.log('*********error****************');
});
}
}

If you have any solution please let me know.