jspreadsheet / jspreadsheet/ce
wordWrap doesn't work and make text edition in cell converted to “undefined”
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 7.2k
- Forks
- 890
- PR merge metrics
- No merged PRs in 30d
Description
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 :

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with the supplied jspreadsheet configuration using wordWrap, setWidth, and the referenced v4 jexcel.js entry point. Trace the word-wrap editing and directional-key behavior; done means edited cells retain their values instead of becoming “undefined” and keyboard navigation remains functional.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100