Get row.name of R Shiny tableOutput on hover

790 views
Skip to first unread message

Jason Cohen

unread,
Oct 13, 2013, 12:04:50 PM10/13/13
to shiny-...@googlegroups.com

I would like to build a reactive input for R shiny that returns the row.name of a table row on hover.

In R Shiny, the table is made with renderTable and output through tableOutput.

This should work similar to the already built clickID and hoverID for plotOutput (for click & hover respectively).

I don't quite understand the JavaScript or jQuery well enough yet to follow these instructions and build it myself:

http://rstudio.github.io/shiny/tutorial/#building-inputs

Thank you!


****

This is cross-posted with SO here: http://stackoverflow.com/questions/19341706/get-row-name-of-r-shiny-tableoutput-on-hover 

Feel free to answer here over at SO; wherever you'd prefer the good Karma! 



ZJ

unread,
Oct 13, 2013, 9:53:12 PM10/13/13
to shiny-...@googlegroups.com

Jason Cohen

unread,
Oct 14, 2013, 1:44:21 PM10/14/13
to shiny-...@googlegroups.com
This is what I have so far:

$(document).on('hover', '.table-hover tr', function(){
        var el = $(this);
        $(this).closest("tr").index();
});   

var selectRowBinding = new Shiny.InputBinding();
$.extend(selectRowBinding, {
        find: function(scope) {
        return $(scope).find(".table-hover");
        },
        getValue: function(el){
        return $(el).closest("tr").index();
        },
        setValue: function(el, value) {
        },
        subscribe: function(el, callback) {
        $(el).on("change.selectRowBinding", function(e) {
        callback();
        });
        },
        unsubscribe: function(el) {
        $(el).off(".selectRowBinding");
        }
});
Shiny.inputBindings.register(selectRowBinding);

But input$selectRowBinding is still returning NULL;

I've been working off of ZJ's link and this SO post:
http://stackoverflow.com/questions/17263627/shiny-r-application-that-allows-users-to-modify-data

Thanks! 

- Jason

Kirill Savin

unread,
Oct 14, 2013, 9:20:20 PM10/14/13
to shiny-...@googlegroups.com
I can see that you are not triggering "change" event here, that's why you never reach getValue and your reactive stays null.

$(document).on('hover', '.table-hover tr', function(){
        var el = $(this);
        $(this).closest("tr").index();
}); 
  
I cannot check whether everything else is okay without seeing the page.

The example would work on hover instead of a click if you simply change the block in responsiveTable.js to
$(document).on('hover', '.selRow tbody tr', function(){
    var el = $(this);
    $(this).siblings().removeClass("cellsSelected");
    $(this).addClass("cellsSelected", this.clicked);
    el.trigger("change");
});

Jason Cohen

unread,
Oct 14, 2013, 10:17:42 PM10/14/13
to shiny-...@googlegroups.com
I'm just printing the value of input$selectRowBinding right now to see if it works (it doesn't);

In the example, he constructs the table himself,
and renders it using HTML(id=..., class=...),

but I am using Shiny's tableOutput to create the table...

I added el.trigger("change"); but still no luck!

- Jason

Kirill Savin

unread,
Oct 14, 2013, 10:56:29 PM10/14/13
to shiny-...@googlegroups.com
In the example, he constructs the table himself,
What's so bad about it? :-)

As far as I know, you can't pass a table class to renderTable, so what is .table-hover then?
renderTable generates the following structure:
<div id="myTableID" class="shiny-html-output shiny-bound-output">
  <table class="data table table-bordered table-condensed">
    <tbody>
      <tr>
       ...
      <tr>
    </tbody>
  </table>
</div>

I suppose you can try and select the table by ID like '#myTableID table tbody tr'

Jason Cohen

unread,
Oct 14, 2013, 11:13:03 PM10/14/13
to shiny-...@googlegroups.com
I got part of it working with your suggestion to change all of the 'click'  and .clicked to 'hover' and .hover -
it now changes the class to cellsSelected in whichever tr I hover over.

That's a small improvement!

I have it recognizing the Bootstrap class 'table-hover' I assign in the renderUI(div(class="table table-hover", tableOutput("Consumer_Trending_Products"))),
But I still don't get anything but null from input$selectRowBinding  or input$selectCellBinding

In the example code, he actually retrieves the values from his own id,
making the reactive input something like input$idoftablehere

How does he do that?
That input isn't the input registered with shiny?

Thanks!

- Jason

Kirill Savin

unread,
Oct 15, 2013, 1:31:40 AM10/15/13
to shiny-...@googlegroups.com
Please, attach an archive with your project or post a Git.
Reply all
Reply to author
Forward
0 new messages