Customize pagination box size and font

Question

I'm trying to achieve the following goal. I have this code to display a dataTableOutput:

fluidRow(column(4,
                                       dataTableOutput(outputId="table01", width = '80px')))

and this is the code that defines the visual settings:

output$table01 <- DT::renderDataTable({  
  list_var <- get_mp_data()
  df <- list_var[[3]]
  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,
                                        autoWidth = T
                                        ,pageLength = 10 # 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 = 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)
})

This table is almost perfect, but as you can see from my screenshot, the pagination box(es) on the lower hand side of the table are taking a ton of space for no reason. Is there a way to have the "1" box much smaller? and is there a way to hide the "Previous" "Next" words? Many thanks

It should be accomplished using css. Something like this: `tags$style(HTML(" .previous, .next { display: none; } a.paginate_button { min-width: 0.5em; padding: 0.1em .5em; } "))`. However adding it directly to the shinyapp does not have any effect, although in developer tools it does. — Rolando Tamayo, Jun 25 '20 at 06:50
Another alternative is to add to the list of options `paging = F`, But this disappears both the page numbers and the words next and previous. The reason why paging takes up a lot of space is that in the `dataTableOutput` you use `width = 80px`, if you increase it the words and the numbers remain in line. — Rolando Tamayo, Jun 25 '20 at 06:54

score 1 · Accepted Answer · answered Jun 25 '20 at 08:15

1

You can use this CSS to reduce the size of the buttons:

CSS <- "
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 0.5em !important; 
  padding: 0.1em .5em !important;
} 
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  ...

To remove the words "previous", "next", "first", "last", you can do:

datatable(mydataframe, options = 
            list(
              language = list(
                paginate = list(first="", last="", previous="", `next`="")
              )
            )
)

answered Jun 25 '20 at 08:15

Stéphane Laurent

75,186
15
119
225

That works perfectly, thank you! By the way, would you also know how to hide the words "Previous" and ""Next" and just live the numbered boxed below the table? – Angelo Jun 25 '20 at 12:15
Actually, please ignore my last question. I found out I can add "pagingType = "numbers" inside the options = list() and that does the trick. Much appreciated your support Stephane – Angelo Jun 25 '20 at 14:02

Customize pagination box size and font

1 Answers1