I'm using R and Shiny and trying to display two dataTableOutput elements next to each other. In order to achieve this I'm using the fluidRow column feature but I need to additional customize the width of these two tables. This is my code:
# this chunk of code makes the pagination buttons smaller
tags$style(HTML(".dataTables_wrapper_aa .dataTables_paginate .paginate_button {
min-width: 0.5em !important;
padding: 0.1em .5em !important;
}
")),
#
tags$style(HTML(".pagination_aa {
display: inline-block !important;
}
.pagination_aa a {
color: black !important;
float: left !important;
padding: 8px 16px !important;
text-decoration: none !important;
font-size: 12px !important;
}
")),
# this chunk code of code should customize and make the two tables extremely tight (it's a test) but in reality it doesn't do anything, why?
tags$style(HTML(".optim_mp_table02 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
border-collapse: collapse;
width: 10px !important;
}
"))
then, this is how I use the tags above:
fluidRow(column(width = 3,
offset = 0, # this seems useless
style='padding:10px;', # this seems useless
tags$div(class="dataTables_wrapper_aa pagination_aa",
DT::dataTableOutput(outputId="table01angelo",
width = '10px' # this seems useless
))),
column(width = 3
#,offset = 0
#,style='padding:10px;',
,tags$div(class="dataTables_wrapper_aa pagination_aa optim_mp_table02",
DT::dataTableOutput(outputId="table02angelo", width = '10px')))
))
I tried a ton of combinations (bear in mind I'm an html/css newbie) and also read these two questions shiny fluidrow column white space and Controlling table width in Shiny dataTableOutput but somehow I get two overlapping tables!
By the way, I could solve this problem by using column width = 4 but that would take too much space. Since the tot number of columns available is 12, I need ultimately to have 4 tables that will take 3 columns each.
I'm also attaching a screenshot.
Thank you for the help
One final addition, in case this could be of help. Both tables are created precisely in this way:
output$table01angelo <- DT::renderDataTable({
df <- get_mp_data()
if(is.null(df)){
df <- data.frame()
}else{
upcolor = "lightblue"
downcolor = "lightblue"
col_name = "CHG"
df <- datatable(df
, rownames = FALSE
, caption = paste0("Pre/Post Duration")
, filter = 'none'
, options = list(scrollX = F
#, lengthChange = FALSE # this feature hides the "Show Entries" on top of the table, so we won't be able to customize how many entries we can see all together
, language = list(lengthMenu = "_MENU_") # this feature hides the text "Show Entries" but does keep the dropdown box to change the # rows per page
, pagingType = "numbers" # this hides the Next and Previous buttons --> https://datatables.net/reference/option/pagingType
, autoWidth = T
,pageLength = 5 # this determines how many rows we want to see per page
, info = FALSE # this will hide the "Showing 1 of 2..." at the bottom of the table --> https://stackguides.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
,searching = FALSE # this removes the search box -> https://stackguides.com/questions/35624413/remove-search-option-but-leave-search-columns-option
,columnDefs = list(list(width = '4', targets = c(3) )
,list(width = '4', targets = c(2) )
) # careful, column counting STARTS FROM 0 !
)) %>%
formatStyle(col_name,
#background = styleColorBar(range(df[, c(col_name)]), 'lightblue'),
background = color_from_middle(df[, c(col_name)] , downcolor, upcolor),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
}
return(df)
})
