Displaying data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object

How can a developer display data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object?

The Problem

An org has a data model with a Buyer__c object that has a lookup relationship to Region__c and a Supplier__c object has a lookup relationship to Region___c.
How can a developer display data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object?

I have first recreated a similar data model in my Dev Org -

I have also created a VF page with a custom controller for Buyer__c and a custom extension for querying related data from Supplier__c.

Don't forget to check out: Access sObject's (Salesforce Object Type) Fields and Its Record | Apex Developer Guide

BuyerPage.vfp - 

<apex:page controller="BuyersSamplePageController" extensions="BuyersSamplePageControllerExt" sidebar="false">
<style type="text/css">
.outBorder {
    border:3px outset black;
}
.inBorder{
    border-top:2px dotted blue;
    border-left:2px dotted blue;
}
    .inlineTable {
    display: inline-flex !important;
}
</style>

<apex:pageBlock title="List of Buyer & Suppliers" >
    <div class="inlineTable">
        <apex:dataTable value="{!buyersList}" var="b" styleclass="outBorder" width="550px" >
            <apex:column styleclass="inBorder">
                <apex:facet name="header">Buyer ID </apex:facet>
                <apex:outputText >{!b.Id}</apex:outputText>
            </apex:column>
            <apex:column styleclass="inBorder">
                <apex:facet name="header">Buyer Name </apex:facet>
                <apex:outputText >{!b.Name}</apex:outputText>
            </apex:column>
        </apex:dataTable>

        <!-- nesting suppliers table (not recommended) -->
        <apex:dataTable value="{!supplierList}" var="s" styleclass="outBorder" width="550px">
            <apex:column styleclass="inBorder">
                <apex:facet name="header">Supplier ID </apex:facet>
                <apex:outputText >{!s.Id}</apex:outputText>
            </apex:column>
            <apex:column styleclass="inBorder">
                <apex:facet name="header">Supplier Name </apex:facet>
                <apex:outputText >{!s.Name}</apex:outputText>
            </apex:column>
        </apex:dataTable>
    </div>
</apex:pageBlock>
</apex:page>

BuyersSamplePageController - 

public class BuyersSamplePageController {
    public List<Buyer__c> buyersList{get;set;}
    public BuyersSamplePageController(){
        buyersList = new List<Buyer__c>();
        buyersList = [select id,name from Buyer__c];
    }
}

BuyersSamplePageControllerExt - 

public class BuyersSamplePageControllerExt {
    public List<Supplier__c> supplierList{get; set;}
    public BuyersSamplePageControllerExt(BuyersSamplePageController custCtrl){
        supplierList = new List<Supplier__c>();
        supplierList = [SELECT id, name FROM Supplier__c] ;
    }
}

Buyers/Suppliers list - 

Check out an amazing tutorial video here: What is Apex? | Way to become a Salesforce Developer | Salesforce Development Tutorials

As you can see here, now I have been able to retrieve data from the Supplier on the VF page using extensions!

Side note: I have nested the 2 tables for buyers & suppliers, for illustration purposes only. If you want to combine two different objects in a single table and display it on a VF page then use a Wrapper class.