I have created a simple Spreadsheet with HandsOnTable. Followed doc and tried to manualResizeCol and add contextMenu but it is not working. sample attached.

And also why am I getting below mentioned warning when using <HotTable /> component.

Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code.

Code Sandbox HandsOnTable

<HotTable
    width="100%"
    height="auto"
    data={d}
    ref={(el) => (hotRef.current[index] = el!)}
    stretchH="all"
    rowHeaders={true}
    colHeaders={true}
    minSpareCols={36}
    maxCols={40}
    manualColumnResize={true}
    cells={(row: number) => {
      if (row === 0) {
       return {
         readOnly: true,
         className: "header-cell"
         };
      } else return { readOnly: false };
     }}
    contextMenu={["remove_col", "remove_row"]}
    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
 />

CodePudding user response：

This issue is related to React 18 and CodeSandbox. We are noticing that, in this case, plugins don't work. If you try the same code in a different sandbox or locally with the same configuration it will work fine.

You need to add this to your main app file:

import { registerAllModules } from 'handsontable/registry'; 

registerAllModules();