How can you toggle the visibility of a child table column within a DT table?

In the scenario of a DT table with child tables within a Shiny app, such as the one described in this discussion, how would you go about hiding or showing a column in a child table? This method is adapted from this source.

Answer №1

Here's a unique approach to accomplish this task. By allowing the user to specify the index of a child table and then select the column index within that child table, they can easily toggle the visibility of that specific column by clicking a designated button. The code snippet demonstrating this functionality is sourced from a discussion thread linked in the original post, with additional focus on checkboxes which are not directly relevant to the current context.

library(DT)
library(shiny)

shinyCheckbox <- function(id, values) {
  inputs <- character(length(values))
  for(i in seq_along(inputs)) {
    inputs[i] <- 
      as.character(
        checkboxInput(paste0(id, i), label = NULL, value = values[i], width = "20px")
      )
  }
  inputs
}

NestedData <- function(dat, children){
  stopifnot(length(children) == nrow(dat))
  g <- function(d){
    if(is.data.frame(d)){
      purrr::transpose(d)
    }else{
      purrr::transpose(NestedData(d[[1]], children = d$children))
    }
  }
  subdats <- lapply(children, g)
  oplus <- ifelse(lengths(subdats), "&oplus;", "") 
  cbind(" " = oplus, dat, "_details" = I(subdats), 
        stringsAsFactors = FALSE)
}

dat <- data.frame(
  Sr = c(1.5, 2.3),
  Description = c("A - B", "X - Y")
)
## details of row 1
subdat1 <- data.frame(
  Chromosome = c("chr18","chr4"),
  SNP = c("rs2","rs3"),
  YN = c(TRUE, FALSE),
  stringsAsFactors = FALSE
)
subdat1$check <- shinyCheckbox("check", subdat1$YN)

## details of row 2
subdat2 <- data.frame(
  Chromosome = c("chr19","chr20"), 
  SNP = c("rs3","rs4"),
  YN = c(TRUE, FALSE),
  stringsAsFactors = FALSE
)
subdat2$check <- shinyCheckbox("check", subdat2$YN)

Dat <- NestedData(dat, list(subdat1, subdat2))

## whether to show row names
rowNames = FALSE
colIdx <- as.integer(rowNames)

## the callback
parentRows <- which(Dat[,1] != "")
callback <- JS(
  sprintf("var parentRows = [%s];", toString(parentRows-1)),
  sprintf("var j0 = %d;", colIdx),
  "var nrows = table.rows().count();",
  "for(let i = 0; i < nrows; ++i){",
  "  var $cell = table.cell(i,j0).nodes().to$();",
  "  if(parentRows.indexOf(i) > -1){",
  "    $cell.css({cursor: 'pointer'});",
  "  }else{",
  "    $cell.removeClass('details-control');",
  "  }",
  "}",
  // Additional code snippets may follow, but excerpt remains truncated.

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

What is the most effective method for relocating a DIV element across the webpage?

Struggling to find a solution for my problem. I have functions that fetch data from an API and display it in a div when a user right-clicks on a context menu. The div is currently fixed to the bottom right of the page, but I want it to be draggable so user ...

Angular component.html does not compile due to a check that includes inline array creation

There is an enum called Status: export enum Status { SOME_VAL = "SOME_VAL", SOME_VAL_2 = "SOME_VAL_2", SOME_VAL_3 = "SOME_VAL_3"; } Also, I have an interface named SomeInterface: export SomeInterface { status? ...

Posting several pictures with Protractor

In my test suite, I have a specific scenario that requires the following steps: Click on a button. Upload an image from a specified directory. Wait for 15 seconds Repeat Steps 1-3 for all images in the specified directory. I need to figure out how to up ...

Using Django to Display a Line Chart with Data from a Dictionary in a Template

I have a dictionary that was generated in the views.py file. The structure of the dictionary is as follows, but it contains data for an unspecified number of enterprises: { enterprise1: {'Year': ['2014/2015', '2016/2017', &ap ...

JavaScript => Compare elements in an array based on their respective dates

I have an array consisting of more than 50 objects. This array is created by concatenating two arrays together. Each object in this array contains a 'date' key with the date string formatted as: `"2017-03-31T11:30:00.000Z"` Additionally, there ...

Guide on incorporating file uploads in an Angular 6 project

I am currently working on creating a component where I have implemented a file upload function in a child component and am attempting to use that component's selector in another one. Here is my project structure: - upload : upload.component.html up ...

Incorporating JavaScript into a Node.js project's Jade template

I'm attempting to integrate JavaScript into a jade template page. The code I have written is: script(src='/public/javascripts/scr1.js') and the JavaScript file is located in that directory. Within the script, I have written alert("doesnt wor ...

I am seeking the original XML element with the exact tagName, including proper case sensitivity

Below is a code snippet that retrieves and displays the UpperCase text of tagNames. I am looking to work with the original case. var xml = '<myElements type="AA" coID="A923"><myHouse>01</myHouse> <myCars>02</myCars><m ...

Issues with the functionality of the sliding menu in Angular are being encountered when trying to use $

Challenge I am facing an issue with a slider menu feature that I integrated into a mobile application for navigation purposes. The menu is functioning properly - it displays, allows flicking of the initial links, and can be closed by pushing the backdrop. ...

Weaknesses found in the React Js library bundled with create-react-app

Each time I initiate a new react project using npx create-react-app <AppName>, the following vulnerabilities are detected: 96 vulnerabilities found - Packages audited: 1682 Severity: 65 Moderate | 30 High | 1 Critical Node Version: v14.18.1 Npm: 7.20 ...

What is the best way to format the incoming data to display as HTML code?

My textarea has a v-model called content where input text is assigned to content.description. Now, I need to transfer this information to another element, specifically a div. The challenge lies in the fact that if my textarea includes HTML code, I want it ...

Unable to process jquery AJAX request

Hello, I've been attempting to make a simple ajax call to a method in my code behind. Despite keeping it straightforward for testing purposes, I keep encountering errors. It seems like a basic mistake, but I'm at a loss on how to proceed. The pro ...

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

Authentication not being triggered by Adal.js

I have been attempting to incorporate adal.js into my application. Here is the code I am using. Can someone please help me understand why the authentication process is not being triggered? var app = angular.module('TestWebApp', [ 'ngRout ...

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

Vue component with a variable number of rows, each containing a variable number of input fields

I am currently working on creating a form that can have a variable number of steps. Users should be able to add an additional step by clicking a button. Each step will contain some input fields and buttons to dynamically create more input fields. For inst ...

How can I retrieve the HEX code of a color from an image when hovering or clicking?

Is there a way to retrieve the hexadecimal code of a pixel within an image displayed on a webpage using jQuery, without relying on the canvas element? I am specifically interested in obtaining the actual color code of the image itself, not the background c ...

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Playground https://codesandbox.io/s/typescript-type-checking-question-0b42t Sample Code type BadgeTypes = { success: string; secondary: string; alert: string; text: string; }; type Theme = { fonts?: object; borderRadius: string; primary?: o ...

What sets apart .addEventListener and .on() when it comes to including an event in Bootstrap 5?

I'm currently attempting to attach a listener to my modal in order to implement a certain behavior each time the modal is opened. As per the guidance from Bootstrap 5 documentation, you can achieve this by using: https://getbootstrap.com/docs/5.2/com ...

Locate the positions of 2 identification numbers within a Mongoose array

I am currently working on developing a middleware that validates if a conversation exists between two users in the database. If the conversation does not exist, the middleware will create a new conversation. I am attempting to utilize Mongoose's $in o ...