Make custom header with icon and custom tooltip

Tags: #<Tag:0x00007efc6fd60d40>
#1

Hi, I am hopping you can help me with my table, because I have few tasks that I cannot make to work.

I have few column headers where I added fontawesome icons instead of regular text and also tooltip that you will see when hover on this icons.

Please look at this example of my code:
https://jsfiddle.net/alexdarui/ws8zx0ay/20/

First task is to make sorting work when user clicks on header icon (right now it works only if I click on the right side from icon).
I found a solution to add this CSS, but if there is more straight way please let me know:
.handsontable span.colHeader.columnSorting::before {
content: ‘’;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin-top: 1px;
margin-left: 2px;
}

Second task is to add icons to header tooltip. I added plain text in there for now, but I will need svg or fontawesome icons right next to that text.

Third task is to set my columns width to auto, but only third column I need to set to 200 because it will have a lot of text and I want to make sure it won’t take too much space. I cannot set max width, because it also has to work with manualColumnResize.

Please let me know if there is any way to implement this. Thank you.

#2

That is a default behavior as we needed to add the possibility to move and resize columns as well. It works this way across all our sorting demos https://handsontable.com/docs/8.0.0/demo-sorting.html. The sorting is triggered when user click the icon/title of the column

Second task is to add icons to header tooltip. I added plain text in there for now, but I will need svg or fontawesome icons right next to that text.

Here’s a working example https://jsfiddle.net/df0rhwbp/

#3

Thank you for respond Aleksandra.
On the second task example that you’ve sent, icon was added to header but in my case I need to add icon to header Tooltip (https://www.w3schools.com/css/css_tooltip.asp) so when you hoover on column header it will show:
(Dog icon) “This icon represents dog”
(Cat icon) “This icon represents cat”
So svg or fontawesome icon followed by text inside Tooltip (or some call it Hint).

And also did you have any luck on third task?
“Third task is to set my columns width to auto, but only third column I need to set to 200 because it will have a lot of text and I want to make sure it won’t take too much space. I cannot set max width, because it also has to work with manualColumnResize”

Please let me know if it’s possible to implement them, thank you!

#4

https://jsfiddle.net/bLhrtews/ this demo shows an icon and a tooltip (HTML title added to the header element)

09

When it comes to

my columns width to auto, but only third column I need to set to 200

we do not support similar functionality. There’s one workaround with a custom renderer - but it’s pretty heavy if you have a larger dataset https://jsfiddle.net/497x56qn/

#5

Do you think we can add icon right next to text “This icon represent a cloud”? Like on this picture?
tooltip

#6

@alext title element support only text
src https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title

If the icon is a must you can try to construct the window manually and trigger it on the afterOnCellMouseOver event.

#7

Thank you for your help, I will try that.

#8

As the main issue seems to be solved I’ll allow myself to close this topic. Nevertheless, I’ll wait for any update from you on email (support@handsontable.com).

#9