Formatting dataView

[oobd]

I'd like the output of dataView to be more table like

In echarts, I could use something like below in the optionToContent option of dataView but how can I use below in dataView of echarts4r?

var optionToContent = function(opt) {
  var axisData = opt.xAxis[0].data;
  var series = opt.series;
  var numSeries = series.length;

  var table = '<table style="width:100%;border-collapse: collapse;">'
    + '<thead>'
    + '<tr>';

  // Generate header row
  table += '<th style="border: 1px solid #dddddd; padding: 8px;user-select: text;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;">Time</th>';
  for (var j = 0; j < numSeries; j++) {
    table += '<th style="border: 1px solid #dddddd; padding: 8px;user-select: text;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;">' + series[j].name + '</th>';
  }
  table += '</tr>'
    + '</thead>'
    + '<tbody>';

  // Generate data rows
  for (var i = 0, l = axisData.length; i < l; i++) {
    table += '<tr>';
    table += '<td style="border: 1px solid #dddddd; padding: 8px;user-select: text;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;">' + axisData[i] + '</td>';
    for (var j = 0; j < numSeries; j++) {
      table += '<td style="border: 1px solid #dddddd; padding: 8px;user-select: text;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;">' + series[j].data[i] + '</td>';
    }
    table += '</tr>';
  }

  table += '</tbody></table>';

  // Convert the HTML table to a string and return
  return table;
};

[oobd]

Figured it out

library(tidyverse)
library(echarts4r)
library(htmlwidgets)

mtcars |>
  e_charts(wt) |>
  e_line(mpg) |>
  e_tooltip('axis')  %>% 
  e_toolbox() |>
  e_toolbox_feature(
    feature = "dataView",
    optionToContent  = htmlwidgets::JS("
  function(opt) {
    // Extract relevant data from opt
    var seriesData = opt.series[0].data;

    // Construct the HTML table
    var table = '<table style=\"width:100%;text-align:center;border-collapse: collapse;\">'
                 + '<thead><tr>'
                 + '<th style=\"border: 1px solid #dddddd; padding: 8px; user-select: text;\">X-Axis</th>'
                 + '<th style=\"border: 1px solid #dddddd; padding: 8px; user-select: text;\">Y-Axis</th>'
                 + '</tr></thead>'
                 + '<tbody>';

    // Add data rows
    for (var i = 0; i < seriesData.length; i++) {
        var xValue = seriesData[i].value[0];
        var yValue = seriesData[i].value[1];

        // Apply alternating row color
        var rowStyle = i % 2 === 0 ? 'background-color: #f2f2f2;' : '';

        table += '<tr style=\"' + rowStyle + '\">'
                 + '<td style=\"border: 1px solid #dddddd; padding: 8px; user-select: text; text-align: right;\">' + xValue + '</td>'
                 + '<td style=\"border: 1px solid #dddddd; padding: 8px; user-select: text; text-align: right;\">' + yValue + '</td>'
                 + '</tr>';
    }

    table += '</tbody></table>';
    return table;
  }
"))

[rdatasculptor]

Nice! Thank you for your post. Inspiring