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:
- Vuetify (primary framework I have to use)
- Bootstrap(secondary framework when I can’t customizing vuetify)
Issue:
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
v-row>
v-col>
b-tabs> : bootstrap for design purpose (I’ve tried with v-tabs but didn’t work)
b-tab>
here is my handsontable component
… /////
My code:
hot-table
ref=“controlLcextendPpc”
:data=“getData”
:columns=“columns”
:columnSorting=“false”
:colHeaders=“colHeaders”
:outsideClickDeselects=“false”
:manualColumnResize=“false”
:autoRowSize=“false”
:autoColumnSize=“false”
stretchH=“all”
height=“120”
:className="‘htMiddle htCenter’"
:currentColClassName="‘selectedRow’"
/>
