I am currently working with R and Shiny, and I am attempting to display two dataTableOutput elements next to each other. To accomplish this, I am utilizing the fluidRow column feature, but I need to further customize the width of these two tables. Here is the code:
# The following code reduces the size of the pagination buttons
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 code segment should customizes and makes the two tables extremely tight (it's a test), but in reality, it doesn't have any effect. 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, here is how I use the tags mentioned 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 have tried numerous combinations (keeping in mind that I am new to html/css) and also referred to the following two questions shiny fluidrow column white space and Controlling table width in Shiny dataTableOutput, but I still end up with two tables overlapping each other! On the other hand, I could resolve this issue by using column width = 4, but that would take up too much space. Since there are a total of 12 columns available, I ultimately need to have 4 tables, each taking up 3 columns. I have also attached a screenshot. Thank you for the assistance. https://i.sstatic.net/z5fTb.png
One more thing, in case it might be helpful. Both tables are created in the following 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://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
, searching = FALSE # this removes the search box --> https://stackoverflow.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 = color_from_middle(df[, c(col_name)], downcolor, upcolor),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
}
return(df)
})