Visual Hint on ordering by custom column in backend

Question

When creating a backend list view there are options to sort items by clicking on the column title Default Ordering Column

<th scope="col" style=".." class="text-center d-none d-md-table-cell">
                                <?php echo HTMLHelper::_('searchtools.sort', '', 'a.ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-sort'); ?></th>

When adding searchtools.sort to one of my columns like so:

<th scope="col" style="width: 1%" class="d-none d-md-table-cell text-center">
                                <?php echo HTMLHelper::_('searchtools.sort', 'COM_COMPONENT_TABLE_TABLEHEAD_SHORTCODE_TITLE', 'a.shortcode', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-sort'); ?></th>

aswell as the respective content in the filters_view.xml:

...
<form>
...
<fields name="list">
<field name="fullordering" ...>
...
<option value="a.shortcode ASC">COM_COMPONENT_FILTER_SHORTCODE_ASC</option>
<option value="a.shortcode DESC">COM_COMPONENT_FILTER_SHORTCODE_DESC</option>
...

The list can be sorted but i have no visual indicator on the clicked column header. It just "stays" like its not sorted at all.

Even the examples I've found in the web has the same "issue" on the visible side. When using the title column in the same view it works for this column but not for "non-default" columns.

I've already seen that there is a method in the HTMLView called "getSortFields" but even when adding there my column in the array it doesn't change anything:

protected function getSortFields(): array
    {
        return [
            'a.published'    => Text::_('JSTATUS'),
            'a.title'         => Text::_('JGLOBAL_TITLE'),
            'a.id'           => Text::_('JGRID_HEADING_ID'),
            'a.group_id'    => Text::_('COM_COMPONENT_TABLE_TABLEHEAD_GROUPID_TITLE'),
        ];
    }

What I am missing here?

Answer 1

This is an example from a View of mine where the HTMLView class gets the List Order and Direction values

$this->listOrder  = $this->escape($this->state->get('list.ordering'));
$this->listDirn   = $this->escape($this->state->get('list.direction'));

and in the /tmpl folder the values are added to the table column headings

<th class='left'>
    <?php echo HTMLHelper::_('searchtools.sort',  'JGRID_HEADING_ID', 'a.id', $this->listDirn, $this->listOrder); ?>
</th>

More commonly you would find examples of $listOrder and $ListDirn being set in the top of the /tmpl file rather than using the $this to pass them across from the HTML View class.

This allows people to click on the column headings to change the sort column and order. I rarely use the Sort option of the filter_view.xml, I find it cumbersome to maintain and not that intuitive for the end user.

The columns that you wish to sort on must also appear in the Model as part of the __construct

    public function __construct($config = array())
    {
        if (empty($config['filter_fields']))
        {
            $config['filter_fields'] = array(
                'id', 'a.`id`',
....
            );
        }

Although the property is filter_fields you will also find if the column(s) you want to sort on does not appear in this array then you will not be able to sorting on that column(s).