How to define Handsontable cell type width

Tags: #<Tag:0x00007efc657012d8>

Hi, I am currently making a Handsontable with a Handsontable in it, as described here:

https://handsontable.com/docs/handsontable-cell-type

I would like to make the opening Handsontable a certain width (40rem) but what I tried did not work:

new Handsontable(container, {
    rowHeaders: true,
    colHeaders: tableColHeaders,
    width: '100%',
    stretchH: 'all',
    manualColumnResize: true,
    preventOverflow: 'horizontal',
    language: frFR.languageCode,
    columns: [
        {
            type: 'date',
            width: 120,
            data: 'date',
        },
        {
            data: 'course.name',
            type: 'handsontable',
            handsontable: {
                width: '40rem',
                manualColumnResize: false,
                colHeaders: ['Cours', 'Matière', 'course_id', 'matiere_id'],
                data: courses,
                getValue() {
                    const selection = this.getSelectedLast();

                    // Get the first column of the clicked row and ignore header coordinates (negative values)
                    return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
                },
            },
        },
        {
            data: 'room.name',
        },
    ],
});

image

Is it something possible in the first place? If so, how can I achieve it?

Hi @LucileDT

Indeed, it looks like width option isn’t working with HOT in HOT as it should, I need to investigate that case further. However, what is working and might be some kind of solution for you is setting up colWidths to desired value like here:

https://jsfiddle.net/ek7nps0y/

1 Like

Thanks for the workaround!

@adrian.szymanski I also noticed errors in my console when hovering the nested Handsontable header, do you want me to open a bug report?

Yes, sure :slight_smile: