The following code will show a VF page with two columns in a table :- Account ID and Account Name. Clicking on "Account Name" header in the table will cause sorting of the data in that column. If it is sorted in ascending order, then it will switch to descending order and vice-versa.

public class AccountSortHeader
{
    public List<Account> allAcc {get;set;}
    public String sortDirection {get;set;}
    
    public AccountSortHeader()
    {
        sortDirection = 'asc';
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
    }
    
    public pageReference sortAccNamecolumn()
    {
        if(sortDirection == 'asc')
        {
            sortDirection = 'desc';
        }
        else if(sortDirection == 'desc')
        {
            sortDirection = 'asc';
        }
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
        return null;
    }
}

VF page :-

<apex:page controller="AccountSortHeader">
  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockTable value="{!allAcc}" var="a" id="AccountData">
        <apex:column headerValue="Account ID" value="{!a.Id}"/>
        <apex:column value="{!a.Name}">
          <apex:facet name="header">
          <!-- Any facet whose name is header will apply to the header of this column in the pageBlockTable -->
            <apex:outputPanel>
              <apex:commandLink value="Account Name" action="{!sortAccNamecolumn}" reRender="AccountData"/>
            </apex:outputPanel>
          </apex:facet>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Go to this VF page using this :- https://c.ap5.visual.force.com/apex/vfAccountSortHeader

The following code will show a VF page with two columns in a table :- Account ID and Account Name. Clicking on "Account Name" header in the table will cause sorting of the data in that column. If it is sorted in ascending order, then it will switch to descending order and vice-versa.

public class AccountSortHeader
{
    public List<Account> allAcc {get;set;}
    public String sortDirection {get;set;}
    
    public AccountSortHeader()
    {
        sortDirection = 'asc';
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
    }
    
    public pageReference sortAccNamecolumn()
    {
        if(sortDirection == 'asc')
        {
            sortDirection = 'desc';
        }
        else if(sortDirection == 'desc')
        {
            sortDirection = 'asc';
        }
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
        return null;
    }
}

VF page :-

<apex:page controller="AccountSortHeader">
  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockTable value="{!allAcc}" var="a" id="AccountData">
        <apex:column headerValue="Account ID" value="{!a.Id}"/>
        <apex:column value="{!a.Name}">
          <apex:facet name="header">
          <!-- Any facet whose name is header will apply to the header of this column in the pageBlockTable -->
            <apex:outputPanel>
              <apex:commandLink value="Account Name" action="{!sortAccNamecolumn}" reRender="AccountData"/>
            </apex:outputPanel>
          </apex:facet>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>

/* The following code will show a VF page with two columns in a table :- Account ID and Account Name. Clicking on "Account Name" header in the table will cause sorting of the data in that column. If it is sorted in ascending order, then it will switch to descending order and vice-versa. */ public class AccountSortHeader { public List allAcc {get;set;} public String sortDirection {get;set;}

public AccountSortHeader()
{
    sortDirection = 'asc';
    String query = 'Select Id, name from Account order by Name ' + sortDirection;
    allAcc = Database.query(query);
}

public pageReference sortAccNamecolumn()
{
    if(sortDirection == 'asc')
    {
        sortDirection = 'desc';
    }
    else if(sortDirection == 'desc')
    {
        sortDirection = 'asc';
    }
    String query = 'Select Id, name from Account order by Name ' + sortDirection;
    allAcc = Database.query(query);
    return null;
}

}

VF page :- <apex:page controller="AccountSortHeader"> apex:form apex:pageBlock <apex:pageBlockTable value="{!allAcc}" var="a" id="AccountData"> <apex:column headerValue="Account ID" value="{!a.Id}"/> <apex:column value="{!a.Name}"> <apex:facet name="header"> apex:outputPanel <apex:commandLink value="Account Name" action="{!sortAccNamecolumn}" reRender="AccountData"/> </apex:outputPanel> </apex:facet> </apex:column> </apex:pageBlockTable> </apex:pageBlock> </apex:form> </apex:page>

The following code will show a VF page with two columns in a table :- Account ID and Account Name. Clicking on "Account Name" header in the table will cause sorting of the data in that column. If it is sorted in ascending order, then it will switch to descending order and vice-versa.

public class AccountSortHeader
{
    public List<Account> allAcc {get;set;}
    public String sortDirection {get;set;}
    
    public AccountSortHeader()
    {
        sortDirection = 'asc';
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
    }
    
    public pageReference sortAccNamecolumn()
    {
        if(sortDirection == 'asc')
        {
            sortDirection = 'desc';
        }
        else if(sortDirection == 'desc')
        {
            sortDirection = 'asc';
        }
        String query = 'Select Id, name from Account order by Name ' + sortDirection;
        allAcc = Database.query(query);
        return null;
    }
}

VF page :-

<apex:page controller="AccountSortHeader">
  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockTable value="{!allAcc}" var="a" id="AccountData">
        <apex:column headerValue="Account ID" value="{!a.Id}"/>
        <apex:column value="{!a.Name}">
          <apex:facet name="header">
          <!-- Any facet whose name is header will apply to the header of this column in the pageBlockTable -->
            <apex:outputPanel>
              <apex:commandLink value="Account Name" action="{!sortAccNamecolumn}" reRender="AccountData"/>
            </apex:outputPanel>
          </apex:facet>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>