Image in table column headers / table column sort headers

Is there a way to add image in table column headers ? Actually, my need is to add the commonly used “sort triangle” to one column header, and change it’s direction programmatically. Maybe I can use the one that appears by default when the columns are sortable, but I don’t know how.

Thank’s in advance.

There are two ways to do that i can think of:

  1. Use Icons in the header
    How to add images to a table
  2. Change the style of the existing arrow. Style class: .v-table-header-cell-asc .v-table-sort-indicator AND
    .v-table-header-cell-desc .v-table-sort-indicator OR only
    .v-table-sort-indicator if you want to change all the arrow no matter whether upwards or downwards (To get more detail use a tool like Firebug to inspect the entire css/html)

I believe you can use the normal sorting mechanism of the Table for this.

You can call Table.setContainerSortPropertyId(…) and setSortAscending(boolean) to set the sort direction etc. Then have your container react appropriately in its sort(…) method, which can also be overridden in the case of most containers if you want to bypass container internal sorting and use your own mechanisms for that.

Thanks for your responses.

I can’t use the normal sorting mechanism because I don’t want all the headers to sort their column. I need that 2 of the columns show and hide some columns. Then on those columns, I don’t want the triangle arrow.

I didn’t manage to use icons with setItemIcon() method yet, but the solution with the css would be great if I could change the style name of the clicked from a Table.HeaderClickListener.headerClick event. The table default behavior obviously do that, so I guess it’s possible, but I can’t find how to do it.

Is there a way to display “sort triangle” in both directions for each sortable columns?
Just to say to the user that the column is sortable.

You can achieve that by theming the sorting icon div-element when the column is not sorted. The selectors and css you need would be something like:

v-table-header-cell .v-table-sort-indicator {
 background: transparent;
 width: 19px;
 height: 37px;
 line-height: 37px;
 margin-left: -19px;

 &::before {
  content: "\f07d;" or whatever you want
  font-family: FontAwesome;
 }
}

Thank you very much Pekka.
By adding dot before v-table-header-cell it works.
But the icon is here for also generated columns that are not sortable.
Can i avoid it for generated columns?

I’m afraid that is not possible without doing some client side code modifications to Table, and even then it might not be easy. Basically you’d just need to have some class name applied to a column header if it is sortable in the first place. You could
search for a ticket
or
create a new one
.