Connecting tabs using R Shiny applications

[Query]

library(shiny)

server <- function(input, output) {
  output$iris_type <- renderDataTable({
    data.frame(Species=paste0("<a href='#filtered_data'>", unique(iris$Species), "</a>"))
  })
  output$filtered_data <- renderDataTable({iris})
}

ui <- shinyUI(fluidPage(
  mainPanel(
    tabsetPanel(
      tabPanel("Iris Type", dataTableOutput("iris_type")),
      tabPanel("Filtered Data", dataTableOutput("filtered_data"))
    )
  )
))

shinyApp(ui = ui, server = server)

[Inquiry]

I am attempting to create a connection between the first tab's DataTable output and the second tab. For instance, upon clicking on setosa, the second tab should display the iris dataset only containing setosa. This action should execute the following R command: iris[iris$Species=="setosa",]. The functionality should extend to other Species in the iris dataset as well.

How can I establish this link and trigger the execution of that R command with a click event?


[Recent Answer Update]

If you have a distinct layout and require specific steps, consider the following approach:

  1. Your DataTable callback function:

    callback =
    "function(table) {
       table.on('click.dt', 'tr', function() {
         Shiny.onInputChange('rows', table.row(this).data()[0] );
         $(\".tabbable .nav.nav-tabs li a:contains('Filtered Data')\").click();
       });
     }"
    
  2. Your R code:

    output$filtered_data <- renderDataTable({
      tagString <- input$rows
      rawTags <- gsub("</a>", "", gsub("<a href='#filtered_data'>", "", tagString))
    
      if (identical(tagString, character(0))) {
        iris
      } else {
        ...
      }
    })
    

Answer №1

To simplify the process, consider implementing the click function on the first table row. This way, you can create a callback that detects clicks on the table rows. Once a click is registered, the row index is transmitted to a reactive input in Shiny:

library(shiny)

server <- function(input, output) {
  output$iris_type <- renderDataTable({
    data.frame(Species=paste0("<a href='#filtered_data'>", unique(iris$Species), "</a>"))
  },
  callback = "function(table) {
    table.on('click.dt', 'tr', function() {
      Shiny.onInputChange('rows', table.row( this ).index());
      tabs = $('.tabbable .nav.nav-tabs li a');
      $(tabs[1]).click();
    });
}")
  output$filtered_data <- renderDataTable({
    if(is.null(input$rows)){
      iris
    }else{
      iris[iris$Species %in% unique(iris$Species)[as.integer(input$rows)+1], ]
    }
  })
}

ui <- shinyUI(fluidPage(
  mainPanel(
    tabsetPanel(
      tabPanel("Iris Type", dataTableOutput("iris_type")),
      tabPanel("Filtered Data", dataTableOutput("filtered_data"))
    )
  )
))

