wordWrap doesn't work and make text edition in cell converted to “undefined”

[Tuisto59]

I use a flask application for the back-end and a template for the HTML pages. I send data into the template directly from my flask endpoint. So the data for the “data” and the info for the “columns” are like :

<div class="overflow-auto mt-3" id="header">
    {{ table_header|safe }}  <--- jinja templating (python flask)
</div>
<div class="overflow-auto mb-5" id="excel_table" style="max-height:500px">
    <div id="demo1"></div>
</div>

    var width_details = [];
    $('#table_header_model > tbody > tr:last > td').each(function(){
      width_details.push($(this).width() + 2);
    });

    var myTable = jspreadsheet(document.getElementById('demo1'), {
        data: [['', '', 'A-1', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
               ['', '', 'A-2', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
              ],
        columns: [{type:'text'},
                 {type:'text'},
                 ],
        wordWrap:true,
    });

    // set each column width
    for (let i = 0; i < width_details.length; i++) {
        myTable.setWidth(i, width_details[i]);
    }

    myTable.hideIndex();
    jexcel.current.thead.style.display = 'none';

I use a table with the ID “table_header_model” to set up the width for the jspreadsheet table accordingly to the width of the last row of my HTML table. This table is formatted with bootstrap (last version 5.2). I add also a handler to resize automatically when browser resizes the page, so resize the HTML table, like that all columns are aligned.

The fact is when I use the wordWrap:true in column or at the initialization – when I use the generated table to wrote text, it's get changed and show “undefined” at the place. I also lose control when using the directional key.

If I remove any presence of the wordWrap, everything is fine.

I actually use :

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />

Thank you for your help !

screenshot :