jspreadsheet / jspreadsheet/ce

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

Open
#1,562 0 comments 0 reactions 0 assignees View on GitHub

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 :
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.