An interactive table that allows you to limit the size of boxes

This function wraps the htmlTable and adds JavaScript code for toggling the amount of text shown in any particular cell.

Usage

interactiveTable(
  x,
  ...,
  txt.maxlen = 20,
  button = getOption("htmlTable.interactiveTable.button", default = FALSE),
  minimized.columns = NULL,
  js.scripts = c()
)

# S3 method for class 'htmlTable'
interactiveTable(
  x,
  ...,
  txt.maxlen = 20,
  button = getOption("htmlTable.interactiveTable.button", default = FALSE),
  minimized.columns = NULL,
  js.scripts = c()
)

# S3 method for class 'interactiveTable'
knit_print(x, ...)

# S3 method for class 'interactiveTable'
print(x, useViewer, ...)

Arguments

x: The table to be printed
...: The exact same parameters as htmlTable() uses
txt.maxlen: The maximum length of a text
button: Indicator if the cell should be clickable or if a button should appear with a plus/minus
minimized.columns: Notifies if any particular columns should be collapsed from start
js.scripts: If you want to add your own JavaScript code you can just add it here. All code is merged into one string where each section is wrapped in its own <script></script> element.
useViewer: If you are using RStudio there is a viewer thar can render the table within that is envoced if in base::interactive() mode. Set this to FALSE if you want to remove that functionality. You can also force the function to call a specific viewer by setting this to a viewer function, e.g. useViewer = utils::browseURL if you want to override the default RStudio viewer. Another option that does the same is to set the options(viewer=utils::browseURL) and it will default to that particular viewer (this is how RStudio decides on a viewer). Note: If you want to force all output to go through the base::cat() the set [options][base::options](htmlTable.cat = TRUE).

Value

An htmlTable with a javascript attribute containing the code that is then printed

Examples

# A simple output
long_txt <- "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum"
short_txt <- gsub("(^[^.]+).*", "\\1", long_txt)
tbl_input <- cbind(rep(short_txt, 2), rep(long_txt, 2))

tbl_input |>
  addHtmlTableStyle(col.rgroup = c("#FFF", "#EEF")) |>
  interactiveTable(
    minimized.columns = ncol(tbl_input),
    header = c("Short", "Long"),
    rnames = c("First", "Second")
  )
#> <table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
#> <thead>
#> <tr><th style='border-bottom: 1px solid grey; border-top: 2px solid grey;'></th>
#> <th style='font-weight: 900; border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>Short</th>
#> <th style='font-weight: 900; border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>Long</th>
#> </tr>
#> </thead>
#> <tbody>
#> <tr style='background-color: #ffffff;'>
#> <td style='background-color: #ffffff; text-align: left;'>First</td>
#> <td style='background-color: #ffffff; text-align: center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
#> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
#> <td style='background-color: #ffffff; text-align: center;'>Lorem ipsum dolor si...  <span class='hidden' style='display: none'>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
#> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
#> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
#> ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
#> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
#> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
#> mollit anim id est laborum</span></td>
#> </tr>
#> <tr style='background-color: #eeeeff;'>
#> <td style='background-color: #eeeeff; border-bottom: 2px solid grey; text-align: left;'>Second</td>
#> <td style='background-color: #eeeeff; border-bottom: 2px solid grey; text-align: center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
#> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
#> <td style='background-color: #eeeeff; border-bottom: 2px solid grey; text-align: center;'>Lorem ipsum dolor si...  <span class='hidden' style='display: none'>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
#> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
#> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
#> ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
#> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
#> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
#> mollit anim id est laborum</span></td>
#> </tr>
#> </tbody>
#> </table><script type = "text/javascript" language = "javascript"> $(document).ready(function(){
#>   $(".gmisc_table td .hidden").map(function(index, el){
#>      el.parentNode.style["original-color"] = el.parentNode.style["background-color"];
#>      el.parentNode.style["background-color"] = "#DDD";
#>   });
#> 
#>   getSelected = function(){
#>     var t = '';
#>     if(window.getSelection){
#>       t = window.getSelection();
#>     }else if(document.getSelection){
#>       t = document.getSelection();
#>     }else if(document.selection){
#>       t = document.selection.createRange().text;
#>     }
#>     return t.toString();
#>   };
#> 
#>   $(".gmisc_table td").map(function(index, el){
#>     this.style.cursor = "pointer";
#>     el.onmouseup =  function(e){
#>       if (getSelected().length > 0)
#>         return;
#> 
#>       var hidden = this.getElementsByClassName("hidden");
#>       if (hidden.length > 0){
#>         this.innerHTML = hidden[0].textContent;
#>         this.style["background-color"] = this.style["original-color"];
#> 
#>       }else{
#>         $(this).append("<span class='hidden' style='display: none'>" +
#>                        this.innerHTML + "</span>");
#> 
#>         this.childNodes[0].data = this.childNodes[0].data.substr(0, 20) + "... ";
#>         this.style["original-color"] = this.style["background-color"];
#>         this.style["background-color"] = "#DDD";
#>       }
#>     };
#>   });
#> });
#>  </script>