currentHeaderClassName not applied when the table is empty

Tags: #<Tag:0x00007f8b2b7b56c0>
#1

Testing the following version: “@handsontable/vue”: “^12.1.2”

If you click on a column header in a table that has data, the following classes (by default) are applied to the TH of the column:
“ht__highlight ht__active_highlight”

However, if you click on a column header in a table that does not have data, only the following class is applied:
“ht__highlight”

In our application, when a user clicks a non-header column cell, the row is selected, but the column header is not highlighted. We use the ht__active_highlight class to highlight the column header when it’s clicked directly. Therefore, if the ht__active_highlight class isn’t added when the header is clicked, as is the case when the table is empty, the header isn’t hightlighted properly when when you’re trying to move columns.

See this fiddle for a demonstration:
https://jsfiddle.net/tkane2000/4kwb2uhd/11/

In older versions (3.0), when you click on a column header of an empty table, both classes are added to the TH as expected: “ht__highlight ht__active_highlight”

Is there a way to highlight the column header when it’s selected and the table is empty so that column move will work properly?

#2

Hi @tkthompson

I think I have spotted where the issue lies. I noticed that you are overwriting the default class for header highlight in currentHeaderClassName with a new, empty class which basically deletes all of the default properties. I minified your example and it turned out that it was the problem.

https://jsfiddle.net/aszymanski/7qbtf10d/

#3

In your fiddle, if I click on the cell with foo_01 in it, the column header is highlighted. In the tables in our app, we have a fixed column with checkboxes in each cell and when you click on any cell in a row, the row is highlighted and the checkbox is checked, denoting the row as being selected. At that point, we don’t want to show that the column is selected. However, we allow moving columns, so when you click on a column header then it should be highlighted so you can drag it.

In v3.0, we handled this by using activeHeaderClassName to highlight the column header instead of currentHeaderClassName. That’s why we overwrite those 2 options. This worked consistently when there was data or no data in the table.

In v12, it works differently when there is no data in the table (as described in my initial post and shown in my fiddle). This may be a bug. The docs don’t say much about the intentions of activeHeaderClassName and currentHeaderClassName and the difference between the 2, so I can’t say for sure.

PTAL! thanks! :slight_smile:

#4

Hi @tkthompson

Thank you for the explanation. I attached Handsontable 3.0 to your example to see how it supposed to work (basing on your description) and I cannot see any difference with the same settings. In both versions (3 and 12) when you have no data, and when you are changing the default class in activeHeaderClassName the results are the same, please look:

The only difference I can see is that in v3 you can’t even move the columns when there is no data, but in v12 you can do that, even without the highlight.

#5

Thanks, that’s useful! I’m not sure why I’m seeing different behavior in our vs your 3.0.0 fiddle. One thing to note is that in the 3.0.0 version of our app, we don’t actually use the currentHeaderClassName & activeHeaderClassName settings. However, if I comment those out in your 3.0.0 fiddle and update the querySelector to select ‘.ht__highlight’, I can see that the functionality is more or less the same as in 12.x. I’m not sure why that isn’t the case in our app…I don’t see any hacks that would make a difference.

Either way, can you explain why activeHeaderClassName isn’t applied when the table is empty? Is this a bug or expected behavior? As I said in my previous comment, without it we’re unable to set up the table so that the the row is highlighted when you click on a table cell, but the column header isn’t.

#6

I do not see any details on that in the specification. Assumed that this https://github.com/handsontable/handsontable/blob/56b93f7a7feebefc0e6571674c25fac3a0227aea/handsontable/src/dataMap/metaManager/metaSchema.js#L106 is 100% accurate to what we specified

The activeHeaderClassName option lets you add a CSS class name
* to every currently-active, currently-selected header (when a whole column or row is selected).

I may assume that as there are no selected cells the class is not attached. But let us consult that with the team and get back with updates (possibly next week).

#7

Right, there’s a differentiation between currently-active and currently-selected, but it doesn’t say much about it in the docs. You’re probably right that if there are no rows, it assumes you can’t select the whole column, so when you click on the header, it isn’t marked as “currently-active”. However, now you have this situation in which column move works a bit differently when the table is empty (it isn’t marked as currently-active).

Thanks for investigating!

#8

Hi! Any word on this?

#9

Sorry, for keeping you waiting @tkthompson
I have good news! We discussed the issue internally and it will be fixed for the upcoming version.

#10

:+1:
is there an issue for this in github I can follow?

#11

We fixed that before we made an issue with this pull request https://github.com/handsontable/handsontable/pull/10093 which adds new functionality.

#12

Hi! After taking a quick look at the description of the PR and the code I don’t see how it’s relevant. Can you explain how that fixes the issue I’ve mentioned above?

#13

The currentHeaderClassName was not the one to blame, it was the way we set up coordinates. Our developer fixed that to support the new feature before.

Here https://github.com/handsontable/handsontable/blob/develop/handsontable/src/3rdparty/walkontable/src/cell/range.js#L123-L126 is the exact change, and here https://jsfiddle.net/budnix/5ms0jvb4/6/ is a pre-release demo that you can test.

#14

Hi @tkthompson

this week we are planning to publish a new version that contains the fix.

#15

And it’s online! Please check if version 12.3.0 solved the issue.

Here is the full list of changes https://handsontable.com/docs/javascript-data-grid/release-notes/#_12-3-0

#16