function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Bob_zBob_z 

Convert Visualforce to Lightning Components Rendered Data table

I am trying to update my visualforce code to a Lightning web component so it will render correctly on mobile devices as well as desktops.  I have been looking for examples on Lightning Datatable component references but I can't find any thing to reference extension controllers or how to only render certain records like my visualforce code below..  If i could get some help  on how to convert the code below that would be great.

Visualforce Page
 
<apex:page standardController="Account"   extensions="VF_SiteServicePartnerAllController" lightningStylesheets="true"  >


<style>
      
          .ht{ height:0px;
    vertical-align:middle;
          
          }
              
   </style>
 
<apex:form > 
  <apex:pageBlock >
    <apex:pageBlockTable cellpadding="1" width="100%" columns="2" value="{!sspList}" var="item">

           <apex:column rendered="{!IF(item.Service_Partner_Site_Status__c = 'Active',true,false )}"  >
                 <apex:outputPanel rendered="{!CONTAINS(item.Trade__c, 'Land')}">
                <apex:outputField value="{!item.Supported_Trade__c}" /><br></br>
                <apex:outputLabel value=""><b>Service Partner Assigned to Site</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Partner Primary Contact</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Primary_Field_Contact__c}"/><br></br>
                <apex:outputLabel value=""><b>Primary Field  Cell</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Primary_Field_Mobile__c}"/><br></br>
                <apex:outputLabel value=""><b>Primary Field Email</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Primary_Field_Email__c}"/><br></br>
                <apex:outputLabel value=""><b>Secondary Contact</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Secondary_Field_Contact__c}"/><br></br>
                <apex:outputLabel value=""><b>Secondary Cell</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Secondary_Field_Mobile__c}"/><br></br>
                <apex:outputLabel ><b>Secondary Email</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Secondary_Field_Email__c}"/><br></br>
                <apex:outputLabel ><b>Latest Work Order</b></apex:outputLabel><br></br>
                <apex:outputField value="{!Account.Latest_Work_Order__c}"/>
           </apex:outputPanel>
           </apex:column>
           
           <apex:column styleClass="ht" rendered="{!IF(item.Service_Partner_Site_Status__c = 'Active',true,false && CONTAINS(item.Trade__c, 'Land') )}" >
                <apex:outputPanel rendered="{!CONTAINS(item.Trade__c, 'Land')}">
                <apex:outputLabel ><b>Service Partner Owner</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_Owner__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Partner Owner Cell</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_Owner_Mobile__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Partner Main Phone</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_Main_Phone__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Partner Owner Email</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_Owner_Email__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Provider Start Date</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_Start_Date__c}"/><br></br>
                <apex:outputLabel value=""><b>Service Provider End Date</b></apex:outputLabel><br></br>
                <apex:outputField value="{!item.Service_Partner_End_Date__c}"/>
           </apex:outputPanel> 
           </apex:column>

      </apex:pageBlockTable>

    </apex:pageBlock>

  </apex:form>
</apex:page>

Apex Controller
// Used on the account page updated 1-31-2020
Public Class VF_SiteServicePartnerAllController{
   private Account acc;
   public List<Site_Service_Partner__c> sspList {get;set;}
   
   public VF_SiteServicePartnerAllController(ApexPages.StandardController sp){
       acc = (Account)sp.getRecord();
       sspList = new List<Site_Service_Partner__c>();
       sspList = [SELECT Id,Name,Site_Account__c,Primary_Field_Contact__c,Service_Partner__c,
                  Service_Partner_Owner__c,Service_Partner_Owner_Mobile__c,Service_Partner_Owner_Email__c,
                  Primary_Field_Email__c,Primary_Field_Mobile__c,Service_Partner_Site_Status__c, 
                  Contracted_Services__c,Secondary_Field_Contact__c,Secondary_Field_Email__c,Secondary_Field_Mobile__c,
                  Service_Partner_Start_Date__c,Service_Partner_End_Date__c,Service_Partner_Main_Phone__c,Service_Line__c,Supported_Service_Lines__c FROM Site_Service_Partner__c WHERE Site_Account__c =: acc.Id    AND  Service_Line__c IN ('Land', 'Snow', 'Land;Snow') AND Service_Partner_Site_Status__c = 'Active'];

    
    Set<Id> bidId = new  Set<Id>();  
    for(Site_Service_Partner__c bs:sspList){
       bidId.add(bs.Id);
    }
     
   }

}

 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Bob,

I was able to find a link in dev artcles which shows a sample of how to display data in a table for lightning web coponents, please find the lin below:

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example


Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thank you!

Warm regards!
Anutej Poddaturi