Add another column headers preserving default column labels

I have a custom header row made out of plain table (data) cells.

There are some problems with this setup, like user beeing able to remove that row, offseting all the data by 1 in computation etc.
I would like to add such extra header row as legit headers, but preserving default A,B,C… naming like in spreadsheet. Nested headers kind of do the trick, but requires to define ABC as well. Is it possible to append custom header row to the default one?

This is what I came up with using nested columns and custom HTML inside, but as you can see, it is just bad. Custom html is applied as inner element of the header, while I neeed to be able to modify header element.

Here is example copied from the docs adopted to my case

https://jsfiddle.net/ejm8L05t/
I also need to use tooltip, "required asterisk’ and having tooltip indicator - just like in case of comment indicator

Hi @sebastian.choina

Here’s an example of how you can make the headers look prettier: https://jsfiddle.net/aszymanski/65kehpL9/25/

I hope that helps.

Thanks Adrian, I will most probably use code you have provided as it does what it should (hacky isnt it?)

Thank you for your support