jrowen / rhandsontable

A htmlwidgets implementation of Handsontable.js
http://jrowen.github.io/rhandsontable/
Other
385 stars 148 forks source link

`Download to CSV` function does not work if empty table values #434

Open nick-youngblut opened 11 months ago

nick-youngblut commented 11 months ago

From the Customizing section of the docs:

customOpts = list(
      csv = list(
        name = "Download to CSV",
        callback = htmlwidgets::JS(
          "function (key, options) {
            var csv = csvString(this, sep=',', dec='.');

            var link = document.createElement('a');
            link.setAttribute('href', 'data:text/plain;charset=utf-8,' +
              encodeURIComponent(csv));
            link.setAttribute('download', 'data.csv');

            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }"
        )
      )
    )

This code does not work if any of the values in the rendered table are empty. The "Download to CSV" option is present in the menu, but clicking on it does nothing. If the user then completely fills all cells in the table with non-empty values, then the user can download the table as a csv.

This repo has not been updated in 2 years, so the docs likely won't be updated, but maybe a user has a suggestion on how to make the "Download to CSV" option more flexible?

nick-youngblut commented 11 months ago

Maybe the issue is how empty table values are handled in the csvString function:

function csvString(instance, sep, dec) {

  var headers = instance.getColHeader();

  var csv = headers.join(sep) + "\n";

  for (var i = 0; i < instance.countRows(); i++) {
      var row = [];
      for (var h in headers) {
          var col = instance.propToCol(h);
          var value = instance.getDataAtRowProp(i, col);
          if ( !isNaN(value) ) {
            value = value.toString().replace(".", dec);
          }
          row.push(value);
      }

      csv += row.join(sep);
      csv += "\n";
  }

  return csv;
}
nick-youngblut commented 11 months ago

A simple reprex:

MAT = as.data.frame(matrix(rnorm(50), nrow = 10, dimnames = list(LETTERS[1:10],
                                                   letters[1:5])))
MAT$f = NA  

rhandsontable(MAT, width = 550, height = 300) %>%
  hot_context_menu(
    customOpts = list(
      csv = list(name = "Download to CSV",
                 callback = htmlwidgets::JS(
                   "function (key, options) {
                         var csv = csvString(this, sep=',', dec='.');

                         var link = document.createElement('a');
                         link.setAttribute('href', 'data:text/plain;charset=utf-8,' +
                           encodeURIComponent(csv));
                         link.setAttribute('download', 'data.csv');

                         document.body.appendChild(link);
                         link.click();
                         document.body.removeChild(link);
                       }"))))

The reprex is the same code as Export to CSV in the docs, but includes a column that contains all NA values.

nick-youngblut commented 4 months ago

@jrowen & @DillonHammill I would work on fixing this issue, but I don't want my PR to just sit in the queue forever.

Would you accept a PR, or is this repo essential a public archive?

nick-youngblut commented 4 months ago

I forked the repo, and the fix is really just one line:

function csvString(instance, sep, dec) {

  var headers = instance.getColHeader();

  var csv = headers.join(sep) + "\n";

  for (var i = 0; i < instance.countRows(); i++) {
      var row = [];
      for (var h in headers) {
          var col = instance.propToCol(h);
          var value = instance.getDataAtRowProp(i, col);
          if (value == null) value = "";  // Handle null or undefined values  // handle
          if ( !isNaN(value) ) {
            value = value.toString().replace(".", dec);
          }
          row.push(value);
      }

      csv += row.join(sep);
      csv += "\n";
  }

  return csv;
}

Specifically: if (value == null) value = "";