Header not scrollable

Tags: #<Tag:0x00007f0b10c9bbd0>

Hi,

I am using Angular Wrapper of Handsontable table, with Angular 8 and angular material.
When i am scrolling , header are not scrolling with the rows data.

Can u lease help to resolve this issue.

Regards,
Naveen

Hey @nav2jaiswal

can you please load your code to the CodeSandbox or Stackblitz?

Hi @aleksandra_budnik,

My Problem is same as the below.

Do you have any idea when this issue going to be fixed

Also, can u please let me know where in which hook i can update the this.updateSettings({}) as workaround

Hey @nav2jaiswal

Unfortunately, we have not yet fixed this issue because we are working on the very important version of Handsontable (vanilla) that we are planning to release in parts.

this.updateSettings({}) as workaround you should attach to afterInit hook.
Here is an example demo - https://jsfiddle.net/7m1056ts/

Hi @piotr.nowak,

Sorry I was not able to implement the workaround,
I have reproduce my same problem below StackBlitz.

Can you please help me with the workaround.

Thanks,
Naveen

Hi @aleksandra_budnik,

Can you please provide example for the same, as it is bit urgent.

Thanks,
Naveen

You have a data set with 3 columns and 8 rows, but in <hot-table> you defined too many columns

  1. <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
    
  2. <hot-column data="name" title="Full name"></hot-column>
    
  3. <hot-column data="address" title="Street name"></hot-column>
    
  4. <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
    
  5. <hot-column data="name" title="Full name"></hot-column>
    
  6. <hot-column data="address" title="Street name"></hot-column>
    
  7. <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
    
  8. <hot-column data="name" title="Full name"></hot-column>
    
  9. <hot-column data="address" title="Street name"></hot-column>
    
  10. <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
    
  11. <hot-column data="name" title="Full name"></hot-column>
    
  12. <hot-column data="address" title="Street name"></hot-column>
    
  13. <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
    
  14. <hot-column data="name" title="Full name"></hot-column>
    
  15. <hot-column data="address" title="Street name"></hot-column>
    

Every <hot-column> have to correspond to data just like in this our basic demo - https://handsontable.com/docs/7.3.0/frameworks-wrapper-for-angular-simple-example.html

Hi @piotr.nowak,

I have kept the columns repeated for demo purpose.
I have updated the data, but still horizonatal scrolling is not working,
On scroll table rows are scrolling but headers are sticky and not scrolling along with rows.

Regards,
Naveen

Hi @nav2jaiswal

Sorry, but I spent on this task for about 2 hours.
We would be happy to help with this however, the support services are a part of our commercial offer. If you have an Extended or Premium support plan I can spend more time on a code review.

Hi @piotr.nowak,

Can you please have a look on this on priority.
Please let me know if you need any more clarifications.

Regards,
Naveen

Hi @power.sg.license.key

Could you send me your license key?
If you don’t want to share it on the forum, please send to support@handsontable.com.

shared on the given email

Thank you. I have already send a reply on email so I’m closing this topic.