Issue with handsontable nested headers for empty grid

Tags: #<Tag:0x00007f4535b79a18>

Hi,

For a grid with nested headers, the grid completely disappears when there is no data, i.e., data: [].
The headers should be displayed even when there are no rows in grid.

Here’s a jsfiddle using the nested headers :
https://jsfiddle.net/fkdr2L0a/

Handsontable version: 11.0.1

Thanks!

Hi @hiramahambre

We do not show a table with no data. But if you would like to have only headers and no data you can load a single row (with the length of your headers) and hide it. Here is an example https://jsfiddle.net/4x6vpsuz/

The problem is worse than that situation, so the suggested hack workaround is insufficient. Say we have a grid full of data. We have a quick search function that filters the data based on what the user types. If they type something which doesn’t match any grid data then we lose the headings.

Another scenario where it breaks. We put organizational rows in the grid which have different fields than the regular rows. Something like:
Sellers
seller1 | id1 | data1
seller2 | id2 | data2
Buyers
buyer3 | id3 | data3

In that scenario when we update our grid the headings are wrong because it seems to only look at the first row.

We see the call in the nested headers plugin to get the source column count is the root cause of all of these issues. It seems to me there needs to be a way to get around that.

Thanks.

Hi @dhaber

When it comes to searching I understand the need and the problem. It seems that you can add additional logic to the operation of filtering to add that empty row and hide it to maintain headers. However, without seeing the code you use for your custom ‘search’ I am not able to tell where to inject that operation.

What do you mean by

have different fields than the regular rows. Something like:
Sellers
seller1 | id1 | data1
seller2 | id2 | data2
Buyers
buyer3 | id3 | data3

Does it mean that you in some circumstances want to show a different table (different data and headers) in the place of the main table?

Hi Aleksandra,
Here is a fiddle of what I meant: https://jsfiddle.net/dhaber/ogq7h2jv/

I agree that we could in theory put in a dummy first row with all of the nulls and then include it in our hidden rows, but what you’re asking us to do is really not fair. We have many scenarios where our grids can end up with no rows in them, and you’re asking us to code workarounds in all of them (including the intersection with our existing hidden rows functionality), rather than fixing the root cause.

This is clearly an issue with nested headers (indeed, these issues don’t occur if we don’t happen to have nested headers in our grid), so as a paying customer I appeal to you to look into a fix in the nested headers plugin itself. (Not to mention we don’t have a problem with any of this in HoT v7.)

Thank you very much,
David

Hi David.

Could you please specify what has changed for you when you updated to v11, meaning

Not to mention we don’t have a problem with any of this in HoT v7.

When I use Handsontable v7 in your latest demo https://jsfiddle.net/dhaber/ogq7h2jv/ it works the same as it does in v11. If you have spotted any regression I need to report it to the team. Maybe in your application the updateSettings is used? It has been reported to wipe out the headers since v8.4.0. This issue is reported here https://github.com/handsontable/handsontable/issues/8587

ps. When it comes to the main question. When I’ll understand how your data is constructed, what options are used, and what properties are set on the initialization I’ll do my best to help you to make it work as you desired.

Hi Alexsandra,

First, I was wrong about the version we’re on now. It’s 6.2.2. (It’s a whole other topic about why we’re still on v6, which I’ve written to via the general feedback page.) Interestingly, I can’t get that fiddle to display anything when I change the version to “@6.2.2”.

Having said that, it looks like issue 8587 is exactly what’s been reported by the team. I will confirm that in the next 24 hours.

Back to the original issue, when users do a quick search we create an updated array of rows that match the search criteria and then we call hot.LoadData(newArray). If none of the data matches the search term then newArray will be an empty array. That code has been there since 2015 (yes, we’ve very long time customers. :slight_smile:).

I’m starting to think the root cause of our issues is that we’re on such an old version of Handsontable. If you could please suggest how to handle the quick search scenario, it seems we’ll have to look over all of our code to see how we can deal with updating our grids the new way. Here is a fiddle that mimics a quick search when the button at the top is clicked: https://jsfiddle.net/dhaber/x9b1r0qd/.

Thanks.

I’m starting to think the root cause of our issues is that we’re on such an old version of Handsontable

Might be possible, in v8 we have fixed more than 150 issues related to wrong calculations on indexes (of rows and columns) with the introduction of index mappers.

Are you able to make a subbranch and test your application using v8?

Hi Aleksandra,
I have confirmed that this describes the issue we’re having:

Is there a suggested workaround for that?

As far as our original issue is concerned, we know it doesn’t work in HoT 7 and later, so we’re just going to have to fix it on our end. Here is a fiddle that shows how I thought we should handle the quick search case, when the user types is a search term that doesn’t match any of the data: https://jsfiddle.net/dhaber/d1v4qwmf/. The problem is, the “fake” row is not getting hidden. Would you please tell me what I’m doing wrong?

Thanks.