Having issues moving from version 14 to version 16

I am trying to upgrade from version 14 to 16.

The handsontable code is pulled using npm and the node_modules directory is uploaded to my internal website.

npm list
editor@ /Users/ebruno/Documents/Udemy/demoengine/editor
├── @handsontable/react-wrapper@16.1.1
├── @xterm/xterm@5.5.0
├── fund@1.0.0
├── handsontable@16.1.1
├── node-ansiparser@2.2.1
└── xterm@5.3.0

Everything was working with version 14.

With 16 the table initializes but I see no rows/columns/headers …etc.
I looked at the examples for v16.

My IDE is bootstrap studio 7.1.2

Below is the index file and javascript used to create the table.
Any suggestions would be appreciated.

I am not seeing any errors in the javascript console. Same issue on Safari, Chrome, Firefox on MacOS 26 M4 macmini. Same issue on Fedora 43 Chrome and Firefox. Intel based system.

DemoEditor

Load

Save

RunCancel RunCompute Run DurationSave as Current FileSave as New File

Current Elapsed Time (H:MM:SS.S):00:00:00.00Ignore first delay

Next command in (H:MM:SS.S):00:00:00.00

0

Will update cell: 030

Progress

0%

TerminalHide

var column_headers = [
  ['stepid', 'close', 'bookmark' ,'cmd', 'delay_after', 'delay_before', 'failure', 'failure_code', 'on_failure_step', 'on_success_step', 'output', 'replay_delay','runcmd_in_replay' ,'send', 'send_display', 'send_display_text', 'send_prompt', 'actual_prompt','send_actual_prompt','shell', 'shell_switches', 'success', 'success_code', 'timeout','transaction','use_shell', 'waitfor']
];

var container = document.getElementById('spreadsheet');
var prevKey;
var editor_sheet = new Handsontable(container, {
  rowHeaders: true,
  colHeaders: column_headers,
  filters: true,
  dropdownMenu: true,
  contextMenu: true,
  manualColumnMove: true,
  manualRowMove: true,
  manualColumnResize: true,
  manualRowResize: true,
  manualColumnFreeze: true,
  hiddenColumns: {columns: [],indicators: true },
  width: '100%',
  height: 500,
  afterChange: cell_changed,
  beforeChange: cell_beforechange,
  afterSelection: row_selected,
  afterDocumentKeyDown: clean_cells,
  fixedRowsTop: 1,
  themeName: 'ht-theme-main-dark-auto',
  licenseKey: 'non-commercial-and-evaluation'
});

editor_sheet.addHook('afterOnCellMouseDown', function(ev) {
      var selected = editor_sheet.getSelected();
      if (selected != null) {
        var item = selected[0];
        header_row = editor_sheet.getDataAtRow(0);
        output_idx = header_row.indexOf('output');
        if ((item[1] == output_idx) && (item[3] == output_idx)) {
            var row = Math.min(item[0], item[2]);
            editor_sheet.setCellMeta(row, output_idx, 'className', 'htWrap');
            editor_sheet.render();
        };
      };
});

editor_sheet.addHook('afterOnCellMouseOut', function(ev) {
      var selected = editor_sheet.getSelected();
      if (selected != null) {
        var item = selected[0];
        header_row = editor_sheet.getDataAtRow(0);
        output_idx = header_row.indexOf('output');          
        if ((item[1] == output_idx) && (item[3] == output_idx))  {
            var row = Math.min(item[0], item[2]);
            editor_sheet.setCellMeta(row, output_idx, 'className', 'htNoWrap');
            editor_sheet.render();
        };
      };
});

Doing some more testing if I load default data in to the sheet/table I can access the data via the api. Calling render() does not make a difference in visibility. countCols and countRows are correct.

I have tried both ht-theme-main and ht-theme-classic, light and dark modes.

Since the table exists. I am wondering if the default bootstrap css’s are causing an issue.

I am not defining any custom css in the project.

The problem was with the bootstop class settings

The divider settings had the d-flex option set in the class as well as flex-grow-1 flex-shrink1 flex-fill

In Bootstrap, d-flex is a utility class used to establish a flexbox container. Applying this class to an element changes its display property to flex, making its direct children flex items. This enables the use of Bootstrap’s comprehensive set of flexbox utilities for controlling layout, alignment, and spacing.

I removed the d-flex from the class and it now works.
Since the other items only work if the item is a flex container they are also not needed.

Did you get any proper solution?, I am also facing the same Official Site issue.

Hi @eric

So, is the problem now gone?

Yes everything is now working after removing the flex attributes.

@eric

That’s great to hear. I’m closing this topic in this case.