Nested Headers works only with Handsontable.helper.createSpreadsheetData

Tags: #<Tag:0x00007efc71a6ef40>
#1

Hello

currently I am using handsontable without license.
My project is Next.js.

const hotData = [
    ["Tesla", "2017", "black", "1", "a"],
    ["Nissan", "2018", "blue", "2", "b"],
    ["Chrysler", "2019", "yellow", "3", "c"],
    ["Volvo", "2020", "white", "4", "d"],
];

const DataTable = () => {
    const hotSettings = {
        data: hotData,
        colHeaders: true,
        nestedHeaders: [[{ label: "B", colspan: 5 }], ["N", "O", "P", "Q", "R"]],
        licenseKey: "non-commercial-and-evaluation",
    };
    return (
        <>
            <HotTable id="hot" settings={hotSettings} />
        </>
    );
};

the result like the following. so nested header didn’t work

image

when I used data: Handsontable.helper.createSpreadsheetData(4, 5) instead of data: hotData,
nested header worked like the following.

image

I am not clear why nested header is not working with custom data.

also I have found one thing.
when I used data: Handsontable.helper.createSpreadsheetData(4, 5), it seems that displaying Table took delay.
maybe this delay is problem?

Regards

#2

Hi @forevereffort

We don’t have official support for Next.js, but I recreated your issue in plain JS and it seems to be working just fine with custom data: http://jsfiddle.net/aszymanski/xsovwmqy/3/

The principals are the same, you just binding the data in configuration object so problem must lie somewhere else.

#3