I have a table with styled column headers. Header height is limited so the headers are actually narrow. The header has also the sort indicator (the default arrow/triangle).
When the user changes the width of a column such that it is smaller than the text's width, the text is trimmed with 3 dots at the end. E.g. "Universi..." So far so good.
The thing is the sort indicator hides part of the trimmed text. Imagine wide column - the text is fully show and the sort icon is on the right and everthing looks good. Now the user resizes the column. Just before the text is trimmed with 3 dots, the sort indicator starts to hide the right side of the text. At some point the text is trimmed with the sort indicator on top of the 3 dots . E.g. "Universi.▽" or even "Univers▽".
It looks like the header does not take into account the sort sign. Is there a simple way to set the sign indicator to not overlap the trimmed text e.g. "Univer... ▽"? I need the columns to be resizable and sortable.
I don't want to define a special widget with push button and text box and handle events and trimming and so... it is a serious overhead.
Thanks
