Merge corner header and first row header

Tags: #<Tag:0x00007f8b1d9ce0c8>
#1

Hi,

To meet my requirement I have to merge the corner header and 1st row header of handsontable, can anyone help me to achieve this, below is the structure how I need the header like

Thanks,
Bala

Merge headers causes issue while getting highlighted
#2

There is no official API for merging this area but here is a demo that can help http://jsfiddle.net/b5380vz6/

#3

Thanks @aleksandra_budnik, it helped me to achieve that, but it creates one more issue.

The issue is, I am using angular for my project and if I use that CSS properties in my component’s CSS file it’s not replicating in screen, but if I use that in main style.css file that works fine, but that makes the content to display in all the tables of handsontable throughout my application, can you please give me some other suggestion to achieve that.

#4

That is exactly how it should work. The main CSS style is the place to put the code. If you want it to appear only in one table you need to add an additional class or an ID for the table and include it in the CSS settings

#5

I am confused, how to implement that with angular, can you please give me an example for angular with what you had explained.

#6

Hi @ebalasubramanian24

you can for example as an ID to the <hot-table> element, like id="hot1"

#9