How to make entire header of sortable column clickable

Question:
I have a pager setup with sortable columns, the table head looks like:

<tr rsf:id="header:">
    <th>
      <a href="javascript:;" rsf:id="date">Date</a>
    </th>
</tr>

How do you make it so the user can click anywhere in the <th> to sort (instead of clicking just the link)?

Answer:
To sort the column with the entire table header, you just need to move the "rsf:id" out from the anchor(<a>)to the table header(<th>), as follow:

<tr rsf:id="header:">
    <th rsf:id="date">
      <a href="javascript:;">Date</a>
    </th>
</tr>