Merge 2 columns by merging cells row by row

Tags: #<Tag:0x00007efc65631b50>
#1

I am using wraper for Vue and actually new to Vue. I was able to add mergeCells option to Context Menu but what I actually need is to merge columns row by row. Is it possible to do that with Handsontable?
Below is my code on Vue.

<template>
   <div id="hot-preview">
     <HotTable ref="table" :root="root" :settings="settings"></HotTable>
   </div>
</template>

<script>
  import HotTable from 'vue-handsontable-official';
  import Handsontable from 'handsontable';

 export default {
    data: function() {
      return {
        settings: {
            data: Handsontable.helper.createSpreadsheetData(5, 5),
            colHeaders: true,
            contextMenu:{
                items: {
                    "mergeCells": {},
                    "undo": {},
                    "redo": {},
                }
            },
            mergeCells: true,
            licenseKey: "non-commercial-and-evaluation"
        }
      };
    },
    components: {
      HotTable
    },
 }
</script>

Thank you in advance!

#2

Hey @n_hai_yen

you can merge cells vertically and horizontally. To merge cells you need to pass the object of coordinates

{row: 1, col: 1, rowspan: 3, colspan: 3}

rowspan = 1 means you do not merge rows
colspan = 1 means you do not merge columns
those two values cannot return 0.

Example
If you want to merge all cells in the row vertically and you have 10 columns, the object should look like this

 mergeCells: [
        {row: 0, col: 0, rowspan: 1, colspan: 10}
]

and here is the use case in JSFiddle http://jsfiddle.net/handsoncode/z15ncyrd/

1 Like
#3

Thank you for the fast response. However that is actually not what I meant. I mean to merge the whole column to another column but still keep rows of each column. For better understanding, please take a look at the image below.
27

#4

Merging in Handsontable merge physical areas - not values.
It is possible to do but requires custom logic.

#5