Dynamic table in LWC
Sometimes we come across scenarios when we need dynamic table where we have dynamic number of columns as well as rows.
One such was to display the Profiles with different users assigned to it in an org in Lightning Web Component (LWC).
pivotTable.html
<template>
<div if:true={isLoading} class="cstm-spinner">
<lightning-spinner alternative-text="Loading...">
</lightning-spinner>
</div>
<div if:false={isLoading}>
<table
class="slds-table slds-table_cell-buffer slds-table_bordered
slds-max-medium-table_stacked-horizontal">
<thead>
<th class="" scope="col">
<div class="slds-truncate">
User
<lightning-icon if:false={val}
icon-name="utility:down"
size="x-small">
</lightning-icon>
/Profile
<lightning-icon if:false={val}
icon-name="utility:right"
size="x-small">
</lightning-icon></div>
</th>
<template for:each={profiles} for:item='prof' >
<th class="" scope="col" key={prof}>
<div class="slds-truncate" title={prof}>
{prof}
</div>
</th>
</template>
</thead>
<tbody>
<template for:each={users} for:item='user' >
<tr key={user.name}>
<td key={user.name} >
{user.name}
</td>
<template for:each={user.chex} for:item='val' >
<td class="" key={val}
style="text-align: center;">
<lightning-icon if:true={val}
icon-name="utility:check"
variant="success"
size="small"></lightning-icon>
<lightning-icon if:false={val}
icon-name="utility:close"
variant="error"
size="xx-small"></lightning-icon>
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</template>
pivotTable.js
import { LightningElement } from 'lwc';
import getUserProfiles from '@salesforce/apex/pivotTableController.
getUserWithProfiles';
export default class PivotTable extends LightningElement {
result = [];
profiles = [];
users = [];
isLoading = true;
connectedCallback(){
getUserProfiles()
.then(result =>{
this.profiles = result[0].profiles;
result.forEach(element => {
this.users.push({
'chex' : element.isUserForProf,
'name' : element.userName
});
});
this.isLoading = false;
})
.catch(error =>{
console.log("error");
this.isLoading = false;
});
}
}
pivotTableController.cls
public without sharing class pivotTableController {
@AuraEnabled(cacheable=true)
public static List<userProfWrapper> getUserWithProfiles(){
List<User> users = [SELECT Id, ProfileId, Profile.Name,
firstName, lastName, Name
FROM User];
List<Profile> profs = [SELECT Id, Name,
(SELECT Id,firstName, lastName
FROM Users)
FROM Profile
ORDER BY Name];
List<userProfWrapper> wrapperResult = new List<userProfWrapper>();
List<String> profiles = new List<String>();
for(User user : users){
userProfWrapper wrapper = new userProfWrapper();
List<Boolean> bools = new List<Boolean>();
String userName = '';
for(Profile profile : profs){
if(!profile.users.isEmpty()){
if(!profiles.contains(profile.Name))
profiles.add(profile.Name);
if(user.profileId == profile.Id)
bools.add(true);
else
bools.add(false);
userName = user.name;
}
}
wrapper.isUserForProf = bools;
wrapper.profiles = profiles;
wrapper.userName = userName;
wrapperResult.add(wrapper);
}
return wrapperResult;
}
public class userProfWrapper{
@AuraEnabled
public List<String> profiles;
@AuraEnabled
public List<Boolean> isUserForProf;
@AuraEnabled
public String userName;
}
}
