Hi Experts, 
I'm trying to show field values in a table but its not showing. If there is  any other way I can show these values in a table then please assist.
This class has been used for other methods as well.
Below is my code-​​​​​​​

Apex Class-

    @AuraEnabled
    public static List<PI__c> getPIRecords( String contrecid) {
        List<id> IdSets = new List<id>();
        List<PI__c> memList = new list<PI__c>();
        String Query;
        
        if ( contrecid != null && contrecid != '' ) {
            
            List<Parent__c> prList = [Select id, name, contact__c from Parent__c where contact__c =:  contrecid];
            
            for(Parent__c e:prList){
                IdSets.add(e.id) ;
            }
            
            query = 'SELECT Id,Category__c,Segment_Effective_Date__c,Segment_Expiration_Date__c FROM PI__c where Parent__r.id in  :IdSets ORDER BY CreatedDate desc';
            
            memList = database.query(query);
        }
        
        if(memList.size() == 0){
            throw new AuraHandledException('No Record Found..'); 
            //return returnList;
        }
        else{
            
            return Database.query( query );
        }
    }

html-

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">

    <thead style="width:100%;">
      <tr class="slds-line-height_reset" style="color: black;">
        <th class="" scope="col">
          <div class="slds-truncate" title=" Category"> Category</div>
        </th>
        <th class="" scope="col">
          <div class="slds-truncate" title="Segment Effective Date">Segment Effective Date</div>
        </th>
        <th class="" scope="col">
          <div class="slds-truncate" title=" Segment Expiration Date">Segment Expiration Date</div>
        </th>
          </tr>
        </thead>
        <tbody>
          <template for:each={relatedprrec} for:item="rec" for:index="index" >
          <tr key={rec.Id} class="slds-hint-parent">

            <td data-label="Category">
              <div>
             <div class="slds-truncate" title="Category" >{rec.Category__c}</div>
            </div>
          </td>
            <td data-label="Segment Effective Date">
              <div>
             <div class="slds-truncate" title="Segment Effective Date" data-key={index}>{rec.Segment_Effective_Date__c}</div>
            </div>
          </td>
        <td data-label="Segment Expiration Date">
          <div>
            <div class="slds-truncate" title="Segment Expiration Date" data-key={index}>{rec.Segment_Expiration_Date__c}</div>
        </div>
        </td>
    </tr>
      </template>
      </tbody>
        </table>

JS-

getPIRecords({ contrecid: this.contrecid })
          .then(result => { 
              this.relatedprrec= result;
               var rrelatedprrec= [];
              this.relatedprrec= relatedprrec;
          })
          .catch(error => {
              console.log('error', error);
           });

    
}