stretchH not working on Handsontable v15 with Vuejs3

Getting help Issues
,
1

I have a basic table in vuejs3:

<template>
  <hot-table
    :settings="{
      data: [
        ['2021', 10, 11, 12, 13],
        ['2022', 20, 11, 14, 13],
        ['2023', 30, 15, 12, 13],
        ['2024', 40, 15, 12, 13],
      ],
      stretchH: 'all',
    }"
  />
</template>

<script setup>
import 'handsontable/dist/handsontable.full.css'
import { HotTable } from '@handsontable/vue3'
</script>

There is no additional css or config, but this table won’t fill full width when using Handsontable v15 (i.e. stretchH: ‘all’ not working)(see uploaded v15.png screenshot below)

v15
v15986×336 34.5 KB

If I change nothing else, just swap it to v14 (pnpm remove handsontable @handsontable/vue3 && pnpm i handsontable@14 @handsontable/vue3@14), the same table will stretch and fill full browser width. (see uploaded v14.png screenshot below)

14
14992×332 34.5 KB

What am I missing here? Can someone please let me know how I can get the columns to stretch with v15.

2

Hi @vincent1

It seems that you didn’t load the styles properly. In v. 15.0 we introduced the theming system and since that point you have to additionally define theme that you want to use. Here you can find more information about it:

And here’s the example with the latest version and stretching working correctly: https://stackblitz.com/edit/opbvsp5b-7flsnncy?file=src%2FExampleComponent.js

3

EDIT: Ok for “stretchH: ‘all’” to work, registerAllModules() has to be run with v15 (not necessary in previous versions), has nothing to do with theming.

The code below works:

<template>
  <hot-table
    :settings="{
      data: [
        ['2021', 10, 11, 12, 13],
        ['2022', 20, 11, 14, 13],
        ['2023', 30, 15, 12, 13],
        ['2024', 40, 15, 12, 13],
      ],
      stretchH: 'all',
    }"
  />
</template>

<script setup>
import 'handsontable/dist/handsontable.full.css';
import { HotTable } from '@handsontable/vue3'
import { registerAllModules } from 'handsontable/registry';

registerAllModules();
</script>

Thanks @adrian.szymanski that makes sense. For my project I need to apply styling provided by our design team - in that case, I really don’t need the theming from Handsontable - I just need stretchH works the as way as in previous Handsontable versions.

Anyway I tried to implement theming and updated my code to be like below:

<template>
  <hot-table
    ref="table"
    :settings="{
      data: [
        ['2021', 10, 11, 12, 13],
        ['2022', 20, 11, 14, 13],
        ['2023', 30, 15, 12, 13],
        ['2024', 40, 15, 12, 13],
      ],
      stretchH: 'all',
    }"
  />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
import 'handsontable/styles/ht-theme-horizon.css';
import { HotTable } from '@handsontable/vue3'

const table = ref(null);

onMounted(() => {
  table.value.hotInstance.useTheme('ht-theme-horizon');
  table.value.hotInstance.render();
});
</script>

I can see the theming being applied, but the table still doesn’t fill the width. See screenshot below:

v15-theme
v15-theme994×684 55.2 KB

4

@vincent1

Ok, can you please modify my StackBlitz example to match your implementation? It will be easier to debug the issue this way.

5

Hi @adrian.szymanski I figured out what the problem is, it’s registerAllModules.

For “stretchH: ‘all’” to work, registerAllModules() has to be run with v15 (not necessary in previous versions), has nothing to do with theming. (see the EDIT section in my previous reply for working code).

Do you happen to know which module is actually needed for this to work (so I don’t have to register all modules)

6

@vincent1

Thank you for the update. Yes, this method is required to be able to use the plugins. In this case you would need to register the StretchColumns module. You can find the whole list of the modules here: https://handsontable.com/docs/javascript-data-grid/modules/#plugin-modules

7

Thanks @adrian.szymanski