How to shrink datatable width to less than the column headers width

Question

I have a DT that I would like to reduce in width and place behind this image of the 96 well plate. Firstly, I am most concerned with resizing the image. I have been trying everything that I can find on the internet and haven't found something that works yet. It seems like the columns have reached the minimum width, and I think that is because they are trying to compensate for the width of the column header labels (which is cannot find a way to be rid of without generating an error).

Here is my question: How can I change the total width of my table to match the total width of the image? And along with that, is there a way to simultaneously make the shape of the cells (most especially, their widths) match those of the wells in the 96 well plate? The issue seems to be the width since the height doesn't have an issue changing.

Here is my code:

library(shiny)
library(shinythemes)
library(sortable)
library(colourpicker)
library(glue)
library(png)
library(dplyr)
library(DT)

toggleTable = matrix("", #This is for the input in the cells. #If statement for radio buttons goes here
                      nrow = 8, 
                      ncol = 12, 
                      seq.int(1, 12, 1))

ui = fluidPage(
  
  ####Image of the 96 well plate####
  imageOutput("plate"),
  
  
  ####Table for the 96 well plate####
  
  DT::dataTableOutput("userChoiceTbl", 
                      width = 429, 
                      height = 285),

)

server = function(input, output, session) {
  
  ####Table behind 96 well plate###
  output$userChoiceTbl <- DT::renderDataTable({
    
    datatable(
      toggleTable,
              options = list(dom = 't',
                             ordering = F,
                             bSort = FALSE,
                             autoWidth = FALSE,
                             initComplete = JS(
                               "function(settings, json) {",
                               "$('td').css({'border-radius': '100%' });",
                               "$('td').css({'height': '15px' });",
                               "$('td').css({'width': '15px' });",
                               "$('td').css({'border-spacing': '10px' });",
                               "$('td').css({'border-collapse': 'separate' });",
                               "}")
                             ),
              selection = list(target = 'cell'),
              class = 'cell-border',) %>%
      formatStyle(1:12, cursor = 'pointer')
  })
  
  
  ####Create image of 96 well plate####
  output$plate <- renderImage({
    list(
      src = "images/plate.png",
      contentType = "image/png",
      alt = "If you cannot see this image, you will need to choose a different internet browser.", 
      height = 334,
      width = 500
    )
  }, deleteFile = FALSE)

}
  

shinyApp(ui, server)

user_17918989 · Answer

Do I completely understand how this works? No. Should I be the one explaining this? Also no. But here is what I found anyways:

For some reason, it helps to change the table-layout to fixed. I'm not familiar with why, so if someone could enlighten me, I would greatly appreciate it! My thought would be that since I am trying to declare fixed pixel values for the width, the table-layout needs to be fixed so that it can override whatever other settings that would otherwise cause it to adapt to the width of the column headings.


datatable(
      toggleTable,
              options = list(dom = 't',
                             ordering = F,
                             bSort = FALSE,
                             autoWidth = FALSE,
                             initComplete = JS(
                               "function(settings, json) {",
                               "$('td').css({'border-radius': '100%' });",
                               "$('td').css({'height': '20px' });",
                               "$('td').css({'width': '20px' });",
                               "$('table').css({'table-layout': 'fixed' });",
                               "$('td').css({'overflow': 'hidden' });",
                               "$('td').css({'border-collapse': 'separate' });",
                               "}")
                             ),
              selection = list(target = 'cell'),
              class = 'cell-border',) %>%
      formatStyle(1:12, cursor = 'pointer')
  })

How to shrink datatable width to less than the column headers width

1 Answers