R/interactiveTable.R
interactiveTable.RdThis function wraps the htmlTable and adds JavaScript code for toggling the amount of text shown in any particular cell.
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, ...)The table to be printed
The exact same parameters as htmlTable() uses
The maximum length of a text
Indicator if the cell should be clickable or if a button should appear with a plus/minus
Notifies if any particular columns should be collapsed from start
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 it's own
<scrip></script> element.
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).
An htmlTable with a javascript attribute containing the code that is then printed
library(magrittr)
# 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)
cbind(rep(short_txt, 2),
rep(long_txt, 2)) %>%
addHtmlTableStyle(col.rgroup = c("#FFF", "#EEF")) %>%
interactiveTable(minimized.columns = ncol(.),
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>