I'm using Drupal's theme table function to build a custom table.

All of the columns on my table are sortable. I would like to visually indicate that they are sortable by putting both an ascending and descending sort icon in the column header.

To indicate which sort is active, I would like to show only one icon, corresponding to the current sort (ascending or descending).

Here's what I have:

enter image description here

Here's what I want:

enter image description here

How can I accomplish this?

So far, the closest I've gotten is overriding theme_tablesort_indicator(), but this will only let me override the icon for the active sort. (Docs here)

2 Answers 2


I used some jQuery and CSS to accomplish this:

<script> (function($) { Drupal.behaviors.myBehavior = { attach: function (context, settings) { $("table th a").each(function(){ if (!($(this).html().indexOf('<img') > -1)) { var current = $(this).text(); $(this).html(current + '<span class="sortable"><img src="/misc/arrow-asc.png" style="margin-bottom:0" alt=""><img src="/misc/arrow-desc.png" style="margin:0 -13px 11px 5px" alt=""></span>'); } }); } }; })(jQuery); </script>


I figured out a hacky way to do what I want...

function mytheme_preprocess_table(&$variables) {
  foreach ($variables['header'] as $key => $header) {
    if (!isset($header['sort'])) {
      $header['data'] .= theme('image', array('path' => 'misc/arrow-desc.png', 'width' => 13, 'height' => 13, 'alt' => t('sort descending'), 'title' => t('sort descending')));
      $header['data'] .= theme('image', array('path' => 'misc/arrow-asc.png', 'width' => 13, 'height' => 13, 'alt' => t('sort ascending'), 'title' => t('sort ascending')));
    $variables['header'][$key] = $header;

The downside to this solution is that it will apply to unsortable columns as well as sortable columns.

Also, this solution affects the link title that is generated for the column header. It will contain the markup for the arrows as well as "sort by $data".

Clearly this isn't a good solution, but it's the best I've got at the moment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.