stretchH='all' and tableheader missing in vue frameworks tabs

Tags: #<Tag:0x00007fa98e2513d8>

Hello there,

I have an issue when I put handsontable on(inside) vue frameworks tabs. I spent 2 days to figure it out and searched a lot but no luck… Please check the below and help me out! btw, I’m Korean so let me know if anything is unclear due to my writing.

Frameworks I use:

  1. Vuetify (primary framework I have to use)
  2. Bootstrap(secondary framework when I can’t customizing vuetify)

My handsontable is on the second tab. so whenever I clicked that tab, table header and stretchH=“all” doesn’t show/work(data is OK). To see the table header, I have to click tab area(anywhere). However still stretchH =“a” doesn’t all. I saw someone solved ‘table header not showing issue in vue’ by adding the table header data inside the handsontable component to render it properly so I’ve tried it but didn’t work.

I wrapped my tabs like this:
v-container> : vuetify
b-tabs> : bootstrap for design purpose (I’ve tried with v-tabs but didn’t work)
here is my handsontable component
… /////

My code:
:className="‘htMiddle htCenter’"

@import "../../assets/styles/"; Let me know in case you need more info! br, Chaehwa

Oh I forgot to mention that without ////height=“120”//// stretchH=“all” works perfectly. But I have to use the height…

Hey @r.chaehwa

can you please share the settings via online demo? Here is a demo using Handsontable for Vue you can base your example on those resources.


I’ve tried to setup online demo but it seems like I’m doing something wrong…
Here is my template with Vuetify and Bootstrap cdn imported one:

I couldn’t get the handsontable inside of any tabs… Please let me know what I’m doing wrong. I will fix it…

I solved this issue by just adding ‘lazy’ keyword in b-tab.
It was bootstrap rendering issue!!

So no worries after all!! :slight_smile:

Have a great day!


Thank you for the update, @r.chaehwa