shinyApp(ui = ui, server = server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

javascript: update hidden field if date is past January 15th

Having a bit of trouble with this one after a full day! The form contains a hidden field called 'grant_cycle'. If the form is submitted after January 15th, it should have the value 'Spring, [year]', or if after July 15th, it should be ...

Combining Multiple Arrays into a Single Array

Is there a way to combine this merge operation that creates one array using forEach into a single array at the end? affProd.pipe(mergeMap( event1 => { return fireProd.pipe( map(event2 => { const fi ...

How come the GET request on my JSON file is not updating with each new render?

Currently, I am making a request to retrieve data from a JSON file stored on an Azure blob. Below is the code snippet for retrieving the data: const getDatas = () => { axios .get('https://randomname.blob.core.windows.net/public/data_home_ ...

Click to switch CodeMirror's theme

http://jsbin.com/EzaKuXE/1/edit I've been attempting to switch the theme from default to cobalt and vice versa, toggling each time the button is clicked. However, I am facing an issue where it only switches to the new theme once and doesn't togg ...

The static files are being received by Django but are not functioning properly

I've been working on a project using django 1.7, and below is my settings.py configuration: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "assets"), ) STATIC_ROOT = "absolute/path/to/static" In the 'assets&apo ...

Design a circular progress bar with a cut-off at the bottom

Does anyone have suggestions on how to create a circular progress bar with cropping at the bottom, similar to this example: PROGRESS BAR? I've been searching for a component like this but haven't had any luck. Any ideas, especially utilizing Mate ...

Filtering an object using data in AngularJS

My current data object structure looks like this : $scope.data = [ { "name": "1001", "queue": [ { "number": "111", } ] }, { "name": "1002", "queue": [ ] ...

There seems to be an issue with the fetch HTTP PATCH request when using the /:id suffix. However, the DELETE

I am facing an issue with correctly fetching the http with the trip._id suffix. The DELETE method works perfectly fine. However, when I attempt to use PATCH, I encounter an error stating "http://localhost:4000/api/tracks/undefined 404 (Not Found)". Strange ...

What is the best way to create a user password using R programming?

Looking to create a password generator for R users. Previously used Excel with VB-Script. How can I replicate this functionality in R? Thank you! myArr = Array("", 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", _ "C", "D", "E", "F", "G", "H", "J", "K", "L" ...

Sharing data in JavaScript functions

In order to use certain variables in two separate functions, there are some considerations to keep in mind. The first function is responsible for calculating and displaying a conjugated verb using these variables. The second function checks the user's ...

Hover over the pop-up menu

Struggling with adding mouseover effect to a website created using basic html and css (not html5). Looking to display text with background image when user hovers over a link. Here is an example... REGULAR: ON HOVER: I'm not sure if it's achiev ...

Updating the status of a work item using the PATCH method in the DevOps REST API is currently not working

Currently, I am utilizing the DevOps restapi to retrieve certain information. The POST method is functioning perfectly for me. However, when attempting to update the status of my work item using the PATCH method, it does not seem to be working and no er ...

Problem resolved: Assign the nearest *multiple of ten* to a number if it surpasses the last *multiple of ten*

Consider this scenario: You have a number, let's say 12.5, and you want to round it up to the next multiple of ten (20). Or if you have a number between 20 and 30, it should be rounded up to 30. How can this be achieved using JavaScript? I have ...

Pass a JavaScript array variable to a PHP script utilizing jQuery Ajax and receive a string output instead of an array

Whenever I attempt to transmit a JavaScript array to a PHP script via Ajax, the output of $_POST['file_paths'] when var_dumped shows up as a string instead of an array. My goal is to have the output in array format rather than in string format. C ...

What is the most effective way to compare a property with the values stored in an array of objects?

d : {"children":[{"name":"China","children":[{"name":"China","value":400,"percentage":"33.33"}],"index":0},{"name":"England","children":[{"name":"England","value":300,"percentage":"33.33"}],"index":1},{"name":"Malaysia","children":[{"name":"Malaysia","val ...

Transformation effect when hovering over an SVG polygon as it transitions between two states

const createTransitionEffect = (navLI, startCoord, endCoord) => { const changeRate = 0.1; let currentY = startCoord; const animateChange = () => { if (currentY !== endCoord) { currentY += (endCoord - startCoord) * cha ...

Nodejs asynchronous tasks are not functioning correctly with SetInterval

I'm a newcomer to the world of Node.js. I've set up a simple asynchronous task that needs to run every 10 minutes. The setInterval function should trigger at regular intervals as specified, updating the value for the variable api key. I can' ...

The formValidation, previously known as BootstrapValidator, is causing issues with my form submission via Ajax, despite my efforts to update the code to work with

I recently upgraded the old BootstrapValidator to the new 0.6.0 release known as formValidation. Despite reading the documentation multiple times, I have been unsuccessful in finding the issue and need some assistance. Below are the CSS styles and scripts ...

Tips for retrieving a unique key from a JSON object response

Display the object_id for each object(response) in the provided dataset. This is the response obtained from an API. Any suggestions or solutions are greatly appreciated. response:{"object_id":"a9951ef0","datetime":"2019-03-20T04:59:23.001Z","ignition_s ...

What is the best approach to filter data in D3 by multiple variables within JSON data?

Seeking guidance with D3.js for my new project. I have JSON data containing course titles, attendance records, and last attendance dates. How can I filter or manipulate this data to calculate the mean attendance for each individual course title within the ...