Apply ellipsis to column header

Tags: #<Tag:0x00007efc627ee270> #<Tag:0x00007efc627ee0b8> #<Tag:0x00007efc627edd98>
#1

Hello,

I have stumbled upon an issue that the filter icon overlaps with the column header if the user manually resize the column width and if column width is narrow.
Is there any way to add an ellipsis to the column header text?

image

I have found this issue which is similar but there aren’t any solutions.

Example:

#2

Hi @hjeong1200

Yes, you can track the width of a column and then truncate it if necessary. The afterGetColHeader hook runs with each rendering and table rerenders when you resize a column so you do not need to use the afterColumnResize hook.

Here’s a demo you can test https://stackblitz.com/edit/5ctxin-nws4yh?file=index.js,index.html,styles.css

ps. it has a dropdown menu applied, but Stackblitz has issues with Handsontable modularization, so they’re not visible. If you like the idea in the demo I recommend testing that one locally as well

#3

Hello @aleksandra_budnik,

Thank you for the suggestion. I have implemented your solution and it worked until I added columnSorting and dropdownMenu.
I think the reason that column sorting feature does not work is because the default Handontable column header is removed. Could you please recommend me a way to keep initial colHeader and add the truncate feature?

#4

Hi @hjeong1200

I came up with a different solution, based solely on modifying the CSS class: https://jsfiddle.net/handsoncode/h7fzprc2/ In this case the dropdownMenu is visible and works correctly.

#5

Hello @adrian.szymanski,

Thank you for the solution.
Unfortunately, the arrow icon next to the column header is not displayed because of overflow: hidden property. Other than that, the solution is perfect. Could you help me with this last issue?

image
image

https://jsfiddle.net/mxLhs7we/4/

#6

@hjeong1200

You’re right. I’m afraid that at this point mine or @aleksandra_budnik solutions would be the only one that would let you truncate the column headers title.

The good news is that we are currently working on a project that will simplify styling customization so such changes should be hopefully available to do in the near future.

#7

Hi @adrian.szymanski,

Alright, I understand that sometimes it’s really hard to get things right with CSS solutions… Anyways, I really appreciate your help, @aleksandra_budnik and @adrian.szymanski!

Can I request the column header ellipsis as a new feature? In my opinion the filter button overlapping with the column header text is pretty awkward and it deteriorates user experience as the filter button cannot be selected when it’s overlapping.

#8

Hi @hjeong1200

Yes, I agree with that. I hope it will be solved with our styling architecture redesigned.