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);
    }
     
   }

}